npm - @vidro/map-handler - Versions diffs - 1.0.4 → 1.0.8 - Mend

@vidro/map-handler 1.0.4 → 1.0.8

Files changed (185) hide show

package/examples/multipleIframes/index.js ADDED Viewed

@@ -0,0 +1,82 @@
+var communicatorIframe1 = new VidroMaps.Communicator({'sessionToken':sessionToken,'id':'map-frame-one'});
+var communicatorIframe2 = new VidroMaps.Communicator({'sessionToken':sessionToken,'id':'map-frame-two'});
+var sessionToken = document.querySelector("#sessionToken");
+var mapContainer = document.querySelector("#mapContainer");
+var code1 = document.querySelector("#code1");
+var code2 = document.querySelector("#code2");
+var iframesContainer1 = document.querySelector("#iframes-container1");
+var iframesContainer2 = document.querySelector("#iframes-container2");
+var iframe = document.querySelector("#map-frame");
+var host = document.querySelector("#overrideHost");
+var btLoadIframe = document.querySelector("#btLoadIframe");
+var btZoomIn1 = document.querySelector("#btZoomIn1");
+var btZoomIn2 = document.querySelector("#btZoomIn2");
+var btZoomOut1 = document.querySelector("#btZoomOut1");
+var btZoomOut2 = document.querySelector("#btZoomOut2");
+var btAddPoint1 = document.querySelector("#btAddPoint1");
+var btAddPoint2 = document.querySelector("#btAddPoint2");
+communicatorIframe1.on("loaded", function(data){
+ 	console.log("iframe 1 loaded",data);
+});
+communicatorIframe2.on("loaded", function(data){
+ 	console.log("iframe 2 loaded",data);
+});
+communicatorIframe2.on("coordinates", function(data){
+ 	console.info("map2 coordinates",data);
+ 	alert("map2 click")
+});
+communicatorIframe1.on("coordinates", function(data){
+ 	console.info("map1 coordinates",data);
+ 	alert("map1 click")
+});
+communicatorIframe1.on("geomAdded", function(data){
+ 	console.log("geomAdded to map1",data);
+});
+communicatorIframe2.on("geomAdded", function(data){
+ 	console.log("geomAdded to map2",data);
+});
+//************** MAP EXAMPLE
+if(btLoadIframe){
+	btLoadIframe.addEventListener("click", function (evt) {
+		if(code1.value!=""){
+			console.log('btLoadIframe',code1.value,typeof code1.value);
+			iframesContainer1.innerHTML = code1.value;
+		}
+		if(code2.value!=""){
+			console.log('btLoadIframe',code2.value,typeof code2.value);
+			iframesContainer2.innerHTML = code2.value;
+		}
+	});
+}
+btZoomIn1.addEventListener("click", function(){
+  return communicatorIframe1.ZoomIn();
+});
+btZoomIn2.addEventListener("click", function(){
+  return communicatorIframe2.ZoomIn();
+});
+btZoomOut1.addEventListener("click", function(){
+  communicatorIframe1.ZoomOut();
+});
+btZoomOut2.addEventListener("click", function(){
+  communicatorIframe2.ZoomOut();
+});
+if(btAddPoint1){
+	btAddPoint1.addEventListener("click", function(){
+	  communicatorIframe1.AddGeom('Point');
+	});
+}
+if(btAddPoint2){
+	btAddPoint2.addEventListener("click", function(){
+	  communicatorIframe2.AddGeom('Point');
+	});
+}

package/examples/multipleIframes/index.php ADDED Viewed

@@ -0,0 +1,52 @@
+<html>
+  <head>
+    <title>🛠️ MAP TESTER - Multiple Iframes</title>
+    <link rel="stylesheet" href="../tester.css"></link>
+    <link rel="icon" type="image/png" href="https://www.vidrosoftware.com/favicon/favicon-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="https://www.vidrosoftware.com/favicon/favicon-16x16.png" sizes="16x16" />
+    <style>
+    .iframes-container{
+      width: 320px;
+      height: 240;
+    }
+    </style>
+  </head>
+  <body>
+    <div class="form" id="userData">
+      <h1>Vidromap</h1>
+      <div id="sessionToken"></div>
+      <div>
+        Paste your first code here (Map 1):<br> <textarea name="code1" id="code1" rows="10" cols="100" placeholder=""><iframe id="map-frame-one" name="map-frame-one" width="100%" height="240" src="https://component.vidrosoftware.com?sessionToken=YOUR_SESSION_TOKEN&domId=map-frame-one"></iframe></textarea>
+        <br>
+        Paste your second code here (Map 2):<br> <textarea name="code2" id="code2" rows="10" cols="100" placeholder=""><iframe id="map-frame-two" name="map-frame-two" width="100%" height="240" src="https://component.vidrosoftware.com?sessionToken=YOUR_SESSION_TOKEN&domId=map-frame-two"></iframe></textarea>
+      </div>
+        <div>
+      </div>
+    </div>
+    <div>
+       <button id="btLoadIframe">Load Maps</button> -
+      </div>
+    <div id="Error_container"></div>
+    <div id="mapContainer">
+      <div id="iframes-container1" class="iframes-container"></div>
+      <h2>Map 1</h2>
+      <button id="btZoomIn1">Zoom In</button>
+      <button id="btZoomOut1">Zoom Out</button>
+      <button id="btAddPoint1">Add point map 1</button>
+      <div id="iframes-container2" class="iframes-container"></div>
+      <h2>Map 2</h2>
+      <button id="btZoomIn2">Zoom In</button>
+      <button id="btZoomOut2">Zoom Out</button>
+      <button id="btAddPoint2">Add point map 2</button>
+    </div>
+    <script src="https://unpkg.com/@vidro/map-handler@1.0.7/dist/map-handler.js"></script>
+    <script src="./index.js"></script>
+  </body>
+</html>