From 6ae9200c063af652b34805ddf80e9b993d128a28 Mon Sep 17 00:00:00 2001
From: Sacha Ligthert <sacha@ligthert.net>
Date: Thu, 18 Jan 2024 23:06:03 +0000
Subject: [PATCH] Update to its current state.

---
 favicon.ico | Bin 0 -> 1150 bytes
 index.html  |  88 +++++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 77 insertions(+), 11 deletions(-)
 create mode 100644 favicon.ico

diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..f9ff838618a4f6fe058731289079892d8c637783
GIT binary patch
literal 1150
zcmZQzU<5(|0R|wcz>vYhz#zuJz@P!dKp~(AL>x#lFaYI70cHr?e|Y_WZf5R(Oc~-u
z_8r~zKRGeszmInaia9LIjIXpjV*XE`y8=ZV*<=M3#U&s<6C?Bg{JgyX-tIpCyV{%n
zZ{D`{|C!T!{y%+o|34Qu=l`<ulK+wtN?6T#_Uz&RgGYA#Z|$7)fAON}|LZEt{x>()
z{J(Sm+W#esX8b>VVAKDL7moeEeDTEp^XHEIzjEpL|B}K&uvzEN9s0j#&xZe3uO5e+
z?c``Lw0iZT|60Zl|EElw02fDgH$Jwstj_=XnyUY^=Fa{<Yv%O-%*@RH?>xBm|MvY`
z|APY}f8x`NEVpR(Bow<V%1Z)}<q5H~vQts?6H-6Y<o^Rh2N}-?@{h|iFf3qaU^oB_
Uj6Qn?hCj?eHT6&olt)$%012_1jsO4v

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 567a358..c16098a 100644
--- a/index.html
+++ b/index.html
@@ -28,19 +28,74 @@
     <div id="map"></div>
     <pre id="info"></pre>
     <script>
+      // const sleep = ms => new Promise(r => setTimeout(r, ms));
+      var api_key = "rYNCGwdgATyHCjyDil7t";
+      var serverURL = "http://homeplate.close-air.support:8888/";
       var map = new maplibregl.Map({
-      container: 'map',
-      style: 'https://api.maptiler.com/maps/topo-v2/style.json?key=<replace-me>',
-      center: [42, 42],
-      zoom: 7
+        center: [42, 42],
+        container: "map",
+        style: "https://api.maptiler.com/maps/topo-v2/style.json?key="+api_key,
+        zoom: 7
       });
-       
-      map.on('load', function () {
-      
-      
-      });
-      
-      
+
+      map.on("load", () => { 
+
+        myData = fetchData(serverURL);
+        for (chip in myData)
+        {
+          //latest.push(myData[chip].UnitName);
+          let UnitImage = myData[chip].UnitName+"-img";
+          let UnitSource = myData[chip].UnitName+"-src";
+          let UnitPoint = myData[chip].UnitName+"-point";
+          let UnitLong = myData[chip].Longitude;
+          let UnitLati = myData[chip].Latitude;
+          let UnitCoalition = myData[chip].Coalition;
+
+          map.loadImage(
+            "/symbols/"+UnitCoalition+"/plane.png",
+            (error, image) => {
+              if (error) throw error;
+              map.addImage(UnitImage, image);
+              map.addSource(UnitSource, { "type": 'geojson', 'data': { 'type': 'FeatureCollection', 'features': [{ 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [UnitLong, UnitLati] } }] } } );
+              map.addLayer({
+                'id': UnitPoint,
+                'type': 'symbol',
+                'source': UnitSource,
+                'layout': {
+                  'icon-image': UnitImage,
+                  'icon-size': 0.25
+                }
+              }); // map.addLayer()
+            }
+          ); // map.loadImage()
+
+        };// End for() loop
+
+        // Deletion
+        // await sleep(10000);
+        // for (chip in myData)
+        // {
+        //   //latest.push(myData[chip].UnitName);
+        //   let UnitImage = myData[chip].UnitName+"-img";
+        //   let UnitSource = myData[chip].UnitName+"-src";
+        //   let UnitPoint = myData[chip].UnitName+"-point";
+
+        //   if (map.hasImage(UnitImage)) map.removeImage(UnitImage);
+        //   if (map.getSource(UnitSource)) map.removeSource(UnitSource);
+        //   if (map.getLayer(UnitPoint)) map.removeLayer(UnitPoint);
+        // };
+
+      }); // End map.on()
+
+
+    // function wait(ms){
+    //   var start = new Date().getTime();
+    //   var end = start;
+    //   while(end < start + ms) {
+    //     end = new Date().getTime();
+    //   };
+    // };
+
       function MGRSString (Lat, Long) { 
         //if (Lat < -80) return 'Too far South' ; if (Lat > 84) return 'Too far North' ;
       
@@ -81,6 +136,17 @@
         var coordinate = e.lngLat.wrap();
         document.getElementById('info').innerHTML = MGRSString(coordinate.lat, coordinate.lng);
       });
+
+      function fetchData(url)
+      {
+          var xhr = new XMLHttpRequest();    
+          var retval
+          
+          xhr.open("GET", url, false);
+          xhr.send();
+          
+          return JSON.parse(xhr.responseText)
+      }
       
     </script>
   </body>