docs: merge html/js code snippets to vue

Author: d-koppenhagen

docs/componentsguide/animations/drop/index.md

@@ -10,7 +10,7 @@ import DropAnimation from "@demos/DropAnimation.vue"
 <DropAnimation />
 </ClientOnly>
 
-```html
+```vue
 <template>
   <ol-map
     :loadTilesWhileAnimating="true"
@@ -37,7 +37,10 @@ import DropAnimation from "@demos/DropAnimation.vue"
         <ol-animation-drop :duration="2000">
           <ol-feature v-for="index in 20" :key="index">
             <ol-geom-point
-              :coordinates="[getRandomInRange(24,45,3),getRandomInRange(35,41,3)]"
+              :coordinates="[
+                getRandomInRange(24, 45, 3),
+                getRandomInRange(35, 41, 3),
+              ]"
             ></ol-geom-point>
 
             <ol-style>
@@ -49,9 +52,8 @@ import DropAnimation from "@demos/DropAnimation.vue"
     </ol-vector-layer>
   </ol-map>
 </template>
-```
 
-```js
+<script>
 import { ref } from "vue";
 import starIcon from "@/assets/star.png";
 export default {
@@ -73,6 +75,7 @@ export default {
     };
   },
 };
+</script>
 ```
 
 ## Properties

docs/componentsguide/animations/fade/index.md

@@ -10,7 +10,7 @@ import FadeAnimation from "@demos/FadeAnimation.vue"
 <FadeAnimation />
 </ClientOnly>
 
-```html
+```vue
 <template>
   <ol-map
     :loadTilesWhileAnimating="true"
@@ -37,7 +37,10 @@ import FadeAnimation from "@demos/FadeAnimation.vue"
         <ol-animation-fade :duration="4000">
           <ol-feature v-for="index in 20" :key="index">
             <ol-geom-point
-              :coordinates="[getRandomInRange(24,45,3),getRandomInRange(35,41,3)]"
+              :coordinates="[
+                getRandomInRange(24, 45, 3),
+                getRandomInRange(35, 41, 3),
+              ]"
             ></ol-geom-point>
 
             <ol-style>
@@ -49,9 +52,8 @@ import FadeAnimation from "@demos/FadeAnimation.vue"
     </ol-vector-layer>
   </ol-map>
 </template>
-```
 
-```js
+<script>
 import { ref } from "vue";
 import starIcon from "@/assets/star.png";
 export default {
@@ -73,6 +75,7 @@ export default {
     };
   },
 };
+</script>
 ```
 
 ## Properties

docs/componentsguide/animations/shake/index.md

@@ -10,7 +10,7 @@ import ShakeAnimation from "@demos/ShakeAnimation.vue"
 <ShakeAnimation />
 </ClientOnly>
 
-```html
+```vue
 <template>
   <ol-map
     :loadTilesWhileAnimating="true"
@@ -37,7 +37,10 @@ import ShakeAnimation from "@demos/ShakeAnimation.vue"
         <ol-animation-shake :duration="2000" :repeat="5">
           <ol-feature v-for="index in 20" :key="index">
             <ol-geom-point
-              :coordinates="[getRandomInRange(24,45,3),getRandomInRange(35,41,3)]"
+              :coordinates="[
+                getRandomInRange(24, 45, 3),
+                getRandomInRange(35, 41, 3),
+              ]"
             ></ol-geom-point>
 
             <ol-style>
@@ -49,9 +52,8 @@ import ShakeAnimation from "@demos/ShakeAnimation.vue"
     </ol-vector-layer>
   </ol-map>
 </template>
-```
 
-```js
+<script>
 import { ref } from "vue";
 import starIcon from "@/assets/star.png";
 export default {
@@ -73,6 +75,7 @@ export default {
     };
   },
 };
