From 8f9b3b85a1dbfb395271fe29020a96cfc758fc74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= <francois@2metz.fr>
Date: Thu, 10 Oct 2024 10:37:00 +0200
Subject: [PATCH] Create 2 example geojson and vector from the playground one.

---
 docs/examples/geojson.vue    | 127 +++++++++++++++++++++++++++++++++++
 docs/examples/playground.vue | 127 ++---------------------------------
 docs/examples/vector.vue     |  47 +++++++++++++
 3 files changed, 178 insertions(+), 123 deletions(-)
 create mode 100644 docs/examples/geojson.vue
 create mode 100644 docs/examples/vector.vue

diff --git a/docs/examples/geojson.vue b/docs/examples/geojson.vue
new file mode 100644
index 0000000..27b2cc9
--- /dev/null
+++ b/docs/examples/geojson.vue
@@ -0,0 +1,127 @@
+// Geojson source
+//
+// Render a dynamic geojson source
+<template>
+  <mgl-map
+    :map-style="style"
+    :center="center"
+    :zoom="zoom"
+    height="500px"
+  >
+    <mgl-geo-json-source
+      source-id="geojson"
+      :data="geojsonSource.data"
+    >
+      <mgl-line-layer
+        layer-id="geojson"
+        :layout="layout"
+        :paint="paint"
+      />
+    </mgl-geo-json-source>
+  </mgl-map>
+</template>
+
+<script setup>
+import {  onMounted, ref } from 'vue';
+import {
+  MglMap,
+  MglGeoJsonSource,
+  MglLineLayer,
+} from '@indoorequal/vue-maplibre-gl';
+
+const style = 'https://api.maptiler.com/maps/streets/style.json?key=cQX2iET1gmOW38bedbUh';
+const center = [ -122.483696, 37.833818 ];
+const zoom = 15;
+
+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 ]
+];
+
+const geojsonSource = ref({
+  data: {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        properties: {},
+        geometry: {
+          type: 'LineString',
+          coordinates: lineString.slice(0, 1)
+        }
+      }
+    ]
+  },
+});
+
+onMounted(() => {
+  setInterval(() => {
+    if (geojsonSource.value.data.features[ 0 ].geometry.coordinates.length >= lineString.length) {
+      geojsonSource.value.data = {
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'LineString',
+              coordinates: lineString.slice(0, 1)
+            }
+          }
+        ]
+      };
+    } else {
+      geojsonSource.value.data = {
+        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);
+});
+
+const layout = {
+  'line-join': 'round',
+  'line-cap' : 'round'
+};
+
+const paint = {
+  'line-color': '#FF0000',
+  'line-width': 8
+};
+
+</script>
+
+<style lang="scss">
+@import "maplibre-gl/dist/maplibre-gl.css";
+</style>
diff --git a/docs/examples/playground.vue b/docs/examples/playground.vue
index 640a95a..760120f 100644
--- a/docs/examples/playground.vue
+++ b/docs/examples/playground.vue
@@ -26,21 +26,6 @@
         </button>
       </mgl-custom-control>
       <mgl-marker :coordinates="markerCoordinates" color="#cc0000" :scale="0.5"/>
-
-      <mgl-geo-json-source source-id="geojson" :data="geojsonSource.data">
-	<mgl-line-layer
-	  v-if="geojsonSource.show"
-	  layer-id="geojson"
-	  :layout="layout"
-	  :paint="paint"
-	  @mouseenter="onMouseenter"
-	  />
-      </mgl-geo-json-source>
-
-      <mgl-vector-source source-id="libraries" :tiles="librariesSourceTiles">
-	<mgl-circle-layer layer-id="libraries" source-layer="libraries" :paint="librariesLayerCirclesPaint"/>
-      </mgl-vector-source>
-
     </mgl-map>
   </div>
   <div style="margin-bottom: 20px">Version: {{ mapVersion }}</div>
@@ -87,46 +72,16 @@ import {
   MglGeolocateControl,
   MglCustomControl,
   MglMarker,
-  MglGeoJsonSource,
-  MglLineLayer,
-  MglVectorSource,
-  MglCircleLayer
 } from '@indoorequal/vue-maplibre-gl';
 import { mdiCursorDefaultClick } from '@mdi/js';
