scripts/mapParser.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>