From 37ad54ae4f22e41387e2d4489b9d1dbd86072781 Mon Sep 17 00:00:00 2001 From: feliciaan Date: Fri, 13 Feb 2015 18:52:57 +0100 Subject: [PATCH] use map box again --- leaflet-google.js | 199 ---------------------------------------------- map.css | 16 ---- map.html | 2 - map.js | 5 +- 4 files changed, 3 insertions(+), 219 deletions(-) delete mode 100644 leaflet-google.js diff --git a/leaflet-google.js b/leaflet-google.js deleted file mode 100644 index f1c1dbc..0000000 --- a/leaflet-google.js +++ /dev/null @@ -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 Zeus WPI', - 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 = []; - }; diff --git a/map.css b/map.css index b881d2e..2eda086 100644 --- a/map.css +++ b/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; } diff --git a/map.html b/map.html index d72feb7..ce0c5d9 100644 --- a/map.html +++ b/map.html @@ -23,8 +23,6 @@ - - diff --git a/map.js b/map.js index e7d39cc..3cc43c9 100644 --- a/map.js +++ b/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: 'Mapbox | Made with ❤ by Zeus WPI' + }).addTo(map); $.getJSON('data.json') .done(function(data) {