181 lines
6.3 KiB
HTML
181 lines
6.3 KiB
HTML
<!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 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>
|
|
.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 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.
|
|
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 = decodeURIComponent(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>
|