Skip to content

Commit

Permalink
docs: include source code snippets directly from files
Browse files Browse the repository at this point in the history
  • Loading branch information
@d-koppenhagen
d-koppenhagen committed Jun 23, 2023
1 parent eb3f9cd commit 05511b6
Show file tree
Hide file tree
Showing 59 changed files with 236 additions and 4,090 deletions.
59 changes: 4 additions & 55 deletions docs/componentsguide/animations/drop/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,62 +10,11 @@ import DropAnimation from "@demos/DropAnimation.vue"
<DropAnimation />
</ClientOnly>

```vue
<template>
<ol-map
:loadTilesWhileAnimating="true"
:loadTilesWhileInteracting="true"
style="height: 700px"
>
<ol-view
ref="view"
:center="center"
:rotation="rotation"
:zoom="zoom"
:projection="projection"
/>
<ol-tile-layer>
<ol-source-osm />
</ol-tile-layer>
<ol-vector-layer
:updateWhileAnimating="true"
:updateWhileInteracting="true"
>
<ol-source-vector ref="vectorsource">
<ol-animation-drop :duration="2000" :repeat="3">
<ol-feature v-for="index in 20" :key="index">
<ol-geom-point
:coordinates="[
getRandomInRange(24, 45, 3),
getRandomInRange(35, 41, 3),
]"
></ol-geom-point>
<ol-style>
<ol-style-icon :src="starIcon" :scale="0.1"></ol-style-icon>
</ol-style>
</ol-feature>
</ol-animation-drop>
</ol-source-vector>
</ol-vector-layer>
</ol-map>
</template>
::: code-group

<script setup>
import { ref } from "vue";
import starIcon from "@/assets/star.png";
const center = ref([40, 40]);
const projection = ref("EPSG:4326");
const zoom = ref(6);
const rotation = ref(0);
const getRandomInRange = (from, to, fixed) => {
return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
};
</script>
```
<<< src/demos/DropAnimation.vue

:::

## Properties

Expand Down
59 changes: 4 additions & 55 deletions docs/componentsguide/animations/fade/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,62 +10,11 @@ import FadeAnimation from "@demos/FadeAnimation.vue"
<FadeAnimation />
</ClientOnly>

```vue
<template>
<ol-map
:loadTilesWhileAnimating="true"
:loadTilesWhileInteracting="true"
style="height: 700px"
>
<ol-view
ref="view"
:center="center"
:rotation="rotation"
:zoom="zoom"
:projection="projection"
/>
<ol-tile-layer>
<ol-source-osm />
</ol-tile-layer>
<ol-vector-layer
:updateWhileAnimating="true"
:updateWhileInteracting="true"
>
<ol-source-vector ref="vectorsource">
<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),
]"
></ol-geom-point>
<ol-style>
<ol-style-icon :src="starIcon" :scale="0.1"></ol-style-icon>
</ol-style>
</ol-feature>
</ol-animation-fade>
</ol-source-vector>
</ol-vector-layer>
</ol-map>
</template>
::: code-group

<script setup>
import { ref } from "vue";
import starIcon from "@/assets/star.png";
const center = ref([40, 40]);
const projection = ref("EPSG:4326");
const zoom = ref(6);
const rotation = ref(0);
const getRandomInRange = (from, to, fixed) => {
return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
};
</script>
```
<<< src/demos/FadeAnimation.vue

:::

## Properties

Expand Down
59 changes: 4 additions & 55 deletions docs/componentsguide/animations/shake/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,62 +10,11 @@ import ShakeAnimation from "@demos/ShakeAnimation.vue"
<ShakeAnimation />
</ClientOnly>

```vue
<template>
<ol-map
:loadTilesWhileAnimating="true"
:loadTilesWhileInteracting="true"
style="height: 700px"
>
<ol-view
ref="view"
:center="center"
:rotation="rotation"
:zoom="zoom"
:projection="projection"
/>
<ol-tile-layer>
<ol-source-osm />
</ol-tile-layer>
<ol-vector-layer
:updateWhileAnimating="true"
:updateWhileInteracting="true"
>
<ol-source-vector ref="vectorsource">
<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),
]"
></ol-geom-point>
<ol-style>
<ol-style-icon :src="starIcon" :scale="0.1"></ol-style-icon>
</ol-style>
</ol-feature>
</ol-animation-shake>
</ol-source-vector>
</ol-vector-layer>
</ol-map>
</template>
::: code-group

<script setup>
import { ref } from "vue";
import starIcon from "@/assets/star.png";
const center = ref([40, 40]);
const projection = ref("EPSG:4326");
const zoom = ref(6);
const rotation = ref(0);
const getRandomInRange = (from, to, fixed) => {
return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
};
</script>
```
<<< src/demos/ShakeAnimation.vue

:::

## Properties

Expand Down
59 changes: 4 additions & 55 deletions docs/componentsguide/animations/slide/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,62 +10,11 @@ import SlideAnimation from "@demos/SlideAnimation.vue"
<SlideAnimation />
</ClientOnly>

```vue
<template>
<ol-map
:loadTilesWhileAnimating="true"
:loadTilesWhileInteracting="true"
style="height: 700px"
>
<ol-view
ref="view"
:center="center"
:rotation="rotation"
:zoom="zoom"
:projection="projection"
/>
<ol-tile-layer>
<ol-source-osm />
</ol-tile-layer>
<ol-vector-layer
:updateWhileAnimating="true"
:updateWhileInteracting="true"
>
<ol-source-vector ref="vectorsource">
<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),
]"
></ol-geom-point>
<ol-style>
<ol-style-icon :src="starIcon" :scale="0.1"></ol-style-icon>
</ol-style>
</ol-feature>
</ol-animation-slide>
</ol-source-vector>
</ol-vector-layer>
</ol-map>
</template>
::: code-group

<script setup>
import { ref } from "vue";
import starIcon from "@/assets/star.png";
const center = ref([40, 40]);
const projection = ref("EPSG:4326");
const zoom = ref(6);
const rotation = ref(0);
const getRandomInRange = (from, to, fixed) => {
return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
};
</script>
```
<<< src/demos/SlideAnimation.vue

:::

## Properties

Expand Down
59 changes: 4 additions & 55 deletions docs/componentsguide/animations/teleport/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,62 +10,11 @@ import TeleportAnimation from "@demos/TeleportAnimation.vue"
<TeleportAnimation />
</ClientOnly>

```vue
<template>
<ol-map
:loadTilesWhileAnimating="true"
:loadTilesWhileInteracting="true"
style="height: 700px"
>
<ol-view
ref="view"
:center="center"
:rotation="rotation"
:zoom="zoom"
:projection="projection"
/>
<ol-tile-layer>
<ol-source-osm />
</ol-tile-layer>
<ol-vector-layer
:updateWhileAnimating="true"
:updateWhileInteracting="true"
>
<ol-source-vector ref="vectorsource">
<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),
]"
></ol-geom-point>
<ol-style>
<ol-style-icon :src="starIcon" :scale="0.1"></ol-style-icon>
</ol-style>
</ol-feature>
</ol-animation-teleport>
</ol-source-vector>
</ol-vector-layer>
</ol-map>
</template>
::: code-group

<script setup>
import { ref } from "vue";
import starIcon from "@/assets/star.png";
const center = ref([40, 40]);
const projection = ref("EPSG:4326");
const zoom = ref(6);
const rotation = ref(0);
const getRandomInRange = (from, to, fixed) => {
return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
};
</script>
```
<<< src/demos/TeleportAnimation.vue

:::

## Properties

Expand Down
Loading

0 comments on commit 05511b6

Please sign in to comment.