diff options
Diffstat (limited to 'plugins/leaflet/scripts/mapParser.html')
| -rwxr-xr-x | plugins/leaflet/scripts/mapParser.html | 185 |
1 files changed, 185 insertions, 0 deletions
diff --git a/plugins/leaflet/scripts/mapParser.html b/plugins/leaflet/scripts/mapParser.html new file mode 100755 index 0000000..f129503 --- /dev/null +++ b/plugins/leaflet/scripts/mapParser.html @@ -0,0 +1,185 @@ +<!DOCTYPE html> +<html> + +<head> + <script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script> + <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.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 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> + .leaflet-popup-content { + text-align: center; + } + + body { + padding: 0; + margin: 0; + } + + html, + body, + #map_container { + height: 100%; + width: 100%; + } + </style> +</head> + +<body> + <div id='map_container' data-lat="" data-lon="" data-zoom=""></div> + <script> + // 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. + var queryString = getParams(); + + // Fetch the most important attributes. + var latitude = queryString["lat"]; + var longitude = queryString["lon"]; + var zoom = queryString["zoom"]; + + // Initialize the mapDiv data attributes. + mapDiv.setAttribute("data-lat", latitude); + mapDiv.setAttribute("data-lon", longitude); + mapDiv.setAttribute("data-zoom", zoom); + + // Convert the parameters to their numeric equivalent. + // Otherwise, initializing the Leaflet map object will not work. + latitude = Number(latitude); + longitude = Number(longitude); + zoom = Number(zoom); + + var responsive = queryString["responsive"]; + + // If responsive map option is enabled, set the map height to 100%. + if (responsive == "on") { + mapDiv.style.height = "100%"; + } + + else { + // Retrieve the map's height. + var mapHeight = Number(queryString["height"]); + mapDiv.style.height = String(mapHeight) + "px"; + } + + // Retrive the popup text that will be used by the marker. + var popUpText = queryString["text"]; + + // Retrieve the Base Map's Tile to be used. + var tile = queryString["tile"]; + + // Retrieve the information about the inclusion of Overview map. + 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 e.g. "Esri.WorldTopoMap" + var mapTileProvider = tile; + + var restrictedTiles = ['MapQuestOpen.Aerial', 'MapQuestOpen.OSM']; + + // Redirect MapQuest tiles to OpenStreetMap tiles. + if (restrictedTiles.indexOf(mapTileProvider) != -1) { + mapTileProvider = 'OpenStreetMap.Mapnik'; + } + + // Set the base map. + var mapTile = L.tileLayer.provider(mapTileProvider, {attribution: "Map Tile: " + mapTileProvider}); + mapTile.addTo(map); + + // Add a marker in the given location. + // Make it draggble so that user could refine the position visually. + var p1 = L.marker([latitude, longitude], { + draggable: true, + }); + p1.addTo(map); + + // Add an event listener that will keep track the changes in the + // marker location and will update the data attribute accordingly. + p1.on('dragend', function (e) { + var newLocation = this.getLatLng(); + var lat = newLocation.lat; + var lon = newLocation.lng; + + // Pan the map to its new center which is the last position + // of the dragged marker. + map.panTo([lat, lon]); + + mapDiv.setAttribute("data-lat", String(lat)); + mapDiv.setAttribute("data-lon", String(lon)); + }); + + // If the pop-up text is specified. + if (popUpText != '') { + // Replace the %20 HTML Entity by an empty space. + // %20 is the result of texts being piped via URL. + popUpText = popUpText.replace(/%20/g, ' '); + + // Bind the text to the current marker. + p1.bindPopup(popUpText); + } + + // 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); + } + + // 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>
\ No newline at end of file |