Update to its current state.

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>