Map rendering improvements

interline-io · Jun 17, 2024 · 7fee522 · 7fee522
1 parent d890c71
commit 7fee522
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 49 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 }}
@@ -19,7 +19,7 @@
         @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"
@@ -51,6 +51,7 @@ query ($limit: Int=100, $agency_ids: [Int!], $after:Int!=0, $route_ids: [Int!],
     route_type
     route_url
     geometries {
+      geometry
       combined_geometry
       generated
       length
@@ -127,7 +128,7 @@ export default {
       error: null,
       isComponentModalActive: false,
       agencyFeatures: {},
-      currentZoom: 0
+      currentZoom: this.zoom
     }
   },
   computed: {
@@ -168,6 +169,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
@@ -225,26 +229,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,17 @@
         <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">
+          <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>
+        </slot>
       </div>
     </div>
     <div v-if="isComponentModalActive">

diff --git a/src/runtime/components/pages/map.vue b/src/runtime/components/pages/map.vue
@@ -179,7 +179,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"
@@ -265,7 +265,6 @@ fragment rs on RouteStop {
     route_type
     route_id
     route_color
-    geometry
     feed_onestop_id
     feed_version_sha1
     agency {
@@ -383,32 +382,14 @@ 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
-    },
     routeIds () {
       const ret = new Map()
       for (const rss of Object.values(this.servedRoutes || {})) {
         for (const rs of rss) {
           ret.set(rs.route.id, true)
         }
       }
+      console.log('routeIds:', Array.from(ret.keys()))
       return Array.from(ret.keys())
     },
     allStops () {
@@ -498,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',