Merge pull request #113 from LACMTA/dev

Style updates
LACMTA · Apr 2, 2024 · 34bb2f3 · 34bb2f3
2 parents 13656f9 + 696bcad
commit 34bb2f3
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 50 deletions.
diff --git a/index.html b/index.html
@@ -88,13 +88,18 @@
                 </div>
 
                 <div id="legend-share">
-					<a href="https://forms.office.com/g/nMMFuK5QYe" target="_blank"><img src="lightbulb.svg" alt="Lightbulb" style="height: 24px; width: 24px;">Share your thoughts!</a>					<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
-                        <path
-                            d="M9 7V10C9 10.2652 8.89464 10.5196 8.70711 10.7071C8.51957 10.8946 8.26522 11 8 11H2.5C2.23478 11 1.98043 10.8946 1.79289 10.7071C1.60536 10.5196 1.5 10.2652 1.5 10V4.5C1.5 4.23478 1.60536 3.98043 1.79289 3.79289C1.98043 3.60536 2.23478 3.5 2.5 3.5H5.5"
-                            stroke="black" stroke-linecap="round" stroke-linejoin="round" />
-                        <path d="M7.5 2H10.5V5" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
-                        <path d="M5 7.5L10.5 2" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
-                    </svg>
+					<a href="https://forms.office.com/g/nMMFuK5QYe" target="_blank">
+                        <img src="lightbulb.svg" alt="Lightbulb icon" id="lightbulb">
+                        Share your thoughts!
+
+                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 12 13" fill="none">
+                            <path
+                                d="M9 7V10C9 10.2652 8.89464 10.5196 8.70711 10.7071C8.51957 10.8946 8.26522 11 8 11H2.5C2.23478 11 1.98043 10.8946 1.79289 10.7071C1.60536 10.5196 1.5 10.2652 1.5 10V4.5C1.5 4.23478 1.60536 3.98043 1.79289 3.79289C1.98043 3.60536 2.23478 3.5 2.5 3.5H5.5"
+                                stroke="black" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M7.5 2H10.5V5" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M5 7.5L10.5 2" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                    </a>
                 </div>
             </div>
         </div>

diff --git a/styles/index-style.css b/styles/index-style.css
@@ -54,7 +54,12 @@ body {
 #legend-container {
     position: relative;
     width: 198px;
-    bottom: 26px;
+    bottom: 40px;
+    /* In mobile view, attribution control wraps to 2 lines.
+     * However, with the attribution control closed by default,
+     * we don't need to allocate the extra space.
+     */
+    /* bottom: 60px; */
     margin: 0px auto;
     background-color: #fff;
     border-radius: 8px;
@@ -148,10 +153,20 @@ body {
     margin-top: 12px;
 }
 
+#legend-share #lightbulb {
+    width: 12px;
+    height: 12px;
+}
+
 #legend-share a {
     text-decoration: none;
     font-size: 10px;
+    line-height: 10px;
     color: #000;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 2px;
 }
 
 #legend-share a:hover, #legend-share a:active {
@@ -180,6 +195,7 @@ body {
         margin: 0;
         position: fixed;
         right: 16px;
+        bottom: 40px;
     }
 }
 

diff --git a/websocket.js b/websocket.js
@@ -94,52 +94,53 @@ map.on('load', () => {
         }
     }
     new mapboxglEsriSources.TiledMapService('imagery-source', map, {
-    url: 'https://tiles.arcgis.com/tiles/TNoJFjk1LsD45Juj/arcgis/rest/services/Map_RGB_Vector_Offset_RC5/MapServer'
-})
-
-map.addLayer({
-    id: 'imagery-layer',
-    type: 'raster',
-    source: 'imagery-source'
-})
-
-let apiUrl = `https://api.metro.net/LACMTA_Rail/vehicle_positions?format=geojson&nocache=${new Date().getTime()}`;
-
-// Declare and initialize the popups object
-let popups = {};
-let brtUrl = 'https://api.metro.net/LACMTA/vehicle_positions/route_code/901%2C910?format=geojson'
-
-// Extract the fetch logic into a separate function
-
-function handleError(error) {
-    if (error instanceof TypeError) {
-        document.getElementById('loading').innerHTML = "We're experiencing technical difficulties with our data. We're attempting to reload the data. Please wait<span class='dot1'>.</span><span class='dot2'>.</span><span class='dot3'>.</span>";
-        console.error('TypeError caught: ', error);
-        // Retry loading data
-        fetchData();
-    } else if (error instanceof SyntaxError) {
-        document.getElementById('loading').innerHTML = "We're currently facing some technical issues. Our team is working on it. Please try again later.";
-    } else if (error instanceof ReferenceError) {
-        document.getElementById('loading').innerHTML = "We're unable to find some necessary information. Please try again later.";
-    } else {
-        document.getElementById('loading').innerHTML = `We're experiencing unexpected issues: ${error.message}. Our team is looking into it. Please try again later.`;
+        url: 'https://tiles.arcgis.com/tiles/TNoJFjk1LsD45Juj/arcgis/rest/services/Map_RGB_Vector_Offset_RC5/MapServer'
+    });
+
+    // Toggle attribution control to hide it by default
+    document.getElementsByClassName('maplibregl-ctrl-attrib-button')[0].click();
+
+    map.addLayer({
+        id: 'imagery-layer',
+        type: 'raster',
+        source: 'imagery-source'
+    })
+
+    let apiUrl = `https://api.metro.net/LACMTA_Rail/vehicle_positions?format=geojson&nocache=${new Date().getTime()}`;
+
+    // Declare and initialize the popups object
+    let popups = {};
+    let brtUrl = 'https://api.metro.net/LACMTA/vehicle_positions/route_code/901%2C910?format=geojson'
+
+    // Extract the fetch logic into a separate function
+
+    function handleError(error) {
+        if (error instanceof TypeError) {
+            document.getElementById('loading').innerHTML = "We're experiencing technical difficulties with our data. We're attempting to reload the data. Please wait<span class='dot1'>.</span><span class='dot2'>.</span><span class='dot3'>.</span>";
+            console.error('TypeError caught: ', error);
+            // Retry loading data
+            fetchData();
+        } else if (error instanceof SyntaxError) {
+            document.getElementById('loading').innerHTML = "We're currently facing some technical issues. Our team is working on it. Please try again later.";
+        } else if (error instanceof ReferenceError) {
+            document.getElementById('loading').innerHTML = "We're unable to find some necessary information. Please try again later.";
+        } else {
+            document.getElementById('loading').innerHTML = `We're experiencing unexpected issues: ${error.message}. Our team is looking into it. Please try again later.`;
+        }
     }
-}
-
-// Define a function to hide the loading div
-function hideLoadingDiv() {
-    document.getElementById('loading').style.display = 'none';
-}
 
-const updateTimeDivDom = document.getElementById('update-time');
-// Add an event listener to the update time div
-
-map.addSource('openmaptiles', {
-    url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${MAPTILER_KEY}`,
-    type: 'vector',
-});
+    // Define a function to hide the loading div
+    function hideLoadingDiv() {
+        document.getElementById('loading').style.display = 'none';
+    }
 
+    const updateTimeDivDom = document.getElementById('update-time');
+    // Add an event listener to the update time div
 
+    map.addSource('openmaptiles', {
+        url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${MAPTILER_KEY}`,
+        type: 'vector',
+    });
 
     map.addLayer(
         {