first commit
This commit is contained in:
180
libraries/ckeditor/plugins/leaflet/scripts/mapParser.html
Normal file
180
libraries/ckeditor/plugins/leaflet/scripts/mapParser.html
Normal file
@@ -0,0 +1,180 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user