Lighten stop map page load (#93)

* Lighten stop map page load * Map rendering improvements * Cleanup
interline-io · Jun 17, 2024 · 41ecf92 · 41ecf92
1 parent c0d0790
commit 41ecf92
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 79 deletions.
diff --git a/src/runtime/components/feed-version-map-viewer.vue b/src/runtime/components/feed-version-map-viewer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tl-map">
+  <div class="tl-fv-map">
     <tl-loading v-if="loading" />
     <tl-msg-error v-else-if="error">
       {{ error }}
@@ -11,20 +11,26 @@
         :route-features="routeFeatures"
         :stop-features="stopFeatures"
         :center="center"
-        :auto-fit="true"
+        :auto-fit="autoFit"
         :zoom="zoom ? zoom : null"
+        :circle-radius="circleRadius"
+        :circle-color="circleColor"
         @set-agency-features="agencyFeatures = $event"
         @map-click="mapClick"
         @set-zoom="currentZoom = $event"
       />
-      <div v-if="overlay" class="tl-map-panel">
+      <div v-if="overlay" class="tl-fv-map-panel">
         <tl-map-route-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>
       </div>
     </div>
   </div>
@@ -102,6 +108,7 @@ export default {
     }
   },
   props: {
+    autoFit: { type: Boolean, default: true },
     limit: { type: Number, default: 1000 },
     maxLimit: { type: Number, default: 10000 },
     feedVersionSha1: { type: String, default: null },
@@ -114,7 +121,9 @@ export default {
     features: { type: Array, default () { return [] } },
     center: { type: Array, default () { return [] } },
     zoom: { type: Number, default: null },
-    enableScrollZoom: { type: Boolean, default: false }
+    enableScrollZoom: { type: Boolean, default: false },
+    circleRadius: { type: Number, default: 1 },
+    circleColor: { type: String, default: '#f03b20' }
   },
   data () {
     return {
@@ -123,7 +132,7 @@ export default {
       error: null,
       isComponentModalActive: false,
       agencyFeatures: {},
-      currentZoom: 0
+      currentZoom: this.zoom
     }
   },
   computed: {
@@ -164,6 +173,9 @@ 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
+          }
           const fcopy = Object.assign({}, g.stop)
           delete fcopy.geometry
           delete fcopy.__typename
@@ -221,26 +233,19 @@ export default {
 }
 </script>
 
-<style>
-.tl-map {
+<style scoped>
+.tl-fv-map {
   position:relative
 }
-.tl-map-panel {
+.tl-fv-map-panel {
     background-color: white;
     user-select: none;
     position: absolute !important;
     margin: 0px;
     padding: 10px;
     top: 10px;
     left: 10px;
-    width: 565px;
-}
-.tl-map-panel-tabs .tab-content {
-    background-color: rgba(255, 255, 255, 0.9);
-    margin: 0px;
-    padding-left: 10px;
-    padding-right: 10px;
-    max-height:80vh;
-    overflow-y:auto;
+    width: 350px;
+    max-width: 565px;
 }
 </style>
diff --git a/src/runtime/components/map-route-list.vue b/src/runtime/components/map-route-list.vue
@@ -5,15 +5,7 @@
         <tl-route-select :agency-features="agencyFeatures" :collapse="true" :link="true" />
       </div>
       <div v-else>
-        <h6 class="title is-6">
-          Select routes
-        </h6>
-        <div v-if="currentZoom < 8">
-          Zoom in to select routes and to see stop points.
-        </div>
-        <div v-else>
-          Use your cursor to highlight routes and see their names here. Click for more details.
-        </div>
+        <slot name="default" />
       </div>
     </div>
     <div v-if="isComponentModalActive">

diff --git a/src/runtime/components/pages/map.vue b/src/runtime/components/pages/map.vue
@@ -27,7 +27,17 @@
               :agency-features="agencyFeatures"
               :is-component-modal-active="isComponentModalActive"
               @close="isComponentModalActive = false"
-            />
+            >
+              <h6 class="title is-6">
+                Select routes
+              </h6>
+              <div v-if="currentZoom < 8">
+                Zoom in to select routes and to see stop points.
+              </div>
+              <div v-else>
+                Use your cursor to highlight routes and see their names here. <br>Click for more details.
+              </div>
+            </tl-map-route-list>
             <p v-if="Object.keys(agencyFeatures).length == 0" class="content block is-small pt-2">
               <a href="https://www.transit.land/documentation/vector-tiles" target="_blank">Learn more about Transitland v2 Vector Tiles</a>
             </p>
@@ -179,7 +189,7 @@ export default {
     top: 10px;
     left: 10px;
     max-width:90vw;
-    /* width: 565px; */
+    min-width: 565px;
 }
 
 .tl-map-panel-tabs {

diff --git a/src/runtime/components/pages/route.vue b/src/runtime/components/pages/route.vue
@@ -441,7 +441,7 @@ export default {
   },
   methods: {
     filterRTTranslations (v) {
-      return v.filter((s) => { return !s.language.includes('html') })
+      return v.filter((s) => { return !(s?.language || '').includes('html') })
     }
   }
 }

diff --git a/src/runtime/components/pages/stop.vue b/src/runtime/components/pages/stop.vue
@@ -222,12 +222,12 @@
         <div class="column is-one-third">
           <client-only placeholder="Map">
             <tl-login-gate role="tl_user">
-              <tl-map-viewer
-                :stop-features="stopFeatures"
-                :route-features="routeFeatures"
+              <tl-feed-version-map-viewer
+                :route-ids="routeIds"
                 :features="features"
                 :auto-fit="false"
                 :center="entity.geometry.coordinates"
+                :include-stops="true"
                 :circle-radius="20"
                 :zoom="15"
                 :overlay="true"
@@ -263,15 +263,13 @@ fragment rs on RouteStop {
     route_long_name
     route_short_name
     route_type
-    route_url
     route_id
     route_color
-    geometry
     feed_onestop_id
     feed_version_sha1
     agency {
-      agency_name
       id
+      agency_name
       operator {
         onestop_id
       }
@@ -339,8 +337,11 @@ query ($onestopId: String, $ids: [Int!], $entityId: String, $feedOnestopId: Stri
     route_stops {
       ...rs
     }
-    nearby_stops(radius:100) {
-      ...ss
+    nearby_stops(radius:50)  {
+      id
+      onestop_id
+      stop_id
+      stop_name
       route_stops {
         ...rs
       }
@@ -381,50 +382,15 @@ export default {
       }
       return ret
     },
-    stopFeatures () {
-      const ret = []
-      for (const i of this.allStops) {
-        if (!i.geometry) {
-          continue
-        }
-        ret.push({ type: 'Feature', id: i.id, geometry: i.geometry, properties: { class: 'stop', id: i.id } })
-      }
-      return ret
-    },
-    routeFeatures () {
-      const ret = []
-      let featid = 1
+    routeIds () {
+      const ret = new Map()
       for (const rss of Object.values(this.servedRoutes || {})) {
         for (const rs of rss) {
-          let routeColor = rs.route.route_color
-          if (routeColor && routeColor.substr(0, 1) !== '#') {
-            routeColor = '#' + routeColor
-          }
-          featid++
-          ret.push(
-            {
-              type: 'Feature',
-              id: featid,
-              geometry: rs.route.geometry,
-              properties: {
-                class: 'route',
-                id: featid,
-                generated: false,
-                geometry_length: -1,
-                headway_secs: 60,
-                route_color: routeColor,
-                route_long_name: rs.route.route_long_name,
-                route_short_name: rs.route.route_short_name,
-                route_type: rs.route.route_type,
-                route_url: rs.route.route_url,
-                route_id: rs.route.route_id,
-                agency_name: rs.route.agency.agency_name
-              }
-            }
-          )
+          ret.set(rs.route.id, true)
         }
       }
-      return ret
+      console.log('routeIds:', Array.from(ret.keys()))
+      return Array.from(ret.keys())
     },
     allStops () {
       const ret = {}
@@ -484,7 +450,7 @@ export default {
         }
       }
       for (const ent of this.nearbyStops) {
-        for (const rs of ent.route_stops) {
+        for (const rs of ent.route_stops || []) {
           if (excl[rs.route.id]) {
             continue
           }
@@ -513,6 +479,26 @@ export default {
       const ret = []
       const sg = this.entity.geometry
       let featid = 1
+
+      for (const i of this.allStops) {
+        if (!i.geometry) {
+          continue
+        }
+        if (!(i.location_type !== 0 || i.location_type !== 2)) {
+          continue
+        }
+        ret.push({
+          type: 'Feature',
+          id: i.id,
+          geometry: i.geometry,
+          properties: {
+            class: 'stop',
+            id: i.id
+
+          }
+        })
+      }
+
       for (const i of this.entity.children || []) {
         ret.push({
           type: 'Feature',