Update API endpoint and add new HTML file for

animated vehicle markers
LACMTA · Nov 15, 2023 · c97dcbe · c97dcbe
1 parent 2c9f66d
commit c97dcbe
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 52 deletions.
diff --git a/examples/index.js b/examples/index.js
@@ -125,7 +125,7 @@ let all_rail_vehicles = L.layerGroup().addTo(map);
 // to work on
 const refreshTime = 5000; // in milliseconds
 const interval = setInterval(function() {
-    refreshMapData('https://api.metro.net/LACMTA_Rail/vehicle_positions/all?geojson=true')
+    refreshMapData('https://api.metro.net/LACMTA_Rail/vehicle_positions?format=geojson')
   }, refreshTime);
 
 // onload:
@@ -257,15 +257,15 @@ function createRailFeatureGroups(map) {
 
 // realtime1 = createRealtimeLayer('https://api.metro.net/LACMTA_Rail/vehicle_positions/all?geojson=true').addTo(map);
 
-let metro_basemap = L.tileLayer('https://tiles.arcgis.com/tiles/TNoJFjk1LsD45Juj/arcgis/rest/services/Hybrid_Raster_tile_Map/MapServer?f=html&cacheKey=82b4049fd59cbc4c/tile/{z}/{y}/{x}', {
-    attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
-    maxZoom: 16
-}).addTo(map);
-
-// let Esri_WorldGrayCanvas = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
+// let metro_basemap = L.tileLayer('https://tiles.arcgis.com/tiles/TNoJFjk1LsD45Juj/arcgis/rest/services/Hybrid_Raster_tile_Map/MapServer?f=html&cacheKey=82b4049fd59cbc4c/tile/{z}/{y}/{x}', {
 //     attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
 //     maxZoom: 16
 // }).addTo(map);
+
+let Esri_WorldGrayCanvas = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
+    attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
+    maxZoom: 16
+}).addTo(map);
 map.locate({setView: true, maxZoom: 16});
 
 // let wmsOptions = {

diff --git a/index.html b/index.html
@@ -22,16 +22,39 @@
             padding: 0;
 
         }
-
+        .current-time {
+          position: fixed;
+          top: 10px;
+          right: 10px;
+          background-color: white;
+          padding: 10px;
+          border: 1px solid black;
+        }
     </style>
 </head>
 <body>
 <div id="map"></div>
 <script>
+// config options
   const ESRI_KEY =  "AAPKccc2cf38fecc47649e91529acf524abflSSkRTjWwH0AYmZi8jaRo-wdpcTf6z67CLCkOjVYlw3pZyUIF_Y4KGBndq35Y02z";
   const MAPTILER_KEY = "KydZlIiVFdYDFFfQ4QYq"
   const basemapEnum = "65aff2873118478482ec3dec199e9058";
 
+
+// Get the current time
+const now = new Date();
+
+// Create a div element
+const updateTimeDiv = document.createElement('div');
+
+// Set the div's text content to the current time
+updateTimeDiv.textContent = `Updated at ${now.toLocaleTimeString()}`;
+updateTimeDiv.classList.add('current-time');
+// Add the div to the document body
+document.body.appendChild(updateTimeDiv);
+
+// map setup
+
   let map = new maplibregl.Map({
     container: 'map',
     center: [-118.25133692966446, 34.05295151499077], 
@@ -44,9 +67,8 @@
     style: `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/items/${basemapEnum}?token=${ESRI_KEY}`,
   });
 
-//  style: 'https://tiles.arcgis.com/tiles/TNoJFjk1LsD45Juj/arcgis/rest/services/Hybrid_Vector_tile_Map/VectorTileServer/resources/styles/root.json' 
-
-  let url = 'https://api.metro.net/LACMTA_Rail/vehicle_positions/all?geojson=true'
+
+
   // The 'building' layer in the streets vector source contains building-height
   // data from OpenStreetMap.
   map.on('load', () => {
@@ -69,53 +91,72 @@
       type: 'raster',
       source: 'imagery-source'
   })
