midgard/blokmap
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Updated google maps library

Browse source
This commit is contained in:
feliciaan 2014-12-11 10:20:19 +01:00
parent fecec5fb19
commit a76761e4d2
2 changed files with 107 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

158
leaflet-google.js
View file

@ -1,6 +1,8 @@
/* /*
* L.TileLayer is used for standard xyz-numbered tile layers. * Google layer using Google Maps API
*/ */
/* global google: true */
L.Google = L.Class.extend({ L.Google = L.Class.extend({
includes: L.Mixin.Events, includes: L.Mixin.Events,
@ -15,13 +17,19 @@ L.Google = L.Class.extend({
opacity: 1, opacity: 1,
continuousWorld: false, continuousWorld: false,
noWrap: false, noWrap: false,
mapOptions: {
backgroundColor: '#dddddd'
}
}, },
// Possible types: SATELLITE, ROADMAP, HYBRID // Possible types: SATELLITE, ROADMAP, HYBRID, TERRAIN
initialize: function(type, options) { initialize: function(type, options) {
L.Util.setOptions(this, options); L.Util.setOptions(this, options);
this._type = google.maps.MapTypeId[type || 'ROADMAP']; this._ready = google.maps.Map !== undefined;
if (!this._ready) L.Google.asyncWait.push(this);
this._type = type || 'SATELLITE';
}, },
onAdd: function(map, insertAtTheBottom) { onAdd: function(map, insertAtTheBottom) {
@ -37,20 +45,26 @@ L.Google = L.Class.extend({
this._limitedUpdate = L.Util.limitExecByInterval(this._update, 150, this); this._limitedUpdate = L.Util.limitExecByInterval(this._update, 150, this);
map.on('move', this._update, this); map.on('move', this._update, this);
//map.on('moveend', this._update, this);
map.on('zoomanim', this._handleZoomAnim, this);
//20px instead of 1em to avoid a slight overlap with google's attribution
map._controlCorners.bottomright.style.marginBottom = '20px';
this._reset(); this._reset();
this._update(); this._update();
}, },
onRemove: function(map) { onRemove: function(map) {
this._map._container.removeChild(this._container); map._container.removeChild(this._container);
//this._container = null;
this._map.off('viewreset', this._resetCallback, this); map.off('viewreset', this._resetCallback, this);
this._map.off('move', this._update, this); map.off('move', this._update, this);
//this._map.off('moveend', this._update, this);
map.off('zoomanim', this._handleZoomAnim, this);
map._controlCorners.bottomright.style.marginBottom = '0em';
}, },
getAttribution: function() { getAttribution: function() {
@ -64,45 +78,64 @@ L.Google = L.Class.extend({
} }
}, },
setElementSize: function(e, size) {
e.style.width = size.x + 'px';
e.style.height = size.y + 'px';
},
_initContainer: function() { _initContainer: function() {
var tilePane = this._map._container var tilePane = this._map._container,
first = tilePane.firstChild; first = tilePane.firstChild;
if (!this._container) { if (!this._container) {
this._container = L.DomUtil.create('div', 'leaflet-google-layer leaflet-top leaflet-left'); this._container = L.DomUtil.create('div', 'leaflet-google-layer leaflet-top leaflet-left');
this._container.id = "_GMapContainer"; this._container.id = '_GMapContainer_' + L.Util.stamp(this);
this._container.style.zIndex = 'auto';
} }
if (true) { tilePane.insertBefore(this._container, first);
tilePane.insertBefore(this._container, first);
this.setOpacity(this.options.opacity); this.setOpacity(this.options.opacity);
var size = this._map.getSize(); this.setElementSize(this._container, this._map.getSize());
this._container.style.width = size.x + 'px';
this._container.style.height = size.y + 'px';
}
}, },
_initMapObject: function() { _initMapObject: function() {
if (!this._ready) return;
this._google_center = new google.maps.LatLng(0, 0); this._google_center = new google.maps.LatLng(0, 0);
var map = new google.maps.Map(this._container, { var map = new google.maps.Map(this._container, {
center: this._google_center, center: this._google_center,
zoom: 0, zoom: 0,
mapTypeId: this._type, tilt: 0,
disableDefaultUI: true, mapTypeId: google.maps.MapTypeId[this._type],
keyboardShortcuts: false, disableDefaultUI: true,
draggable: false, keyboardShortcuts: false,
disableDoubleClickZoom: true, draggable: false,
scrollwheel: false, disableDoubleClickZoom: true,
streetViewControl: false scrollwheel: false,
streetViewControl: false,
styles: this.options.mapOptions.styles,
backgroundColor: this.options.mapOptions.backgroundColor
}); });
var _this = this; var _this = this;
this._reposition = google.maps.event.addListenerOnce(map, "center_changed", this._reposition = google.maps.event.addListenerOnce(map, 'center_changed',
function() { _this.onReposition(); }); function() { _this.onReposition(); });
map.backgroundColor = '#ff0000';
this._google = map; this._google = map;
google.maps.event.addListenerOnce(map, 'idle',
function() { _this._checkZoomLevels(); });
//Reporting that map-object was initialized.
this.fire('MapObjectInitialized', { mapObject: map });
},
_checkZoomLevels: function() {
//setting the zoom level on the Google map may result in a different zoom level than the one requested
//(it won't go beyond the level for which they have data).
// verify and make sure the zoom levels on both Leaflet and Google maps are consistent
if (this._google.getZoom() !== this._map.getZoom()) {
//zoom levels are out of sync. Set the leaflet zoom level to match the google one
this._map.setZoom( this._google.getZoom() );
}
}, },
_resetCallback: function(e) { _resetCallback: function(e) {
@ -113,35 +146,54 @@ L.Google = L.Class.extend({
this._initContainer(); this._initContainer();
}, },
_update: function() { _update: function(e) {
if (!this._google) return;
this._resize(); this._resize();
var bounds = this._map.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var google_bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(sw.lat, sw.lng),
new google.maps.LatLng(ne.lat, ne.lng)
);
var center = this._map.getCenter(); var center = this._map.getCenter();
var _center = new google.maps.LatLng(center.lat, center.lng); var _center = new google.maps.LatLng(center.lat, center.lng);
this._google.setCenter(_center); this._google.setCenter(_center);
this._google.setZoom(this._map.getZoom()); this._google.setZoom(Math.round(this._map.getZoom()));
//this._google.fitBounds(google_bounds);
this._checkZoomLevels();
}, },
_resize: function() { _resize: function() {
var size = this._map.getSize(); var size = this._map.getSize();
if (this._container.style.width == size.x && if (this._container.style.width === size.x &&
this._container.style.height == size.y) this._container.style.height === size.y)
return; return;
this._container.style.width = size.x + 'px'; this.setElementSize(this._container, size);
this._container.style.height = size.y + 'px'; this.onReposition();
google.maps.event.trigger(this._google, "resize"); },
},
onReposition: function() {
//google.maps.event.trigger(this._google, "resize"); _handleZoomAnim: function (e) {
} var center = e.center;
}); var _center = new google.maps.LatLng(center.lat, center.lng);
this._google.setCenter(_center);
this._google.setZoom(Math.round(e.zoom));
},
onReposition: function() {
if (!this._google) return;
google.maps.event.trigger(this._google, 'resize');
}
});
L.Google.asyncWait = [];
L.Google.asyncInitialize = function() {
var i;
for (i = 0; i < L.Google.asyncWait.length; i++) {
var o = L.Google.asyncWait[i];
o._ready = true;
if (o._container) {
o._initMapObject();
o._update();
}
}
L.Google.asyncWait = [];
};

2
map.html
View file

@ -3,6 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Blokken in Gent</title> <title>Blokken in Gent</title>
<meta name="apple-itunes-app" content="app-id=602640924">
<meta name="google-play-app" content="app-id=be.ugent.zeus.hydra">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />