Commit 2b761fa222a67feb8c1da0fb7c348125eaa0e350

  • avatar
  • arvind
  • Thu Sep 05 18:00:56 IST 2013
Adding satelite image layer
  • index.html 5 -++++
  • leaflet-providers.js 469 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  • main.js 10 ----++++++
  • Diff rendering mode:
  • inline
  • side by side

index.html

1<!doctype html>1<!doctype html>
2<head>2<head>
3 <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
3 <script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet-src.js"></script>
4 <script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>4 <script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
5 <script src="src/Label.js" type="text/javascript"></script>5 <script src="src/Label.js" type="text/javascript"></script>
6 <script type="text/javascript" src="src/Marker.Label.js"></script>6 <script type="text/javascript" src="src/Marker.Label.js"></script>
……
13 <![endif]-->13 <![endif]-->
14 <link rel="stylesheet" href="leaflet.label.css" type="text/css" media="screen" />14 <link rel="stylesheet" href="leaflet.label.css" type="text/css" media="screen" />
15 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>15 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
16
16</head>17</head>
17<body>18<body>
19 <script type="text/javascript" src="leaflet-providers.js"></script>
18 <b>Reload to reset</b>20 <b>Reload to reset</b>
19 <div id="map" style="width: 800x; height: 600px; margin-top:30px;"></div>21 <div id="map" style="width: 800x; height: 600px; margin-top:30px;"></div>
20 <script type="text/template" id="image-item-template">22 <script type="text/template" id="image-item-template">
……
29 <script>29 <script>
30 init();30 init();
31 </script>31 </script>
32
32</body>33</body>
33</html>34</html>

leaflet-providers.js

