Linkparameter added

niebert · Sep 30, 2017 · eddb5dc · eddb5dc
1 parent 22c1453
commit eddb5dc
Show file tree

Hide file tree

Showing 3 changed files with 698 additions and 6 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,77 @@
+<!doctype html>
+  <head>
+    <title>Select Location - Callback HTML</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>
+    <h2>Display Markers with Geolocation and Popup with OpenLayers and Callback URL</h2>
+  	<p>This is an example consists of two files.
+  	<ul>
+  		<li>
+  			<tt>index.html</tt> (this file)
+  		</li>
+  		<li>
+  			<tt>viewicons.html</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>).
+
+  	</p>
+  	<hr>
+  	<!-- next DIV element implements the main CallBack Structure -->
+  	<div style="margins:30px">
+   		<b>Call <tt>selectlocation.html</tt> 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>
+		</form>
+    	<hr>
+      <b>JSON Data for Icons:</b> <br/>
+      <textarea rows="25" cols="120" id="myjsondata">
+      </textarea>
+      <input type="string" id="mymapcenter" size="80" value="">
+      <b>Zoom:</b> <input type="string" id="myzoom" size="4">
+    </div>
+    <!-- The following script reads link parameters and sets the geolocation if "selectgeolocation.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("geolocation")) {
+      	// Callback performed with LinkParameter geolocation
+        // e.g. index.html?geolocation=-12.213,65.123
+      	el("mymapcenter").value = vLinkParam.getValue("mapcenter");
+      };
+      if (vLinkParam.exists("zoom")) {
+      	// Callback performed with LinkParameter geolocation
+        // e.g. index.html?zoom=12 
+      	el("myzoom").value = vLinkParam.getValue("zoom");
+      };
+      if (vLinkParam.exists("iconjson")) {
+      	// Callback performed with LinkParameter geolocation
+        // 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>
diff --git a/docs/js/iconprocessing.js b/docs/js/iconprocessing.js
@@ -70,6 +70,8 @@
         offset: [0, -50]
       });
       map.addOverlay(popup);
+
+      var vFeature;
 
       // display popup on click
       map.on('click', function(evt) {
@@ -78,22 +80,29 @@
               return feature;
             });
         if (feature) {
+          vFeature = feature;
           $(element).popover('destroy');
           var coordinates = feature.getGeometry().getCoordinates();
           popup.setPosition(coordinates);
-          $(element).popover({
-            'placement': 'top',
-            'html': true,
-            'content': feature.get('name')
-          });
-          $(element).popover('show');
+          //setPopupContent(feature);
+          setTimeout("setPopupContent(vFeature)",200);
           console.log("Click: "+feature.get('name'));
           //alert(document.getElementById("popup").innerHTML)
         } else {
           $(element).popover('destroy');
  	      popup.setPosition(undefined);
         }
       });
+
+	function setPopupContent(feature) {
+		$(element).popover({
+            'placement': 'top',
+            'html': true,
+            'content': feature.get('name')
+          });
+          //alert("Test1");
+          $(element).popover('show');          
+	}
 
       // change mouse cursor when over marker
       map.on('pointermove', function(e) {