Skip to content

Commit 05511b6

Browse files
d-koppenhagend-koppenhagen
committed
docs: include source code snippets directly from files
1 parent eb3f9cd commit 05511b6

File tree

59 files changed

+236
-4090
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+236
-4090
lines changed

‎docs/componentsguide/animations/drop/index.md‎

Lines changed: 4 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -10,62 +10,11 @@ import DropAnimation from "@demos/DropAnimation.vue"
1010
<DropAnimation />
1111
</ClientOnly>
1212

13-
```vue
14-
<template>
15-
<ol-map
16-
:loadTilesWhileAnimating="true"
17-
:loadTilesWhileInteracting="true"
18-
style="height: 700px"
19-
>
20-
<ol-view
21-
ref="view"
22-
:center="center"
23-
:rotation="rotation"
24-
:zoom="zoom"
25-
:projection="projection"
26-
/>
27-
28-
<ol-tile-layer>
29-
<ol-source-osm />
30-
</ol-tile-layer>
31-
32-
<ol-vector-layer
33-
:updateWhileAnimating="true"
34-
:updateWhileInteracting="true"
35-
>
36-
<ol-source-vector ref="vectorsource">
37-
<ol-animation-drop :duration="2000" :repeat="3">
38-
<ol-feature v-for="index in 20" :key="index">
39-
<ol-geom-point
40-
:coordinates="[
41-
getRandomInRange(24, 45, 3),
42-
getRandomInRange(35, 41, 3),
43-
]"
44-
></ol-geom-point>
45-
46-
<ol-style>
47-
<ol-style-icon :src="starIcon" :scale="0.1"></ol-style-icon>
48-
</ol-style>
49-
</ol-feature>
50-
</ol-animation-drop>
51-
</ol-source-vector>
52-
</ol-vector-layer>
53-
</ol-map>
54-
</template>
13+
::: code-group
5514

56-
<script setup>
57-
import { ref } from "vue";
58-
import starIcon from "@/assets/star.png";
59-
60-
const center = ref([40, 40]);
61-
const projection = ref("EPSG:4326");
62-
const zoom = ref(6);
63-
const rotation = ref(0);
64-
const getRandomInRange = (from, to, fixed) => {
65-
return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
66-
};
67-
</script>
68-
```
15+
<<< src/demos/DropAnimation.vue
16+
17+
:::
6918

7019
## Properties
7120

‎docs/componentsguide/animations/fade/index.md‎

Lines changed: 4 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -10,62 +10,11 @@ import FadeAnimation from "@demos/FadeAnimation.vue"
1010
<FadeAnimation />
1111
</ClientOnly>
1212

13-
```vue
14-
<template>
15-
<ol-map
16-
:loadTilesWhileAnimating="true"
17-
:loadTilesWhileInteracting="true"
18-
style="height: 700px"
19-
>
20-
<ol-view
21-
ref="view"
22-
:center="center"
23-
:rotation="rotation"
24-
:zoom="zoom"
25-
:projection="projection"
26-
/>
27-
28-
<ol-tile-layer>
29-
<ol-source-osm />
30-
</ol-tile-layer>
31-
32-
<ol-vector-layer
33-
:updateWhileAnimating="true"
34-
:updateWhileInteracting="true"
35-
>
36-
<ol-source-vector ref="vectorsource">
37-
<ol-animation-fade :duration="4000">
38-
<ol-feature v-for="index in 20" :key="index">
39-
<ol-geom-point
40-
:coordinates="[
41-
getRandomInRange(24, 45, 3),
42-
getRandomInRange(35, 41, 3),
43-
]"
44-
></ol-geom-point>
45-
46-
<ol-style>
47-
<ol-style-icon :src="starIcon" :scale="0.1"></ol-style-icon>
48-
</ol-style>
49-
</ol-feature>
50-
</ol-animation-fade>
51-
</ol-source-vector>
52-
</ol-vector-layer>
53-
</ol-map>
54-
</template>
13+
::: code-group
5514

56-
<script setup>
57-
import { ref } from "vue";
58-
import starIcon from "@/assets/star.png";
59-
60-
const center = ref([40, 40]);
61-
const projection = ref("EPSG:4326");
62-
const zoom = ref(6);
63-
const rotation = ref(0);
64-
const getRandomInRange = (from, to, fixed) => {
65-
return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
66-
};
67-
</script>
68-
```
15+
<<< src/demos/FadeAnimation.vue
16+
17+
:::
6918

7019
## Properties
7120

‎docs/componentsguide/animations/shake/index.md‎

Lines changed: 4 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -10,62 +10,11 @@ import ShakeAnimation from "@demos/ShakeAnimation.vue"
1010
<ShakeAnimation />
1111
</ClientOnly>
1212