+</script>
 ```
 
 ## Properties

docs/componentsguide/animations/slide/index.md

@@ -10,7 +10,7 @@ import SlideAnimation from "@demos/SlideAnimation.vue"
 <SlideAnimation />
 </ClientOnly>
 
-```html
+```vue
 <template>
   <ol-map
     :loadTilesWhileAnimating="true"
@@ -37,7 +37,10 @@ import SlideAnimation from "@demos/SlideAnimation.vue"
         <ol-animation-slide :duration="2000">
           <ol-feature v-for="index in 20" :key="index">
             <ol-geom-point
-              :coordinates="[getRandomInRange(24,45,3),getRandomInRange(35,41,3)]"
+              :coordinates="[
+                getRandomInRange(24, 45, 3),
+                getRandomInRange(35, 41, 3),
+              ]"
             ></ol-geom-point>
 
             <ol-style>
@@ -49,9 +52,8 @@ import SlideAnimation from "@demos/SlideAnimation.vue"
     </ol-vector-layer>
   </ol-map>
 </template>
-```
 
-```js
+<script>
 import { ref } from "vue";
 import starIcon from "@/assets/star.png";
 export default {
@@ -73,6 +75,7 @@ export default {
     };
   },
 };
+</script>
 ```
 
 ## Properties

docs/componentsguide/animations/teleport/index.md

@@ -10,7 +10,7 @@ import TeleportAnimation from "@demos/TeleportAnimation.vue"
 <TeleportAnimation />
 </ClientOnly>
 
-```html
+```vue
 <template>
   <ol-map
     :loadTilesWhileAnimating="true"
@@ -37,7 +37,10 @@ import TeleportAnimation from "@demos/TeleportAnimation.vue"
         <ol-animation-teleport :duration="2000">
           <ol-feature v-for="index in 20" :key="index">
             <ol-geom-point
-              :coordinates="[getRandomInRange(24,45,3),getRandomInRange(35,41,3)]"
+              :coordinates="[
+                getRandomInRange(24, 45, 3),
+                getRandomInRange(35, 41, 3),
+              ]"
             ></ol-geom-point>
 
             <ol-style>
@@ -49,9 +52,8 @@ import TeleportAnimation from "@demos/TeleportAnimation.vue"
     </ol-vector-layer>
   </ol-map>
 </template>
-```
 
-```js
+<script>
 import { ref } from "vue";
 import starIcon from "@/assets/star.png";
 export default {
@@ -73,6 +75,7 @@ export default {
     };
   },
 };
+</script>
 ```
 
 ## Properties

docs/componentsguide/animations/zoom/index.md

@@ -10,7 +10,7 @@ import ZoomAnimation from "@demos/ZoomAnimation.vue"
 <ZoomAnimation />
 </ClientOnly>
 
-```html
+```vue
 <template>
   <ol-map
     :loadTilesWhileAnimating="true"
@@ -37,7 +37,10 @@ import ZoomAnimation from "@demos/ZoomAnimation.vue"
         <ol-animation-zoom :duration="2000" :zoomOut="true">
           <ol-feature v-for="index in 20" :key="index">
             <ol-geom-point
-              :coordinates="[getRandomInRange(24,45,3),getRandomInRange(35,41,3)]"
+              :coordinates="[
+                getRandomInRange(24, 45, 3),
+                getRandomInRange(35, 41, 3),
+              ]"
             ></ol-geom-point>
 
             <ol-style>
@@ -49,9 +52,8 @@ import ZoomAnimation from "@demos/ZoomAnimation.vue"
     </ol-vector-layer>
   </ol-map>
 </template>
-```
 
-```js
+<script>
 import { ref } from "vue";
 import starIcon from "@/assets/star.png";
 export default {
@@ -73,6 +75,7 @@ export default {
     };
   },
 };
+</script>
 ```
 
 ## Properties

docs/componentsguide/geolocation/index.md

