1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="leaflet-providers/leaflet-providers.js"></script>
<script src="Leaflet-MiniMap/src/Control.MiniMap.js"></script>
<link rel="stylesheet" href="Leaflet-MiniMap/src/Control.MiniMap.css" />
<script type="text/javascript" charset="utf-8">
// Function to parse the URL search query parameters.
// It will give A, B, C given http://www.somelink.com?lat=A&lon=B&zoom=C
// See "http://javascriptproductivity.blogspot.com/" +
// "2013/02/get-url-variables-with-javascript.html".
function getParams(){
// Make an object variable to hold
// the parsed URL parameters' keys and vlaues.
var params = {};
// Remove the '?' character after the base url.
// x.substring(i) will return the substring of x starting at index i
// up to the end of the string.
// Drupal CMS might have a path like this (two '?' characters):
// mapParser.html?t=E3OD?lat=14.6760413&lon=121.0437003&...
// We need to handle this case also.
var lastIndex = window.location.search.lastIndexOf("?")
// Get the substring not including any '?' character.
var query_string = window.location.search.substring(lastIndex + 1);
// Explode the string using the '&' character.
var query_string_parts = query_string.split('&');
// Traverse the exploded tokens.
for(i in query_string_parts) {
// Explode the string using '=' to isolate keys and values.
key_value = query_string_parts[i].split('=');
// Insert a new key and set it to the current parsed value.
params[key_value[0]] = key_value[1];
}
// Return the parameter object contianing the keys and values.
return params;
}
</script>
<style>
</style>
</head>
<body>
<div id='map_container' style="width:95%px; height:590px;" data-zoom=""></div>
<script type="text/javascript">
// Get the DOM node to which we will append the map.
// In our setup the map container is a DIV element.
var mapDiv = document.getElementById("map_container");
// Parse the query parameters in the URL to obtain the
// LAT, LON, and ZOOM values.
queryString = getParams();
// Convert the parameters to their numeric equivalent.
// Otherwise, it will not work.
var latitude = Number(queryString["lat"]);
var longitude = Number(queryString["lon"]);
// Retrieve and adjust the map's height by 10px for better layout.
var mapHeight = Number(queryString["height"]) - 10;
mapDiv.style.height = String(mapHeight) + "px";
// Retrieve the zoom level.
var zoom = Number(queryString["zoom"]);
var tile = queryString["tile"];
var minimap = queryString["minimap"];
// Create a map in the the target DOM container.
// Set the view to a given place and zoom value.
var map = L.map('map_container').setView([latitude, longitude], zoom);
// Choose the Map Tile provider "Esri.WorldTopoMap"
var mapTileProvider = tile;
// Set the base map.
var mapTile = L.tileLayer.provider(mapTileProvider, { attribution: "Map Tile: " + mapTileProvider });
mapTile.addTo(map);
// Add a marker in the given location.
var p1 = L.marker([latitude, longitude]);
p1.addTo(map);
// Check if MiniMap needs to be shown also.
if (minimap == "on") {
// Create a new Tile Layer for the MiniMap.
// Per documentation, do not reuse the existing Tile object
// to avoid rendering issues.
var mapTile2 = L.tileLayer.provider(mapTileProvider);
var miniMap = new L.Control.MiniMap(mapTile2).addTo(map);
}
// Initialize the zoom data attribute.
mapDiv.setAttribute("data-zoom", map.getZoom());
// Add an event listener that will keep track the changes in the
// map's zoom levels and it will update the data attribute accordingly.
map.on('zoomend', function(e) {
mapDiv.setAttribute("data-zoom", map.getZoom());
});
</script>
</body>
</html>
|
