docs/index.html



<!doctype html>
<head>
   <title>View Markers/Icons on OpenLayers</title>
   <meta charset="utf-8">
   <script src="js/linkparam.js"></script>
   <link  type="text/css" href="css/font-awesome.min.css" rel="stylesheet" />
   <style type="text/css">
      body {font-family:verdana, sans-serif;}
      button {background-color:#42c5f4}
   </style>
</head>
<body  bgcolor="#f2f2f2">
   <h3>Display Markers with Geolocation and Popup with OpenLayers</h3>
   <p>This is an example consists of two files.
   <ul>
      <li>
         <tt>index.html</tt> (this file)
      </li>
      <li>
         <tt><a href="startbutton.html">startbutton.html</a></tt> uses the same marker data as index but shows just the start button.
      </li>
      <li>
         <tt><a href="startbutton.html">viewicons.html</a> (loads the icon with default icon data)</tt>
      </li>
   </ul>
   This file <tt>index.html</tt> calls <tt>viewicons.html</tt> lets the user select a geolocation and <tt>selectlocation.html</tt>
   returns the selected geolocation back to index.html if the user clicks on a the Map.
   Press submit button "Select Geolocation" and look at your browser location (<a href="https://github.com/niebert/openlayer_selectlocation/archive/master.zip" target="_blank">Download Demo</a>).
   <hr>
   <!-- next DIV element implements the main CallBack Structure -->
   <div style="margins:30px">
      <b>Call <i>viewicons.html</i> with a HTML form:</b>
      <form id="mapviewer" action="viewicons.html" method="GET">
         <!-- Callback URL: <input type="string" name="callback" value="index.html">  -->
         <button type="submit">
    	     <i class="fa fa-globe" aria-hidden="true"></i> View Icons on Map
         </button>
         <hr>
         <b>Map Center:</b><input type="string" name="mapcenter" id="mymapcenter" size="80" value="-1.81185, 52.443141">
         <b>Zoom:</b> <input type="string" name="zoom" id="myzoom" size="3" value="6">
         <hr/>
         <b>JSON Data for Icons:</b> <br/>
         <textarea rows="12"  style="width:100%;" name="jsondata" id="myjsondata">[
    {
        "geolocation": [
            -0.14467470703124907,
            51.493889053694915
        ],
        "name": "The City of London <a href=\"https://en.wikipedia.org/wiki/London\" target=\"_blank\">Link to Wikipedia</a>"
    },
    {
        "geolocation": [
            -1.81185,
            51.243141
        ],
        "name": "Wikipedia Link to <a href=\"https://en.wikipedia.org/wiki/Birmingham\" target=\"_blank\">Birmingham</a>"
    }
]
      	</textarea>
      </form>
   </div>
   <!-- The following script reads link parameters and sets the parameters if "viewicons.html" return one -->
   <script>
      function el(id) {
        return document.getElementById(id);
      };
      //---- Evaluate Link Paramaters ----
      var vLinkParam = new LinkParam();
      vLinkParam.init(document);

      // load geoloaction from LinkParameter if available
      if (vLinkParam.exists("mapcenter")) {
      	// Callback performed with LinkParameter mapcenter
        // e.g. index.html?geolocation=-12.213,65.123
      	el("mymapcenter").value = vLinkParam.getValue("mapcenter");
      };
      if (vLinkParam.exists("zoom")) {
      	// Callback performed with LinkParameter zoom
        // e.g. index.html?zoom=12
      	el("myzoom").value = vLinkParam.getValue("zoom");
      };
      if (vLinkParam.exists("jsondata")) {
      	// Callback performed with LinkParameter jsondata
        // e.g. index.html?zoom=12
      	el("myjsondata").value = vLinkParam.getValue("jsondata");
      };
   </script>
   <hr>
   <b>GitHub:</b> View <a href="https://github.com/niebert/openlayer_display_markers" target="_blank">repository on GitHub</a>
   <hr>
</body>
</html>