mouse-over and select stop points in map

src/components/map-viewer.vue

@@ -39,9 +39,9 @@
         </div>
         <div class="map-info">
           <div v-show="Object.keys(agencyFeatures).length == 0">
-            <strong>Use your cursor</strong> to highlight routes and see their names here. <strong>Click</strong> for more details.
+            <strong>Use your cursor</strong> to highlight routes and stops to see more info. <strong>Click</strong> for more details.
           </div>
-          <tl-route-select :link="link" :agency-features="agencyFeatures" :collapse="true" />
+          <tl-route-stop-select :link="link" :agency-features="agencyFeatures" :collapse="true" />
         </div>
       </div>
     </div>
@@ -100,7 +100,8 @@ export default {
   data () {
     return {
       map: null,
-      hovering: [],
+      hoveringRoutes: [],
+      hoveringStops: [],
       agencyFeatures: {},
       isComponentModalActive: false,
       showGeneratedShadow: this.showGenerated,
@@ -388,29 +389,65 @@ export default {
     },
     mapMouseMove (e) {
       const map = this.map
-      const features = map.queryRenderedFeatures(e.point, { layers: ['route-active'] })
-      map.getCanvas().style.cursor = 'pointer'
-      for (const k of this.hovering) {
+      const agencyFeatures = {}
+
+      const stops = map.queryRenderedFeatures(e.point, { layers: ['stops'] })
+      for (const k of this.hoveringStops) {
+        map.setFeatureState(
+          { source: 'stops', id: k, sourceLayer: this.stopTiles ? this.stopTiles.id : null },
+          { hover: false }
+        )
+      }
+      const hoveringStops = []
+      for (const v of stops) {
+        hoveringStops.push(v.id)
+        map.setFeatureState({ source: 'stops', id: v.id, sourceLayer: this.stopTiles ? this.stopTiles.id : null }, { hover: true })
+
+        const agencyId = v.properties.agency_name
+        const stopId = v.properties.stop_id
+        if (agencyFeatures[agencyId] == null) {
+          agencyFeatures[agencyId] = {
+            stops: {},
+            routes: {}
+          }
+        }
+        agencyFeatures[agencyId].stops[stopId] = v.properties
+      }
+      this.hoveringStops = hoveringStops
+
+      const routes = map.queryRenderedFeatures(e.point, { layers: ['route-active'] })
+      for (const k of this.hoveringRoutes) {
         map.setFeatureState(
           { source: 'routes', id: k, sourceLayer: this.routeTiles ? this.routeTiles.id : null },
           { hover: false }
         )
       }
-      this.hovering = []
-      for (const v of features) {
-        this.hovering.push(v.id)
+      const hoveringRoutes = []
+      for (const v of routes) {
+        hoveringRoutes.push(v.id)
+        console.log(v)
         map.setFeatureState({ source: 'routes', id: v.id, sourceLayer: this.routeTiles ? this.routeTiles.id : null }, { hover: true })
-      }
-      const agencyFeatures = {}
-      for (const v of features) {
+
         const agencyId = v.properties.agency_name
         const routeId = v.properties.route_id
         if (agencyFeatures[agencyId] == null) {
-          agencyFeatures[agencyId] = {}
+          agencyFeatures[agencyId] = {
+            stops: {},
+            routes: {}
+          }
         }
-        agencyFeatures[agencyId][routeId] = v.properties
+        agencyFeatures[agencyId].routes[routeId] = v.properties
       }
+      this.hoveringRoutes = hoveringRoutes
+
       this.agencyFeatures = agencyFeatures
+
+      // mouse cursor
+      if (hoveringRoutes.length > 0 || hoveringStops.length > 0) {
+        map.getCanvas().style.cursor = 'pointer'
+      } else {
+        map.getCanvas().style.cursor = ''
+      }
     }
   }
 }

src/components/route-select.vue → src/components/route-stop-select.vue

@@ -1,12 +1,17 @@
 <template>
   <div>
-    <div v-for="(routes,agency) in agencyFeatures" :key="agency">
+    <div v-for="(entities,agency) in agencyFeatures" :key="agency">
       <strong>{{ agency }} </strong>
-      <template v-if="routeCount > maxAgencyRows && collapse">
-        <div>{{ Object.keys(routes).length }} routes</div>
+      <template v-if="(routeCount + stopCount) > maxAgencyRows && collapse">
+        <div v-if="routeCount > 0">
+          {{ routeCount }} routes
+        </div>
+        <div v-if="stopCount > 0">
+          {{ stopCount }} stops
+        </div>
       </template>
       <template v-else>
-        <div v-for="route in routes" :key="route.id">
+        <div v-for="route in entities.routes" :key="route.id">
           <nuxt-link
             v-if="link"
             :to="{name: 'routes-onestop_id', params:{onestop_id:route.onestop_id || 'search' }, query:( (linkVersion || !route.onestop_id) ? {feed_onestop_id:route.feed_onestop_id,feed_version_sha1:route.feed_version_sha1,route_id:route.route_id} : {})}"
@@ -27,6 +32,19 @@
             />
           </template>
         </div>
+        <div v-for="stop in entities.stops" :key="stop.id">
+          <nuxt-link
+            :to="{name: 'stops-onestop_id', params:{onestop_id:stop.onestop_id || 'search' }, query:( (linkVersion || !stop.onestop_id) ? {feed_onestop_id:stop.feed_onestop_id,feed_version_sha1:stop.feed_version_sha1,stop_id:stop.stop_id} : {})}"
+          >
+            {{ stop.stop_name }}
+            <!-- <tl-route-icon
+              :key="route.id"
+              :route-type="route.route_type"
+              :route-short-name="route.route_short_name"
+              :route-long-name="route.route_long_name"
+            /> -->
+          </nuxt-link>
+        </div>
       </template>
     </div>
   </div>
@@ -44,8 +62,15 @@ export default {
   computed: {
     routeCount () {
       let count = 0
-      for (const v of Object.values(this.agencyFeatures)) {
-        count = count + Object.keys(v).length
+      for (const a of Object.values(this.agencyFeatures)) {
+        count = count + Object.keys(a.routes).length
+      }
+      return count
+    },
+    stopCount () {
+      let count = 0
+      for (const a of Object.values(this.agencyFeatures)) {
+        count = count + Object.keys(a.stops).length
       }
       return count
     }