+  let apiUrl = 'https://api.metro.net/LACMTA_Rail/vehicle_positions?format=geojson'
 
       map.addSource('vehicles', {
         type: 'geojson',
-        data: url,
+        data: apiUrl,
     });
       window.setInterval(function () {
-          map.getSource('vehicles').setData(url);
-
-      }, 5000);
-
-    let vehicle_positions = fetch(url)
-    .then(response => response.json())
-    .then(data => {
-
-
-    // add markers to map
-    data.features.forEach((marker) => {
-      // create a DOM element for the marker
-      const el = document.createElement('div');
-      el.className = 'marker';
-      el.style.backgroundImage =
-          `url(rail.svg)`;
-      el.style.backgroundRepeat = 'no-repeat';
-      el.style.backgroundSize = 'cover';
-      el.style.backgroundPosition = 'center';
-      el.style.backgroundColor = 'white';
-      el.style.borderRadius = '50%';
-      el.style.cursor = 'pointer';
-      el.style.width = `24px`;
-      el.style.height = `24px`;
-
-      el.addEventListener('click', () => {
-        new maplibregl.Popup()
-        .setHTML(`<h3>${marker.properties.vehicle_id}</h3>`)
-
-      });
-
-
-      // add marker to map
-      new maplibregl.Marker({element: el})
-          .setLngLat(marker.geometry.coordinates)
-          .addTo(map);
+
+          console.log(`trying to update`)
+          fetch(apiUrl)
+              .then(response => response.json())
+
+              .then(data => {
+                console.log(data)
+
+                if (data.length > 0) {
+                  updateTimeDiv.textContent = `Updated at ${now.toLocaleTimeString()}`;
+                }
+                  const features = data.features.map(vehicle => {
+                      const el = document.createElement('div');
+                      el.className = 'marker';
+                      el.style.backgroundImage =
+                          `url(rail.svg)`;
+                      el.style.backgroundRepeat = 'no-repeat';
+                      el.style.backgroundSize = 'cover';
+                      el.style.backgroundPosition = 'center';
+                      el.style.backgroundColor = 'white';
+                      el.style.borderRadius = '50%';
+                      el.style.cursor = 'pointer';
+                      el.style.width = `24px`;
+                      el.style.height = `24px`;
+
+                      el.addEventListener('click', () => {
+                        new maplibregl.Popup()
+                        .setHTML(`<h3>${vehicle.properties.vehicle_id}</h3>`)
+
+                      });
+
+
+                      // add marker to map
+                      new maplibregl.Marker({element: el})
+                          .setLngLat(vehicle.geometry.coordinates)
+                          .addTo(map);
+                      const feature = {
+                          type: 'Feature',
+                          geometry: {
+                              type: 'Point',
+                              coordinates: [vehicle.geometry[0], vehicle.geometry[1]]
+                          },
+                          properties: {
+                              Heading: vehicle.properties.bearing * 45
+                          }
+                      };
+                      return feature;
+                  });
+                  map.getSource('vehicles').setData({
+                      type: 'FeatureCollection',
+                      features: features
+                  });
+
+                  // Update the Updated at                  const now = new Date();
+                  updateTimeDiv.textContent = `Updated at ${now.toLocaleTimeString()}`;
+              });
+
+      }, 9000);
 
-  });
-      return data
-    })
-    .catch(err => console.log(err))
 
     map.addSource('openmaptiles', {
       url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${MAPTILER_KEY}`,
@@ -129,6 +170,8 @@
         'source': 'vehicles',
         'layout': {
             'icon-image': 'rail',
+            'icon-allow-overlap': true,
+            'icon-ignore-placement': true
         }
     });
       map.addLayer(
@@ -164,6 +207,8 @@
       );
 
     });
+
+
 </script>
 </body>
 </html>