updated to MaplibreGL

razorness · Feb 12, 2024 · eebab59 · eebab59
1 parent df9792e
commit eebab59
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "vue-maplibre-gl",
-	"version": "3.1.0",
+	"version": "3.1.1",
 	"description": "Vue 3 plugin for maplibre-gl",
 	"keywords": [
 		"vue",
@@ -48,7 +48,7 @@
 		"@types/node": "^20.11.17",
 		"@vitejs/plugin-vue": "^5.0.4",
 		"geojson": "^0.5.0",
-		"maplibre-gl": "^3.3.0",
+		"maplibre-gl": "^3.6.2",
 		"mitt": "^3.0.1",
 		"modular-maptiler-sdk": "^1.0.16",
 		"sass": "^1.70.0",

diff --git a/src/App.vue b/src/App.vue
@@ -41,7 +41,7 @@
 
 			</mgl-map>
 		</div>
-		<div style="margin-bottom: 20px">Version: {{ mapVersion}}</div>
+		<div style="margin-bottom: 20px">Version: {{ mapVersion }}</div>
 		Loaded Count: {{ loaded }}<br>
 		Is Zooming: {{ isZooming }}<br>
 		<div>
@@ -85,7 +85,7 @@
 </template>
 
 <script lang="ts">
-	import { defineComponent, ref, watch } from 'vue';
+	import { defineComponent, onMounted, ref, watch } from 'vue';
 	import { MglDefaults, MglEvent, Position, StyleSwitchItem, useMap, ValidLanguages } from '@/lib/main';
 	import { mdiCursorDefaultClick } from '@mdi/js';
 	import { CircleLayerSpecification, LineLayerSpecification, LngLatLike, MapLayerMouseEvent } from 'maplibre-gl';
@@ -102,13 +102,37 @@
 	import MglMarker from '@/lib/components/marker.component';
 	import MglGeoJsonSource from '@/lib/components/sources/geojson.source';
 	import MglLineLayer from '@/lib/components/layers/line.layer';
-	import { FeatureCollection } from 'geojson';
+	import { FeatureCollection, LineString } from 'geojson';
 	import MglVectorSource from '@/lib/components/sources/vector.source';
 	import MglCircleLayer from '@/lib/components/layers/circle.layer';
 
 	MglDefaults.style = 'https://api.maptiler.com/maps/streets/style.json?key=cQX2iET1gmOW38bedbUh';
 	console.log('MglDefaults', MglDefaults);
 
+	const lineString = [
+		[ -122.483696, 37.833818 ],
+		[ -122.483482, 37.833174 ],
+		[ -122.483396, 37.8327 ],
+		[ -122.483568, 37.832056 ],
+		[ -122.48404, 37.831141 ],
+		[ -122.48404, 37.830497 ],
+		[ -122.483482, 37.82992 ],
+		[ -122.483568, 37.829548 ],
+		[ -122.48507, 37.829446 ],
+		[ -122.4861, 37.828802 ],
+		[ -122.486958, 37.82931 ],
+		[ -122.487001, 37.830802 ],
+		[ -122.487516, 37.831683 ],
+		[ -122.488031, 37.832158 ],
+		[ -122.488889, 37.832971 ],
+		[ -122.489876, 37.832632 ],
+		[ -122.490434, 37.832937 ],
+		[ -122.49125, 37.832429 ],
+		[ -122.491636, 37.832564 ],
+		[ -122.492237, 37.833378 ],
+		[ -122.493782, 37.833683 ]
+	];
+
 	export default defineComponent({
 		name      : 'App',
 		components: {
@@ -124,7 +148,7 @@
 				  markerCoordinates = ref<LngLatLike>([ 13.377507, 52.516267 ]),
 				  geoJsonSource     = ref({
 					  show: true,
-					  data: <FeatureCollection>{
+					  data: <FeatureCollection<LineString>>{
 						  type    : 'FeatureCollection',
 						  features: [
 							  {
@@ -134,26 +158,7 @@
 									  type       : 'LineString',
 									  coordinates: [
 										  [ -122.483696, 37.833818 ],
-										  [ -122.483482, 37.833174 ],
-										  [ -122.483396, 37.8327 ],
-										  [ -122.483568, 37.832056 ],
-										  [ -122.48404, 37.831141 ],
-										  [ -122.48404, 37.830497 ],
-										  [ -122.483482, 37.82992 ],
-										  [ -122.483568, 37.829548 ],
-										  [ -122.48507, 37.829446 ],
-										  [ -122.4861, 37.828802 ],
-										  [ -122.486958, 37.82931 ],
-										  [ -122.487001, 37.830802 ],
-										  [ -122.487516, 37.831683 ],
-										  [ -122.488031, 37.832158 ],
-										  [ -122.488889, 37.832971 ],
-										  [ -122.489876, 37.832632 ],
-										  [ -122.490434, 37.832937 ],
-										  [ -122.49125, 37.832429 ],
-										  [ -122.491636, 37.832564 ],
-										  [ -122.492237, 37.833378 ],
-										  [ -122.493782, 37.833683 ]
+										  [ -122.483482, 37.833174 ]
 									  ]
 								  }
 							  }
@@ -164,10 +169,46 @@
 			watch(() => map.isLoaded, () => (console.log('IS LOADED', map)), { immediate: true });
 			watch(() => map.isMounted, (v: boolean) => (console.log('IS MOUNTED', v)), { immediate: true });
 
-			// onMounted(() => {
-			// 	setTimeout(() => (markerCoordinates.value = [ 13.377507, 42.516267 ]), 5000);
-			// 	setInterval(() => (geoJsonSource.value.show = !geoJsonSource.value.show), 1000);
-			// });
+			onMounted(() => {
+				setTimeout(() => (markerCoordinates.value = [ 13.377507, 42.516267 ]), 5000);
+				setInterval(() => {
+					if (geoJsonSource.value.data.features[ 0 ].geometry.coordinates.length >= lineString.length) {
+						geoJsonSource.value.data = <FeatureCollection<LineString>>{
+							type    : 'FeatureCollection',
+							features: [
+								{
+									type      : 'Feature',
+									properties: {},
+									geometry  : {
+										type       : 'LineString',
+										coordinates: [
+											[ -122.483696, 37.833818 ],
+											[ -122.483482, 37.833174 ]
+										]
+									}
+								}
+							]
+						};
+					} else {
+						geoJsonSource.value.data = <FeatureCollection<LineString>>{
+							type    : 'FeatureCollection',
+							features: [
+								{
+									type      : 'Feature',
+									properties: {},
+									geometry  : {
+										type       : 'LineString',
+										coordinates: [
+											...geoJsonSource.value.data.features[ 0 ].geometry.coordinates,
+											lineString[ geoJsonSource.value.data.features[ 0 ].geometry.coordinates.length ]
+										]
+									}
+								}
+							]
+						};
+					}
+				}, 1000);
+			});
 
 			function onLoad(e: MglEvent) {
 				loaded.value++;

diff --git a/yarn.lock b/yarn.lock
@@ -2185,7 +2185,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"maplibre-gl@npm:^3.3.0":
+"maplibre-gl@npm:^3.6.2":
   version: 3.6.2
   resolution: "maplibre-gl@npm:3.6.2"
   dependencies:
@@ -3542,7 +3542,7 @@ __metadata:
     "@types/node": "npm:^20.11.17"
     "@vitejs/plugin-vue": "npm:^5.0.4"
     geojson: "npm:^0.5.0"
-    maplibre-gl: "npm:^3.3.0"
+    maplibre-gl: "npm:^3.6.2"
     mitt: "npm:^3.0.1"
     modular-maptiler-sdk: "npm:^1.0.16"
     sass: "npm:^1.70.0"