@@ -14,7 +14,7 @@ import GeoLocationDemo from "@demos/GeoLocationDemo.vue"
 <GeoLocationDemo />
 </ClientOnly>
 
-```html
+```vue
 <template>
   <ol-map
     :loadTilesWhileAnimating="true"
@@ -50,40 +50,15 @@ import GeoLocationDemo from "@demos/GeoLocationDemo.vue"
     </ol-geolocation>
   </ol-map>
 </template>
-```
 
-```js
-import hereIcon from "@/assets/here.png";
-import { ref } from "vue";
-export default {
-  setup() {
-    const center = ref([40, 40]);
-    const projection = ref("EPSG:4326");
-    const zoom = ref(8);
-    const rotation = ref(0);
-
-    const view = ref(null);
-    const map = ref(null);
-
-    const geoLocChange = (loc) => {
-      console.log(loc);
-      view.value.fit([loc[0], loc[1], loc[0], loc[1]], {
-        maxZoom: 14,
-      });
-    };
-
-    return {
-      center,
-      projection,
-      zoom,
-      rotation,
-      hereIcon,
-      view,
-      map,
-      geoLocChange,
-    };
-  },
-};
+<script></script>
+import hereIcon from "@/assets/here.png"; import { ref } from "vue"; export
+default { setup() { const center = ref([40, 40]); const projection =
+ref("EPSG:4326"); const zoom = ref(8); const rotation = ref(0); const view =
+ref(null); const map = ref(null); const geoLocChange = (loc) => {
+console.log(loc); view.value.fit([loc[0], loc[1], loc[0], loc[1]], { maxZoom:
+14, }); }; return { center, projection, zoom, rotation, hereIcon, view, map,
+geoLocChange, }; }, };
 ```
 
 ## Properties

docs/componentsguide/geometries/geomlinestring/index.md

@@ -6,12 +6,12 @@ ol-geom-line-string can be used inside a ol-feature to draw lines on the map.
 import LineString from "@demos/LineString.vue"
 </script>
 <ClientOnly>
-<LineString /> 
+<LineString />
 </ClientOnly>
 
 ## Usage
 
-```html
+```vue
 <template>
   <ol-map
     :loadTilesWhileAnimating="true"
@@ -34,7 +34,24 @@ import LineString from "@demos/LineString.vue"
       <ol-source-vector>
         <ol-feature>
           <ol-geom-line-string
-            :coordinates="[[116.544921,40.451633],[116.545264,40.451649],[116.545865,40.451698],[116.546144,40.451551],[116.546337,40.451274],[116.546788,40.451143],[116.547324,40.451078],[116.547539,40.450996],[116.547839,40.450719],[116.548440,40.450506],[116.548933,40.450604],[116.549448,40.450604],[116.550242,40.450376],[116.550865,40.450163],[116.551702,40.449935],[116.552581,40.449576]]"
+            :coordinates="[
+              [116.544921, 40.451633],
+              [116.545264, 40.451649],
+              [116.545865, 40.451698],
+              [116.546144, 40.451551],
+              [116.546337, 40.451274],
+              [116.546788, 40.451143],
+              [116.547324, 40.451078],
+              [116.547539, 40.450996],
+              [116.547839, 40.450719],
+              [116.54844, 40.450506],
+              [116.548933, 40.450604],
+              [116.549448, 40.450604],
+              [116.550242, 40.450376],
+              [116.550865, 40.450163],
+              [116.551702, 40.449935],
+              [116.552581, 40.449576],
+            ]"
           ></ol-geom-line-string>
           <ol-style>
             <ol-style-stroke
@@ -47,9 +64,8 @@ import LineString from "@demos/LineString.vue"
     </ol-vector-layer>
   </ol-map>
 </template>
-```
 
-```js
+<script>
 import { ref } from "vue";
 export default {
   setup() {
@@ -72,6 +88,7 @@ export default {
     };
   },
 };
+</script>
 ```
 
 ## Properties