1(function () {
2 'use strict';
3
4 L.TileLayer.Provider = L.TileLayer.extend({
5 initialize: function (arg, options) {
6 var providers = L.TileLayer.Provider.providers;
7
8 var parts = arg.split('.');
9
10 var providerName = parts[0];
11 var variantName = parts[1];
12
13 if (!providers[providerName]) {
14 throw 'No such provider (' + providerName + ')';
15 }
16
17 var provider = {
18 url: providers[providerName].url,
19 options: providers[providerName].options
20 };
21
22 // overwrite values in provider from variant.
23 if (variantName && 'variants' in providers[providerName]) {
24 if (!(variantName in providers[providerName].variants)) {
25 throw 'No such name in provider (' + variantName + ')';
26 }
27 var variant = providers[providerName].variants[variantName];
28 provider = {
29 url: variant.url || provider.url,
30 options: L.Util.extend({}, provider.options, variant.options)
31 };
32 } else if (typeof provider.url === 'function') {
33 provider.url = provider.url(parts.splice(1).join('.'));
34 }
35
36 // replace attribution placeholders with their values from toplevel provider attribution,
37 // recursively
38 var attributionReplacer = function (attr) {
39 if (attr.indexOf('{attribution.') === -1) {
40 return attr;
41 }
42 return attr.replace(/\{attribution.(\w*)\}/,
43 function (match, attributionName) {
44 return attributionReplacer(providers[attributionName].options.attribution);
45 }
46 );
47 };
48 provider.options.attribution = attributionReplacer(provider.options.attribution);
49
50 // Compute final options combining provider options with any user overrides
51 var layerOpts = L.Util.extend({}, provider.options, options);
52 L.TileLayer.prototype.initialize.call(this, provider.url, layerOpts);
53 }
54 });
55
56 /**
57 * Definition of providers.
58 * see http://leafletjs.com/reference.html#tilelayer for options in the options map.
59 */
60
61 //jshint maxlen:220
62 L.TileLayer.Provider.providers = {
63 OpenStreetMap: {
64 url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
65 options: {
66 attribution:
67 '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
68 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
69 },
70 variants: {
71 Mapnik: {},
72 BlackAndWhite: {
73 url: 'http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png'
74 },
75 DE: {
76 url: 'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png'
77 }
78 }
79 },
80 OpenCycleMap: {
81 url: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
82 options: {
83 attribution:
84 '&copy; <a href="http://www.opencyclemap.org">OpenCycleMap</a>, {attribution.OpenStreetMap}'
85 }
86 },
87 OpenSeaMap: {
88 url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
89 options: {
90 attribution: 'Map data: &copy; <a href="http://www.openseamap.org">OpenSeaMap</a> contributors'
91 }
92 },
93 Thunderforest: {
94 url: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
95 options: {
96 attribution: '{attribution.OpenCycleMap}'
97 },
98 variants: {
99 OpenCycleMap: {},
100 Transport: {
101 url: 'http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png'
102 },
103 Landscape: {
104 url: 'http://{s}.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png'
105 },
106 Outdoors: {
107 url: 'http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png'
108 }
109 }
110 },
111 OpenMapSurfer: {
112 url: 'http://129.206.74.245:8001/tms_r.ashx?x={x}&y={y}&z={z}',
113 options: {
114 attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> &mdash; Map data {attribution.OpenStreetMap}'
115 },
116 variants: {
117 Grayscale: {
118 url: 'http://129.206.74.245:8008/tms_rg.ashx?x={x}&y={y}&z={z}'
119 }
120 }
121 },
122 MapQuestOpen: {
123 url: 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg',
124 options: {
125 attribution:
126 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; ' +
127 'Map data {attribution.OpenStreetMap}',
128 subdomains: '1234'
129 },
130 variants: {
131 OSM: {},
132 Aerial: {
133 url: 'http://oatile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg',
134 options: {
135 attribution:
136 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; ' +
137 'Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency'
138 }
139 }
140 }
141 },
142 MapBox: {
143 url: function (id) {
144 return 'http://{s}.tiles.mapbox.com/v3/' + id + '/{z}/{x}/{y}.png';
145 },
146 options: {
147 attribution:
148 'Imagery from <a href="http://mapbox.com/about/maps/">MapBox</a> &mdash; ' +
149 'Map data {attribution.OpenStreetMap}',
150 subdomains: 'abcd'
151 }
152 },
153 Stamen: {
154 url: 'http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png',
155 options: {
156 attribution:
157 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
158 '<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; ' +
159 'Map data {attribution.OpenStreetMap}',
160 subdomains: 'abcd',
161 minZoom: 0,
162 maxZoom: 20
163 },
164 variants: {
165 Toner: {},
166 TonerBackground: {
167 url: 'http://{s}.tile.stamen.com/toner-background/{z}/{x}/{y}.png'
168 },
169 TonerHybrid: {
170 url: 'http://{s}.tile.stamen.com/toner-hybrid/{z}/{x}/{y}.png'
171 },
172 TonerLines: {
173 url: 'http://{s}.tile.stamen.com/toner-lines/{z}/{x}/{y}.png'
174 },
175 TonerLabels: {
176 url: 'http://{s}.tile.stamen.com/toner-labels/{z}/{x}/{y}.png'
177 },
178 TonerLite: {
179 url: 'http://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png'
180 },
181 Terrain: {
182 url: 'http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.jpg',
183 options: {
184 minZoom: 4,
185 maxZoom: 18
186 }
187 },
188 TerrainBackground: {
189 url: 'http://{s}.tile.stamen.com/terrain-background/{z}/{x}/{y}.jpg',
190 options: {
191 minZoom: 4,
192 maxZoom: 18
193 }
194 },
195 Watercolor: {
196 url: 'http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg',
197 options: {
198 minZoom: 3,
199 maxZoom: 16
200 }
201 }
202 }
203 },
204 Esri: {
205 url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
206 options: {
207 attribution: 'Tiles &copy; Esri'
208 },
209 variants: {
210 WorldStreetMap: {
211 options: {
212 attribution:
213 '{attribution.Esri} &mdash; ' +
214 'Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
215 }
216 },
217 DeLorme: {
218 url: 'http://server.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer/tile/{z}/{y}/{x}',
219 options: {
220 minZoom: 1,
221 maxZoom: 11,
222 attribution: '{attribution.Esri} &mdash; Copyright: &copy;2012 DeLorme'
223 }
224 },
225 WorldTopoMap: {
226 url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
227 options: {
228 attribution:
229 '{attribution.Esri} &mdash; ' +
230 'Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
231 }
232 },
233 WorldImagery: {
234 url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
235 options: {
236 attribution:
237 '{attribution.Esri} &mdash; ' +
238 'Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
239 }
240 },
241 WorldTerrain: {
242 url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}',
243 options: {
244 maxZoom: 13,
245 attribution:
246 '{attribution.Esri} &mdash; ' +
247 'Source: USGS, Esri, TANA, DeLorme, and NPS'
248 }
249 },
250 WorldShadedRelief: {
251 url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}',
252 options: {
253 maxZoom: 13,
254 attribution: '{attribution.Esri} &mdash; Source: Esri'
255 }
256 },
257 WorldPhysical: {
258 url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer/tile/{z}/{y}/{x}',
259 options: {
260 maxZoom: 8,
261 attribution: '{attribution.Esri} &mdash; Source: US National Park Service'
262 }
263 },
264 OceanBasemap: {
265 url: 'http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}',
266 options: {
267 maxZoom: 13,
268 attribution: '{attribution.Esri} &mdash; Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri'
269 }
270 },
271 NatGeoWorldMap: {
272 url: 'http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}',
273 options: {
274 maxZoom: 16,
275 attribution: '{attribution.Esri} &mdash; National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC'
276 }
277 },
278 WorldGrayCanvas: {
279 url: 'http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
280 options: {
281 maxZoom: 16,
282 attribution: '{attribution.Esri} &mdash; Esri, DeLorme, NAVTEQ'
283 }
284 }
285 }
286 },
287 OpenWeatherMap: {
288 options: {
289 attribution: 'Map data &copy; <a href="http://openweathermap.org">OpenWeatherMap</a>',
290 opacity: 0.5
291 },
292 variants: {
293 Clouds: {
294 url: 'http://{s}.tile.openweathermap.org/map/clouds/{z}/{x}/{y}.png'
295 },
296 CloudsClassic: {
297 url: 'http://{s}.tile.openweathermap.org/map/clouds_cls/{z}/{x}/{y}.png'
298 },
299 Precipitation: {
300 url: 'http://{s}.tile.openweathermap.org/map/precipitation/{z}/{x}/{y}.png'
301 },
302 PrecipitationClassic: {
303 url: 'http://{s}.tile.openweathermap.org/map/precipitation_cls/{z}/{x}/{y}.png'
304 },
305 Rain: {
306 url: 'http://{s}.tile.openweathermap.org/map/rain/{z}/{x}/{y}.png'
307 },
308 RainClassic: {
309 url: 'http://{s}.tile.openweathermap.org/map/rain_cls/{z}/{x}/{y}.png'
310 },
311 Pressure: {
312 url: 'http://{s}.tile.openweathermap.org/map/pressure/{z}/{x}/{y}.png'
313 },
314 PressureContour: {
315 url: 'http://{s}.tile.openweathermap.org/map/pressure_cntr/{z}/{x}/{y}.png'
316 },
317 Wind: {
318 url: 'http://{s}.tile.openweathermap.org/map/wind/{z}/{x}/{y}.png'
319 },
320 Temperature: {
321 url: 'http://{s}.tile.openweathermap.org/map/temp/{z}/{x}/{y}.png'
322 },
323 Snow: {
324 url: 'http://{s}.tile.openweathermap.org/map/snow/{z}/{x}/{y}.png'
325 }
326 }
327 },
328 Nokia: {
329 options: {
330 attribution:
331 'Map &copy; <a href="http://developer.here.com">Nokia</a>, Data &copy; NAVTEQ 2012',
332 subdomains: '1234',
333 devID: 'xyz', //These basemaps are free and you can sign up here: http://developer.here.com/plans
334 appID: 'abc'
335 },
336 variants: {
337 normalDay: {
338 url: 'http://{s}.maptile.lbs.ovi.com/maptiler/v2/maptile/newest/normal.day/{z}/{x}/{y}/256/png8?token={devID}&app_id={appID}'
339 },
340 normalGreyDay: {
341 url: 'http://{s}.maptile.lbs.ovi.com/maptiler/v2/maptile/newest/normal.day.grey/{z}/{x}/{y}/256/png8?token={devID}&app_id={appID}'
342 },
343 satelliteNoLabelsDay: {
344 url: 'http://{s}.maptile.lbs.ovi.com/maptiler/v2/maptile/newest/satellite.day/{z}/{x}/{y}/256/png8?token={devID}&app_id={appID}'
345 },
346 satelliteYesLabelsDay: {
347 url: 'http://{s}.maptile.lbs.ovi.com/maptiler/v2/maptile/newest/hybrid.day/{z}/{x}/{y}/256/png8?token={devID}&app_id={appID}'
348 },
349 terrainDay: {
350 url: 'http://{s}.maptile.lbs.ovi.com/maptiler/v2/maptile/newest/terrain.day/{z}/{x}/{y}/256/png8?token={devID}&app_id={appID}'
351 }
352 }
353 },
354 Acetate: {
355 url: 'http://a{s}.acetate.geoiq.com/tiles/acetate-hillshading/{z}/{x}/{y}.png',
356 options: {
357 attribution:
358 '&copy;2012 Esri & Stamen, Data from OSM and Natural Earth',
359 subdomains: '0123',
360 minZoom: 2,
361 maxZoom: 18
362 },
363 variants: {
364 all: {},
365 basemap: {
366 url: 'http://a{s}.acetate.geoiq.com/tiles/acetate-base/{z}/{x}/{y}.png'
367 },
368 terrain: {
369 url: 'http://a{s}.acetate.geoiq.com/tiles/terrain/{z}/{x}/{y}.png'
370 },
371 foreground: {
372 url: 'http://a{s}.acetate.geoiq.com/tiles/acetate-fg/{z}/{x}/{y}.png'
373 },
374 roads: {
375 url: 'http://a{s}.acetate.geoiq.com/tiles/acetate-roads/{z}/{x}/{y}.png'
376 },
377 labels: {
378 url: 'http://a{s}.acetate.geoiq.com/tiles/acetate-labels/{z}/{x}/{y}.png'
379 },
380 hillshading: {
381 url: 'http://a{s}.acetate.geoiq.com/tiles/hillshading/{z}/{x}/{y}.png'
382 }
383 }
384 },
385 CloudMade: {
386 url:'http://{s}.tile.cloudmade.com/{apiKey}/{styleID}/256/{z}/{x}/{y}.png',
387 options: {
388 attribution:
389 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
390 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
391 'Map tile imagery © <a href="http://cloudmade.com">CloudMade</a>',
392 minZoom: 0,
393 apiKey: 'abc', // Sign up for an API key at http://cloudmade.com/ - first 500,000 tile requests are free
394 styleID: '1'
395 },
396 variants: {
397 standardResolution: {
398 maxZoom:18
399 },
400 highResolution: {
401 url:'http://{s}.tile.cloudmade.com/{apiKey}/{styleID}@2x/256/{z}/{x}/{y}.png',
402 maxZoom:19
403 }
404 }
405 }
406 };
407
408 L.tileLayer.provider = function (provider, options) {
409 return new L.TileLayer.Provider(provider, options);
410 };
411
412 L.Control.Layers.Provided = L.Control.Layers.extend({
413 initialize: function (base, overlay, options) {
414 var first;
415
416 var labelFormatter = function (label) {
417 return label.replace(/\./g, ': ').replace(/([a-z])([A-Z])/g, '$1 $2');
418 };
419
420 if (base.length) {
421 (function () {
422 var out = {},
423 len = base.length,
424 i = 0;
425
426 while (i < len) {
427 if (typeof base[i] === 'string') {
428 if (i === 0) {
429 first = L.tileLayer.provider(base[0]);
430 out[labelFormatter(base[i])] = first;
431 } else {
432 out[labelFormatter(base[i])] = L.tileLayer.provider(base[i]);
433 }
434 }
435 i++;
436 }
437 base = out;
438 }());
439 this._first = first;
440 }
441
442 if (overlay && overlay.length) {
443 (function () {
444 var out = {},
445 len = overlay.length,
446 i = 0;
447
448 while (i < len) {
449 if (typeof base[i] === 'string') {
450 out[labelFormatter(overlay[i])] = L.tileLayer.provider(overlay[i]);
451 }
452 i++;
453 }
454 overlay = out;
455 }());
456 }
457 L.Control.Layers.prototype.initialize.call(this, base, overlay, options);
458 },
459 onAdd: function (map) {
460 this._first.addTo(map);
461 return L.Control.Layers.prototype.onAdd.call(this, map);
462 }
463 });
464
465 L.control.layers.provided = function (baseLayers, overlays, options) {
466 return new L.Control.Layers.Provided(baseLayers, overlays, options);
467 };
468}());

main.js

7 maxZoom: 18,7 maxZoom: 18,
8 attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ©<a href="http://cloudmade.com">CloudMade</a>'8 attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ©<a href="http://cloudmade.com">CloudMade</a>'
9 });9 });
10 var sat = L.tileLayer.provider("MapQuestOpen.Aerial");
10 var overlays = {11 var overlays = {
11 "Places" : markers,12 "Places" : markers,
12 "Photos": photos13 "Photos": photos
13 };14 };
14 var baseLayer = {15 var baseLayer = {
15 "Base Map": tileLayer
16 };
17 map = L.map('map', {layers:[tileLayer, markers, photos]}).setView([14.31336, 76.64973], 13);
18 map.minZoom = 13;
16 "Base Map": tileLayer,
17 "Satellite": sat
18 };
19 map = L.map('map', {layers:[tileLayer, markers, photos, sat]}).setView([14.31336, 76.64973], 13);
20 map.minZoom = 13;
19 map.maxZoom = 13;21 map.maxZoom = 13;
20 map.zoomControl = false;22 map.zoomControl = false;
21 L.control.scale({position: 'bottomleft'}).addTo(map);23 L.control.scale({position: 'bottomleft'}).addTo(map);