use map box again
This commit is contained in:
feliciaan
parent
34d945fa57
commit
37ad54ae4f
4 changed files with 3 additions and 219 deletions
|
|
@ -1,199 +0,0 @@
|
|||
/*
|
||||
* Google layer using Google Maps API
|
||||
*/
|
||||
|
||||
/* global google: true */
|
||||
|
||||
L.Google = L.Class.extend({
|
||||
includes: L.Mixin.Events,
|
||||
|
||||
options: {
|
||||
minZoom: 0,
|
||||
maxZoom: 18,
|
||||
tileSize: 256,
|
||||
subdomains: 'abc',
|
||||
errorTileUrl: '',
|
||||
attribution: 'Made with ❤ by <a href="http://zeus.ugent.be">Zeus WPI</a>',
|
||||
opacity: 1,
|
||||
continuousWorld: false,
|
||||
noWrap: false,
|
||||
mapOptions: {
|
||||
backgroundColor: '#dddddd'
|
||||
}
|
||||
},
|
||||
|
||||
// Possible types: SATELLITE, ROADMAP, HYBRID, TERRAIN
|
||||
initialize: function(type, options) {
|
||||
L.Util.setOptions(this, options);
|
||||
|
||||
this._ready = google.maps.Map !== undefined;
|
||||
if (!this._ready) L.Google.asyncWait.push(this);
|
||||
|
||||
this._type = type || 'SATELLITE';
|
||||
},
|
||||
|
||||
onAdd: function(map, insertAtTheBottom) {
|
||||
this._map = map;
|
||||
this._insertAtTheBottom = insertAtTheBottom;
|
||||
|
||||
// create a container div for tiles
|
||||
this._initContainer();
|
||||
this._initMapObject();
|
||||
|
||||
// set up events
|
||||
map.on('viewreset', this._resetCallback, this);
|
||||
|
||||
this._limitedUpdate = L.Util.limitExecByInterval(this._update, 150, this);
|
||||
map.on('move', 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._update();
|
||||
},
|
||||
|
||||
onRemove: function(map) {
|
||||
map._container.removeChild(this._container);
|
||||
|
||||
map.off('viewreset', this._resetCallback, this);
|
||||
|
||||
map.off('move', this._update, this);
|
||||
|
||||
map.off('zoomanim', this._handleZoomAnim, this);
|
||||
|
||||
map._controlCorners.bottomright.style.marginBottom = '0em';
|
||||
},
|
||||
|
||||
getAttribution: function() {
|
||||
return this.options.attribution;
|
||||
},
|
||||
|
||||
setOpacity: function(opacity) {
|
||||
this.options.opacity = opacity;
|
||||
if (opacity < 1) {
|
||||
L.DomUtil.setOpacity(this._container, opacity);
|
||||
}
|
||||
},
|
||||
|
||||
setElementSize: function(e, size) {
|
||||
e.style.width = size.x + 'px';
|
||||
e.style.height = size.y + 'px';
|
||||
},
|
||||
|
||||
_initContainer: function() {
|
||||
var tilePane = this._map._container,
|
||||
first = tilePane.firstChild;
|
||||
|
||||
if (!this._container) {
|
||||
this._container = L.DomUtil.create('div', 'leaflet-google-layer leaflet-top leaflet-left');
|
||||
this._container.id = '_GMapContainer_' + L.Util.stamp(this);
|
||||
this._container.style.zIndex = 'auto';
|
||||
}
|
||||
|
||||
tilePane.insertBefore(this._container, first);
|
||||
|
||||
this.setOpacity(this.options.opacity);
|
||||
this.setElementSize(this._container, this._map.getSize());
|
||||
},
|
||||
|
||||
_initMapObject: function() {
|
||||
if (!this._ready) return;
|
||||
this._google_center = new google.maps.LatLng(0, 0);
|
||||
var map = new google.maps.Map(this._container, {
|
||||
center: this._google_center,
|
||||
zoom: 0,
|
||||
tilt: 0,
|
||||
mapTypeId: google.maps.MapTypeId[this._type],
|
||||
disableDefaultUI: true,
|
||||
keyboardShortcuts: false,
|
||||
draggable: false,
|
||||
disableDoubleClickZoom: true,
|
||||
scrollwheel: false,
|
||||
streetViewControl: false,
|
||||
styles: this.options.mapOptions.styles,
|
||||
backgroundColor: this.options.mapOptions.backgroundColor
|
||||
});
|
||||
|
||||
var _this = this;
|
||||
this._reposition = google.maps.event.addListenerOnce(map, 'center_changed',
|
||||
function() { _this.onReposition(); });
|
||||
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) {
|
||||
this._reset(e.hard);
|
||||
},
|
||||
|
||||
_reset: function(clearOldContainer) {
|
||||
this._initContainer();
|
||||
},
|
||||
|
||||
_update: function(e) {
|
||||
if (!this._google) return;
|
||||
this._resize();
|
||||
|
||||
var center = this._map.getCenter();
|
||||
var _center = new google.maps.LatLng(center.lat, center.lng);
|
||||
|
||||
this._google.setCenter(_center);
|
||||
this._google.setZoom(Math.round(this._map.getZoom()));
|
||||
|
||||
this._checkZoomLevels();
|
||||
},
|
||||
|
||||
_resize: function() {
|
||||
var size = this._map.getSize();
|
||||
if (this._container.style.width === size.x &&
|
||||
this._container.style.height === size.y)
|
||||
return;
|
||||
this.setElementSize(this._container, size);
|
||||
this.onReposition();
|
||||
},
|
||||
|
||||
|
||||
_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 = [];
|
||||
};
|
||||
16
map.css
16
map.css
|
|
@ -15,14 +15,6 @@ html, body {
|
|||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.leaflet-map-pane {
|
||||
z-index: 2 !important;
|
||||
}
|
||||
|
||||
.leaflet-google-layer {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
.leaflet-popup-content-wrapper {
|
||||
width: 600px;
|
||||
max-height: 400px;
|
||||
|
|
@ -33,14 +25,6 @@ html, body {
|
|||
width:auto !important;
|
||||
}
|
||||
|
||||
.leaflet-control-attribution {
|
||||
bottom: -5px;
|
||||
}
|
||||
|
||||
div.leaflet-top.leaflet-right {
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
a img {
|
||||
border: none;
|
||||
}
|
||||
|
|
|
|||
2
map.html
2
map.html
|
|
@ -23,8 +23,6 @@
|
|||
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
|
||||
<link rel="stylesheet" href="map.css" />
|
||||
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
|
||||
<script src="http://maps.google.com/maps/api/js?key=AIzaSyBAuXgl_O24GqLMl-ylUPLEH7O0wbK3J4A&v=3.2&sensor=false"></script>
|
||||
<script src="leaflet-google.js"></script>
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
|
||||
<script type="text/javascript" src="map.js"></script>
|
||||
|
|
|
|||
5
map.js
5
map.js
|
|
@ -25,8 +25,9 @@ $(document).ready(function() {
|
|||
}
|
||||
|
||||
var map = L.map('map').setView([51.0475378, 3.7261835], 13);
|
||||
var googleLayer = new L.Google('TERRAIN');
|
||||
map.addLayer(googleLayer);
|
||||
var osm = L.tileLayer('https://{s}.tiles.mapbox.com/v3/feliciaan.keoaj8d5/{z}/{x}/{y}.png', {
|
||||
attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Mapbox</a> | Made with ❤ by <a href="http://zeus.ugent.be">Zeus WPI</a>'
|
||||
}).addTo(map);
|
||||
|
||||
$.getJSON('data.json')
|
||||
.done(function(data) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue