MapQuest OSM is pretty

leaflet-google.js

@@ -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 = [];
-	};

map.html

@@ -10,8 +10,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>

map.js

@@ -25,8 +25,10 @@ $(document).ready(function() {
     }
 
     var map = L.map('map').setView([51.0475378, 3.7261835], 13);
-    var googleLayer = new L.Google('TERRAIN');
+    L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg', {
-    map.addLayer(googleLayer);
+        attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+        subdomains: '1234'
+    }).addTo(map);
 
     $.getJSON('data.json')
     .done(function(data) {