map: stops are now hoverable and clickable

src/runtime/components/feed-version-map-viewer.vue

@@ -15,22 +15,24 @@
         :zoom="zoom ? zoom : null"
         :circle-radius="circleRadius"
         :circle-color="circleColor"
+        :enable-hover="enableHover"
+        :highlighted-stop-feature-id="highlightedStopFeatureId"
         @set-agency-features="agencyFeatures = $event"
         @map-click="mapClick"
         @set-zoom="currentZoom = $event"
       />
       <div v-if="overlay" class="tl-fv-map-panel">
-        <tl-map-route-list
+        <tl-map-route-stop-list
           :current-zoom="currentZoom"
           :link-version="linkVersion"
           :agency-features="agencyFeatures"
           :is-component-modal-active="isComponentModalActive"
           @close="isComponentModalActive = false"
         >
-          <strong>Select routes</strong>
-          <br>
-          Use your cursor to highlight routes
-        </tl-map-route-list>
+          <p><strong>Select routes and stops</strong></p>
+          <p>Use your cursor to highlight route lines<template v-if="includeStops"> or stop points</template>.</p>
+          <p>Click for details.</p>
+        </tl-map-route-stop-list>
       </div>
     </div>
   </div>
@@ -72,6 +74,7 @@ query ($limit: Int=100, $agency_ids: [Int!], $after:Int!=0, $route_ids: [Int!],
         stop_id
         stop_name
         geometry
+        location_type
       }
     }
     agency {
@@ -123,7 +126,15 @@ export default {
     zoom: { type: Number, default: null },
     enableScrollZoom: { type: Boolean, default: false },
     circleRadius: { type: Number, default: 1 },
-    circleColor: { type: String, default: '#f03b20' }
+    circleColor: { type: String, default: '#f03b20' },
+    enableHover: {
+      type: Boolean,
+      default: true
+    },
+    highlightedStopFeatureId: { 
+      type: [String, Number],
+      default: null 
+    }
   },
   data () {
     return {
@@ -173,18 +184,17 @@ export default {
       const features = []
       for (const feature of this.routes) {
         for (const g of feature.route_stops || []) {
-          if (!(g.stop.location_type !== 0 || g.stop.location_type !== 2)) {
-            continue
+          if (g.stop.location_type === 0 || g.stop.location_type === 2) {
+            const fcopy = Object.assign({}, g.stop)
+            delete fcopy.geometry
+            delete fcopy.__typename
+            features.push({
+              type: 'Feature',
+              geometry: g.stop.geometry,
+              properties: fcopy,
+              id: g.stop.id
+            })
           }
-          const fcopy = Object.assign({}, g.stop)
-          delete fcopy.geometry
-          delete fcopy.__typename
-          features.push({
-            type: 'Feature',
-            geometry: g.stop.geometry,
-            properties: fcopy,
-            id: g.stop.id
-          })
         }
       }
       return features
@@ -195,7 +205,7 @@ export default {
       this.$emit('setRouteFeatures', v)
     },
     stopFeatures (v) {
-      this.$emit('setSopFeatures', v)
+      this.$emit('setStopFeatures', v)
     }
   },
   methods: {

src/runtime/components/map-layers.js

@@ -1,3 +1,5 @@
+import { stopColors } from '../constants/stop-colors'
+
 const headways = {
   high: 600,
   medium: 1200,
@@ -17,19 +19,109 @@ const colors = {
   metro: '#ff0000',
   metrooutline: '#ffffff',
   other: '#E6A615',
-  stop: '#007cbf'
+  stop: stopColors.stop,
+  stopNode: stopColors.entrance,
+  stopEntrance: stopColors.entrance,
+  stopGeneric: stopColors.node,
+  stopBoarding: stopColors.boarding
+}
+
+const LocationTypes = {
+  STOP: 0,      // Stop/Platform
+  STATION: 1,   // Station
+  ENTRANCE: 2,  // Entrance/Exit
+  NODE: 3,      // Generic Node
+  BOARDING: 4   // Boarding Area
 }
 
 const stopLayers = [
+  // Add hover/active layer first
+  {
+    name: 'stop-active',
+    type: 'circle',
+    source: 'stops',
+    minzoom: 14,
+    paint: {
+      'circle-radius': [
+        'case',
+        ['boolean', ['feature-state', 'hover'], false],
+        8,
+        6
+      ],
+      'circle-color': [
+        'case',
+        ['>', ['get', 'location_type'], 1],
+        colors.stopNode,
+        colors.stop
+      ],
+      'circle-opacity': [
+        'case',
+        ['boolean', ['feature-state', 'hover'], false],
+        0.8,
+        0.0
+      ],
+      'circle-stroke-width': [
+        'case',
+        ['boolean', ['feature-state', 'hover'], false],
+        6,
+        0
+      ],
+      'circle-stroke-color': [
+        'case',
+        ['boolean', ['feature-state', 'hover'], false],
+        colors.active,
+        '#ffffff'
+      ]
+    },
+    filter: [
+      'any',
+      ['==', ['get', 'location_type'], LocationTypes.STOP],
+      ['==', ['get', 'location_type'], LocationTypes.STATION],
+      ['==', ['get', 'location_type'], LocationTypes.ENTRANCE]
+    ]
+  },
+  // Regular stops layer
   {
     name: 'stops',
     type: 'circle',
     source: 'stops',
+    minzoom: 14,
     paint: {
-      'circle-color': '#000',
+      'circle-color': [
+        'case',
+        ['>', ['get', 'location_type'], 1],
+        colors.stopNode,
+        colors.stop
+      ],
       'circle-radius': 4,
-      'circle-opacity': 0.75
-    }
+      'circle-opacity': 0.75,
+      'circle-stroke-width': [
+        'case',
+        ['==', ['get', 'location_type'], 2],
+        2,
+        ['==', ['get', 'location_type'], 3],
+        2,
+        ['==', ['get', 'location_type'], 4],
+        2,
+        0
+      ],
+      'circle-stroke-color': [
+        'case',
+        ['==', ['get', 'location_type'], 2],
+        colors.stopEntrance,
+        ['==', ['get', 'location_type'], 3],
+        colors.stopGeneric,
+        ['==', ['get', 'location_type'], 4],
+        colors.stopBoarding,
+        '#ffffff'
+      ]
+    },
+    filter: [
+      'any',
+      ['==', ['get', 'location_type'], LocationTypes.STOP],
+      ['==', ['get', 'location_type'], LocationTypes.STATION], 
+      ['==', ['get', 'location_type'], LocationTypes.ENTRANCE]
+    ]
   }
 ]
 
@@ -203,4 +295,64 @@ const routeLayers = [
   }
 ]
 
-export default { headways, colors, stopLayers, routeLayers }
+// Add these new layer definitions
+const otherLayers = {
+  polygons: {
+    id: 'polygons',
+    type: 'fill',
+    source: 'polygons',
+    paint: {
+      'fill-color': '#ccc',
+      'fill-opacity': 0.2
+    }
+  },
+  polygonsOutline: {
+    id: 'polygons-outline',
+    type: 'line',
+    source: 'polygons',
+    paint: {
+      'line-width': 2,
+      'line-color': '#000',
+      'line-opacity': 0.2
+    }
+  },
+  points: {
+    id: 'points',
+    type: 'circle',
+    source: 'points',
+    paint: {
+      'circle-color': ['coalesce', ['get', 'marker-color'], '#f03b20'],
+      'circle-radius': ['coalesce', ['get', 'marker-radius'], 1],
+      'circle-opacity': 0.4
+    }
+  },
+  lines: {
+    id: 'lines',
+    type: 'line',
+    source: 'lines',
+    paint: {
+      'line-color': ['coalesce', ['get', 'stroke'], '#000'],
+      'line-width': ['coalesce', ['get', 'stroke-width'], 2],
+      'line-opacity': 1.0
+    }
+  }
+}
+
+// Add route layer defaults
+const routeLayerDefaults = {
+  type: 'line',
+  layout: {
+    'line-cap': 'round',
+    'line-join': 'round'
+  }
+}
+
+export default { 
+  headways, 
+  colors, 
+  stopLayers, 
+  routeLayers,
+  otherLayers,
+  routeLayerDefaults,
+  LocationTypes
+}