13-
```vue
14-
<template>
15-
<ol-map
16-
:loadTilesWhileAnimating="true"
17-
:loadTilesWhileInteracting="true"
18-
style="height: 700px"
19-
>
20-
<ol-view
21-
ref="view"
22-
:center="center"
23-
:rotation="rotation"
24-
:zoom="zoom"
25-
:projection="projection"
26-
/>
27-
28-
<ol-tile-layer>
29-
<ol-source-osm />
30-
</ol-tile-layer>
31-
32-
<ol-vector-layer
33-
:updateWhileAnimating="true"
34-
:updateWhileInteracting="true"
35-
>
36-
<ol-source-vector ref="vectorsource">
37-
<ol-animation-shake :duration="2000" :repeat="5">
38-
<ol-feature v-for="index in 20" :key="index">
39-
<ol-geom-point
40-
:coordinates="[
41-
getRandomInRange(24, 45, 3),
42-
getRandomInRange(35, 41, 3),
43-
]"
44-
></ol-geom-point>
45-
46-
<ol-style>
47-
<ol-style-icon :src="starIcon" :scale="0.1"></ol-style-icon>
48-
</ol-style>
49-
</ol-feature>
50-
</ol-animation-shake>
51-
</ol-source-vector>
52-
</ol-vector-layer>
53-
</ol-map>
54-
</template>
13+
::: code-group
5514

56-
<script setup>
57-
import { ref } from "vue";
58-
import starIcon from "@/assets/star.png";
59-
60-
const center = ref([40, 40]);
61-
const projection = ref("EPSG:4326");
62-
const zoom = ref(6);
63-
const rotation = ref(0);
64-
const getRandomInRange = (from, to, fixed) => {
65-
return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
66-
};
67-
</script>
68-
```
15+
<<< src/demos/ShakeAnimation.vue
16+
17+
:::
6918

7019
## Properties
7120

‎docs/componentsguide/animations/slide/index.md‎

Lines changed: 4 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -10,62 +10,11 @@ import SlideAnimation from "@demos/SlideAnimation.vue"
1010
<SlideAnimation />
1111
</ClientOnly>
1212

13-
```vue
14-
<template>
15-
<ol-map
16-
:loadTilesWhileAnimating="true"
17-
:loadTilesWhileInteracting="true"
18-
style="height: 700px"
19-
>
20-
<ol-view
21-
ref="view"
22-
:center="center"
23-
:rotation="rotation"
24-
:zoom="zoom"
25-
:projection="projection"
26-
/>
27-
28-
<ol-tile-layer>
29-
<ol-source-osm />
30-
</ol-tile-layer>
31-
32-
<ol-vector-layer
33-
:updateWhileAnimating="true"
34-
:updateWhileInteracting="true"
35-
>
36-
<ol-source-vector ref="vectorsource">
37-
<ol-animation-slide :duration="2000">
38-
<ol-feature v-for="index in 20" :key="index">
39-
<ol-geom-point
40-
:coordinates="[
41-
getRandomInRange(24, 45, 3),
42-
getRandomInRange(35, 41, 3),
43-
]"
44-
></ol-geom-point>
45-
46-
<ol-style>
47-
<ol-style-icon :src="starIcon" :scale="0.1"></ol-style-icon>
48-
</ol-style>
49-
</ol-feature>
50-
</ol-animation-slide>
51-
</ol-source-vector>
52-
</ol-vector-layer>
53-
</ol-map>
54-
</template>
13+
::: code-group
5514

56-
<script setup>
57-
import { ref } from "vue";
58-
import starIcon from "@/assets/star.png";
59-
60-
const center = ref([40, 40]);
61-
const projection = ref("EPSG:4326");
62-
const zoom = ref(6);
63-
const rotation = ref(0);
64-
const getRandomInRange = (from, to, fixed) => {
65-
return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
66-
};
67-
</script>
68-
```
15+
<<< src/demos/SlideAnimation.vue
16+
17+
:::
6918

7019
## Properties
7120

‎docs/componentsguide/animations/teleport/index.md‎

Lines changed: 4 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -10,62 +10,11 @@ import TeleportAnimation from "@demos/TeleportAnimation.vue"
1010
<TeleportAnimation />
1111
</ClientOnly>
1212

13-
```vue
14-
<template>
15-
<ol-map
16-
:loadTilesWhileAnimating="true"
17-
:loadTilesWhileInteracting="true"
18-
style="height: 700px"
19-
>
20-
<ol-view
21-
ref="view"
22-
:center="center"
23-
:rotation="rotation"
24-
:zoom="zoom"
25-
:projection="projection"
26-
/>
27-
28-
<ol-tile-layer>
29-
<ol-source-osm />
30-
</ol-tile-layer>
31-
32-
<ol-vector-layer
33-
:updateWhileAnimating="true"
34-
:updateWhileInteracting="true"
35-
>
36-
<ol-source-vector ref="vectorsource">
37-
<ol-animation-teleport :duration="2000">
38-
<ol-feature v-for="index in 20" :key="index">
39-
<ol-geom-point
40-
:coordinates="[
41-
getRandomInRange(24, 45, 3),
42-
getRandomInRange(35, 41, 3),
43-
]"
44-
></ol-geom-point>
45-
46-
<ol-style>
47-
<ol-style-icon :src="starIcon" :scale="0.1"></ol-style-icon>
48-
</ol-style>
49-
</ol-feature>
50-
</ol-animation-teleport>
51-
</ol-source-vector>
52-
</ol-vector-layer>
53-
</ol-map>
54-
</template>
13+
::: code-group
5514

56-
<script setup>
57-
import { ref } from "vue";
58-
import starIcon from "@/assets/star.png";
59-
60-
const center = ref([40, 40]);
61-
const projection = ref("EPSG:4326");
62-
const zoom = ref(6);
63-
const rotation = ref(0);
64-
const getRandomInRange = (from, to, fixed) => {
65-
return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
66-
};
67-
</script>
68-
```
15+
<<< src/demos/TeleportAnimation.vue
16+
17+
:::
6918

7019
## Properties
7120

0 commit comments

Comments
 (0)