-import { CircleLayerSpecification, LineLayerSpecification, LngLatLike, MapLayerMouseEvent } from 'maplibre-gl';
-import { FeatureCollection, LineString } from 'geojson';
+import { LngLatLike, MapLayerMouseEvent } from 'maplibre-gl';
 
 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: {
-    MglCircleLayer, MglVectorSource, MglLineLayer, MglGeoJsonSource, MglMarker, MglCustomControl,
+    MglMarker, MglCustomControl,
     MglGeolocateControl, MglScaleControl, MglNavigationControl, MglAttributionControl, MglFullscreenControl, MglMap
   },
   setup() {
@@ -134,69 +89,13 @@ export default defineComponent({
           mapVersion        = ref<string>(),
           showCustomControl = ref(true),
           loaded            = ref(0),
-          markerCoordinates = ref<LngLatLike>([ 13.377507, 52.516267 ]),
-          geojsonSource     = ref({
-            data: <FeatureCollection<LineString>>({
-              type    : 'FeatureCollection',
-              features: [
-                {
-                  type: 'Feature',
-                  properties: {},
-                  geometry  : {
-                    type: 'LineString',
-                    coordinates: [
-                      [ -122.483696, 37.833818 ],
-                      [ -122.483482, 37.833174 ]
-                    ]
-                  }
-                }
-              ]
-            }),
-            show: true
-    });
+          markerCoordinates = ref<LngLatLike>([ 13.377507, 52.516267 ]);
 
     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(() => {
-	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) {
@@ -205,32 +104,14 @@ export default defineComponent({
       console.log(e.type, e, e.map.version);
     }
 
-    function onMouseenter(e: MapLayerMouseEvent) {
-      console.log('EVENT', e.type, e.lngLat);
-    }
-
     return {
-      showCustomControl, loaded, map, mapVersion, markerCoordinates, geojsonSource, onLoad, onMouseenter,
-      geojsonSourceData         : geojsonSource.data,
+      showCustomControl, loaded, map, mapVersion, markerCoordinates, onLoad,
       isZooming                 : ref(false),
       controlPosition           : ref(Position.TOP_LEFT),
       showMap                   : ref(true),
       center                    : [ -122.483696, 37.833818 ] as LngLatLike,
       zoom                      : 15,
       buttonIcon                : mdiCursorDefaultClick,
-      layout                    : {
-	'line-join': 'round',
-	'line-cap' : 'round'
-      } as LineLayerSpecification['layout'],
-      paint                     : {
-	'line-color': '#FF0000',
-	'line-width': 8
-      } as LineLayerSpecification['paint'],
-      librariesSourceTiles      : [ 'https://api.librarydata.uk/libraries/{z}/{x}/{y}.mvt' ],
-      librariesLayerCirclesPaint: {
-	'circle-radius': 5,
-	'circle-color' : '#1b5e20'
-      } as CircleLayerSpecification['paint']
     };
   }
 });
diff --git a/docs/examples/vector.vue b/docs/examples/vector.vue
new file mode 100644
index 0000000..a921263
--- /dev/null
+++ b/docs/examples/vector.vue
@@ -0,0 +1,47 @@
+// Vector source
+//
+// Display a vector source
+<template>
+  <mgl-map
+    :map-style="style"
+    :center="center"
+    :zoom="zoom"
+    height="500px"
+  >
+    <mgl-vector-source
+      source-id="libraries"
+      :tiles="librariesSourceTiles"
+    >
+      <mgl-circle-layer
+        layer-id="libraries"
+        source-layer="libraries"
+        :paint="librariesLayerCirclesPaint"
+      />
+    </mgl-vector-source>
+
+  </mgl-map>
+</template>
+
+<script setup lang="ts">
+import {
+  MglMap,
+  MglVectorSource,
+  MglCircleLayer
+} from '@indoorequal/vue-maplibre-gl';
+import { CircleLayerSpecification, LineLayerSpecification, LngLatLike, MapLayerMouseEvent } from 'maplibre-gl';
+
+const style = 'https://api.maptiler.com/maps/streets/style.json?key=cQX2iET1gmOW38bedbUh';
+
+const center = [-3.002233964444031, 53.71773428766181];
+const zoom = 5;
+
+const librariesSourceTiles = [ 'https://api.librarydata.uk/libraries/{z}/{x}/{y}.mvt' ];
+const librariesLayerCirclesPaint = {
+  'circle-radius': 5,
+  'circle-color' : '#1b5e20'
+} as CircleLayerSpecification['paint'];
+</script>
+
+<style lang="scss">
+@import "maplibre-gl/dist/maplibre-gl.css";
+</style>