Loading docs/.vuepress/components/RealtimeMap.vue +26 −17 Changes for docs/.vuepress/components/RealtimeMap.vue: 26 added lines, 17 removed lines. Original line number Diff line number Diff line <template> <div class="map-container" ref="myMap"></div> <span>Time drift: {{ time_difference }} sec.</span> <!-- <div id="map-style-menu">--> Loading @@ -12,7 +13,6 @@ <script> import maplibre from 'maplibre-gl'; import axios from "axios"; import { onMounted, onUnmounted } from 'vue'; export default { Loading Loading @@ -348,24 +348,22 @@ export default { timer: {} }), setup() { onMounted(async () => { async created() { //fetch bus location (current no need) // const realtime_location_api_data = await axios.get(`https://bus.sustcra.com/api/v1/bus/monitor_osm/`) // this.bus_location_data_api = realtime_location_api_data.data; // console.log("fetch complete") // fetch geojson const bldg_geojson = await axios.get(`https://bus.sustcra.com/geojson/sustech_bldg.json`); const bldg_geojson = await axios.get(`https://bus.sustcra.com/geojson/sustech_bldg.json`) this.bldg_geojson = bldg_geojson.data; const gate_geojson = await axios.get(`https://bus.sustcra.com/geojson/sustech_gate.json`); const gate_geojson = await axios.get(`https://bus.sustcra.com/geojson/sustech_gate.json`) this.gate_geojson = gate_geojson.data; console.log("Fetch geojson of sustech complete") console.log("Fetch geojson of sustech complete"); await this.build_map_onmount(); }); onUnmounted(async () => { clearInterval(this.timer); }); }, //update data methods: { async fetch_bus() { Loading @@ -381,7 +379,7 @@ export default { } this.update_location() }, update_location() { update_location: function () { this.display_data = []; this.bus_marker_arr.forEach((marker) => marker.remove()) let i; Loading Loading @@ -490,7 +488,11 @@ export default { async refresh() { await this.fetch_bus(); }, async build_map_onmount() { }, async mounted() { const initialState = { lng: 113.99373, lat: 22.60308, Loading Loading @@ -706,13 +708,19 @@ export default { this.timer = setInterval(() => { this.refresh(); }, 5000); }, }, async unmounted() { clearInterval(this.timer); } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style src="maplibre-gl/dist/maplibre-gl.css"></style> <style src="maplibre-gl/dist/maplibre-gl.css"> </style> <style scoped> /* @import 'https://code.bdstatic.com/npm/maplibre-gl@1.15.2/dist/maplibre-gl.css'; */ /* @import 'maplibre-gl/dist/maplibre-gl.css'; */ Loading Loading @@ -770,4 +778,5 @@ export default { content: '✔'; margin-right: 5px; } </style> Loading
docs/.vuepress/components/RealtimeMap.vue +26 −17 Changes for docs/.vuepress/components/RealtimeMap.vue: 26 added lines, 17 removed lines. Original line number Diff line number Diff line <template> <div class="map-container" ref="myMap"></div> <span>Time drift: {{ time_difference }} sec.</span> <!-- <div id="map-style-menu">--> Loading @@ -12,7 +13,6 @@ <script> import maplibre from 'maplibre-gl'; import axios from "axios"; import { onMounted, onUnmounted } from 'vue'; export default { Loading Loading @@ -348,24 +348,22 @@ export default { timer: {} }), setup() { onMounted(async () => { async created() { //fetch bus location (current no need) // const realtime_location_api_data = await axios.get(`https://bus.sustcra.com/api/v1/bus/monitor_osm/`) // this.bus_location_data_api = realtime_location_api_data.data; // console.log("fetch complete") // fetch geojson const bldg_geojson = await axios.get(`https://bus.sustcra.com/geojson/sustech_bldg.json`); const bldg_geojson = await axios.get(`https://bus.sustcra.com/geojson/sustech_bldg.json`) this.bldg_geojson = bldg_geojson.data; const gate_geojson = await axios.get(`https://bus.sustcra.com/geojson/sustech_gate.json`); const gate_geojson = await axios.get(`https://bus.sustcra.com/geojson/sustech_gate.json`) this.gate_geojson = gate_geojson.data; console.log("Fetch geojson of sustech complete") console.log("Fetch geojson of sustech complete"); await this.build_map_onmount(); }); onUnmounted(async () => { clearInterval(this.timer); }); }, //update data methods: { async fetch_bus() { Loading @@ -381,7 +379,7 @@ export default { } this.update_location() }, update_location() { update_location: function () { this.display_data = []; this.bus_marker_arr.forEach((marker) => marker.remove()) let i; Loading Loading @@ -490,7 +488,11 @@ export default { async refresh() { await this.fetch_bus(); }, async build_map_onmount() { }, async mounted() { const initialState = { lng: 113.99373, lat: 22.60308, Loading Loading @@ -706,13 +708,19 @@ export default { this.timer = setInterval(() => { this.refresh(); }, 5000); }, }, async unmounted() { clearInterval(this.timer); } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style src="maplibre-gl/dist/maplibre-gl.css"></style> <style src="maplibre-gl/dist/maplibre-gl.css"> </style> <style scoped> /* @import 'https://code.bdstatic.com/npm/maplibre-gl@1.15.2/dist/maplibre-gl.css'; */ /* @import 'maplibre-gl/dist/maplibre-gl.css'; */ Loading Loading @@ -770,4 +778,5 @@ export default { content: '✔'; margin-right: 5px; } </style>