Skip to content

Commit d126d42

Browse files
d-koppenhagend-koppenhagen
committed
docs(ol-layerswitcher*-control): describe how to use layerswitcher and layerswitcherimage controls
closes #200
1 parent e4fb433 commit d126d42

File tree

10 files changed

+269
-32
lines changed

10 files changed

+269
-32
lines changed

‎docs/.vitepress/config.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,14 @@ export default defineConfig({
314314
text: "ol-fullscreen-control",
315315
link: "/componentsguide/mapcontrols/fullscreen/",
316316
},
317+
{
318+
text: "ol-layerswitcher-control",
319+
link: "/componentsguide/mapcontrols/layerswitcher/",
320+
},
321+
{
322+
text: "ol-layerswitcherimage-control",
323+
link: "/componentsguide/mapcontrols/layerswitcherimage/",
324+
},
317325
{
318326
text: "ol-mouseposition-control",
319327
link: "/componentsguide/mapcontrols/mouseposition/",

‎docs/componentsguide/mapcontrols/index.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,13 @@ See menu items on the left.
179179
/>
180180
</ol-tile-layer>
181181
182+
<ol-tile-layer ref="bingLayer">
183+
<ol-source-bingmaps
184+
apiKey="AjtUzWJBHlI3Ma_Ke6Qv2fGRXEs0ua5hUQi54ECwfXTiWsitll4AkETZDihjcfeI"
185+
:imagerySet="'CanvasDark'"
186+
/>
187+
</ol-tile-layer>
188+
182189
<ol-tile-layer ref="osmLayer">
183190
<ol-source-osm />
184191
</ol-tile-layer>
@@ -194,6 +201,7 @@ const rotation = ref(0);
194201
const layerList = ref([]);
195202
const jawgLayer = ref(null);
196203
const osmLayer = ref(null);
204+
const bingLayer = ref(null);
197205
const swipeControl = ref(null);
198206
199207
const fullscreencontrol = ref(true);
@@ -219,6 +227,7 @@ const videoStopped = (event) => {
219227
onMounted(() => {
220228
layerList.value.push(jawgLayer.value.tileLayer);
221229
layerList.value.push(osmLayer.value.tileLayer);
230+
layerList.value.push(bingLayer.value.tileLayer);
222231
console.log(layerList.value);
223232
});
224233
</script>

‎docs/componentsguide/mapcontrols/layerswitcher/index.md‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
# ol-layerswitcher-control
2+
3+
> A control for switching between layers.
4+
5+
## Demo
6+
7+
See [Demo page for all Map Controls](../index.md)
8+
9+
## Properties
10+
11+
### selection
12+
13+
enable layer selection when click on the title
14+
15+
- **Type**: `boolean`
16+
17+
### displayInLayerSwitcher
18+
19+
function that takes a layer and return a boolean if the layer is displayed in the switcher, default test the displayInLayerSwitcher layer attribute
20+
21+
- **Type**: `function`
22+
23+
### show_progress
24+
25+
show a progress bar on tile layers
26+
27+
- **Type**: `boolean`
28+
- **Default**: `false`
29+
30+
### mouseover
31+
32+
show the panel on mouseover
33+
34+
- **Type**: `boolean`
35+
- **Default**: `false`
36+
37+
### reordering
38+
39+
allow layer reordering
40+
41+
- **Type**: `boolean`
42+
- **Default**: `true`
43+
44+
### trash
45+
46+
add a trash button to delete the layer
47+
48+
- **Type**: `boolean`
49+
- **Default**: `false`
50+
51+
### oninfo
52+
53+
callback on click on info button, if none no info button is shown DEPRECATED: use on(info) instead
54+
55+
- **Type**: `function`
56+
57+
### extent
58+
59+
add an extent button to zoom to the extent of the layer
60+
61+
- **Type**: `boolean`
62+
63+
### onextent
64+
65+
callback when click on extent, default fits view to extent
66+
67+
- **Type**: `function`
68+
69+
### drawDelay
70+
71+
delay in ms to redraw the layer (usefull to prevent flickering when manipulating the layers)
72+
73+
- **Type**: `number`
74+
75+
### collapsed
76+
77+
collapse the layerswitcher at beginning
78+
79+
- **Type**: `boolean`
80+
- **Default**: `true`
81+
82+
### layerGroup
83+
84+
a layer group to display in the switcher, default display all layers of the map
85+
86+
- **Type**: `ol.layerGroup`
87+
88+
### noScroll
89+
90+
prevent handle scrolling
91+
92+
- **Type**: `boolean`
93+
- **Default**: `false`
94+
95+
### onchangeCheck
96+
97+
optional callback on click on checkbox, you can call this method for doing operations after check/uncheck a layer.
98+
Layers attributes that control the switcher.
99+
100+
- `allwaysOnTop` {`boolean`} true to force layer stay on top of the others while reordering, default `false`
101+
- `displayInLayerSwitcher` {`boolean`} display the layer in switcher, default `true`
102+
- `noSwitcherDelete` {`boolean`} to prevent layer deletion (w. trash option = `true`), default `false`
103+
104+
- **Type**: `function`

‎docs/componentsguide/mapcontrols/layerswitcherimage/index.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# ol-layerswitcherimage-control
2+
3+
> A control for switching between layers.
4+
5+
To see the correct thumbnail images, you may have to set the property `imagerySet` (e. g. for usage with [BingMaps](../../sources/bing/)).
6+
7+
## Demo
8+
9+
See [Demo page for all Map Controls](../index.md)
10+
11+
## Properties
12+
13+
### selection
14+
15+
enable layer selection when click on the title
16+
17+
- **Type**: `boolean`
18+
19+
### displayInLayerSwitcher
20+
21+
function that takes a layer and return a boolean if the layer is displayed in the switcher, default test the displayInLayerSwitcher layer attribute
22+
23+
- **Type**: `function`
24+
25+
### show_progress
26+
27+
show a progress bar on tile layers
28+
29+
- **Type**: `boolean`
30+
- **Default**: `false`
31+
32+
### mouseover
33+
34+
show the panel on mouseover
35+
36+
- **Type**: `boolean`
37+
- **Default**: `false`
38+
39+
### reordering
40+
41+
allow layer reordering
42+
43+
- **Type**: `boolean`
44+
- **Default**: `true`
45+
46+
### trash
47+
48+
add a trash button to delete the layer
49+
50+
- **Type**: `boolean`
51+
- **Default**: `false`
52+
53+
### oninfo
54+
55+
callback on click on info button, if none no info button is shown DEPRECATED: use on(info) instead
56+
57+
- **Type**: `function`
58+
59+
### extent
60+
61+
add an extent button to zoom to the extent of the layer
62+
63+
- **Type**: `boolean`
64+
65+
### onextent
66+
67+
callback when click on extent, default fits view to extent
68+
69+
- **Type**: `function`
70+
71+
### drawDelay
72+
73+
delay in ms to redraw the layer (usefull to prevent flickering when manipulating the layers)
74+
75+
- **Type**: `number`
76+
77+
### collapsed
78+
79+
collapse the layerswitcher at beginning
80+
81+
- **Type**: `boolean`
82+
- **Default**: `true`
83+
84+
### layerGroup
85+
86+
a layer group to display in the switcher, default display all layers of the map
87+
88+
- **Type**: `ol.layerGroup`
89+
90+
### noScroll
91+
92+
prevent handle scrolling
93+
94+
- **Type**: `boolean`
95+
- **Default**: `false`
96+
97+
### onchangeCheck
98+
99+
optional callback on click on checkbox, you can call this method for doing operations after check/uncheck a layer.
100+
Layers attributes that control the switcher.
101+
102+
- `allwaysOnTop` {`boolean`} true to force layer stay on top of the others while reordering, default `false`
103+
- `displayInLayerSwitcher` {`boolean`} display the layer in switcher, default `true`
104+
- `noSwitcherDelete` {`boolean`} to prevent layer deletion (w. trash option = `true`), default `false`
105+
106+
- **Type**: `function`

‎docs/componentsguide/sources/bing/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ Bing Maps API key
9292
- **Type**: `String`
9393

9494
Type of imagery.
95+
It must be defined for example to show the thumbnail images when adding the [`ol-layerswitcherimage-control`](../../mapcontrols/layerswitcherimage/).
9596

9697
### imageSmoothing
9798

‎docs/public/sitemap.xml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,16 @@
277277
<lastmod>2021-08-15T21:05:05+00:00</lastmod>
278278
<priority>0.80</priority>
279279
</url>
280+
<url>
281+
<loc>https://vue3openlayers.netlify.app/componentsguide/mapcontrols/layerswitcher/</loc>
282+
<lastmod>2023-06-15T15:45:00+00:00</lastmod>
283+
<priority>0.80</priority>
284+
</url>
285+
<url>
286+
<loc>https://vue3openlayers.netlify.app/componentsguide/mapcontrols/layerswitcherimage/</loc>
287+
<lastmod>2023-06-15T15:45:00+00:00</lastmod>
288+
<priority>0.80</priority>
289+
</url>
280290
<url>
281291
<loc>https://vue3openlayers.netlify.app/componentsguide/mapcontrols/mouseposition/</loc>
282292
<lastmod>2021-08-15T21:05:05+00:00</lastmod>

‎src/components/mapControls/OlLayerSwitcherControl.vue‎

Lines changed: 10 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,20 @@
22
<div v-if="false"></div>
33
</template>
44
<script setup lang="ts">
5-
import LayerSwitcher from "ol-ext/control/LayerSwitcher";
5+
import LayerSwitcher, { type Options } from "ol-ext/control/LayerSwitcher";
6+
import LayerGroup from "ol/layer/Group";
67
import { useAttrs } from "vue";
78
import useControl from "@/composables/useControl";
89
import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
910
10-
const props = withDefaults(
11-
defineProps<{
12-
selection?: boolean;
13-
displayInLayerSwitcher?: (...ars: unknown[]) => unknown;
14-
show_progress?: boolean;
15-
mouseover?: boolean;
16-
reordering?: boolean;
17-
trash?: boolean;
18-
oninfo?: (...ars: unknown[]) => unknown;
19-
extent?: boolean;
20-
onextent?: (...ars: unknown[]) => unknown;
21-
drawDelay?: number;
22-
collapsed?: boolean;
23-
layerGroup?: Record<string, any>;
24-
noScroll?: boolean;
25-
}>(),
26-
{
27-
show_progress: false,
28-
mouseover: false,
29-
reordering: true,
30-
trash: false,
31-
collapsed: true,
32-
noScroll: false,
33-
}
34-
);
11+
const props = withDefaults(defineProps<Options>(), {
12+
show_progress: false,
13+
mouseover: false,
14+
reordering: true,
15+
trash: false,
16+
collapsed: true,
17+
noScroll: false,
18+
});
3519
3620
const attrs = useAttrs();
3721
const { properties } = usePropsAsObjectProperties(props);

‎src/components/mapControls/OlLayerSwitcherImageControl.vue‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,24 @@
33
</template>
44
<script setup lang="ts">
55
import LayerSwitcherImage from "ol-ext/control/LayerSwitcherImage";
6+
import { type Options } from "ol-ext/control/LayerSwitcher";
67
import { useAttrs } from "vue";
78
import useControl from "@/composables/useControl";
8-
// import usePropsAsObjectProperties from '@/composables/usePropsAsObjectProperties'
9+
import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
910
10-
// eslint-disable-next-line @typescript-eslint/ban-types
11-
// const props = withDefaults(defineProps<{}>(), {})
11+
const props = withDefaults(defineProps<Options>(), {
12+
show_progress: false,
13+
mouseover: false,
14+
reordering: true,
15+
trash: false,
16+
collapsed: true,
17+
noScroll: false,
18+
});
1219
1320
const attrs = useAttrs();
14-
// const { properties } = usePropsAsObjectProperties(props)
21+
const { properties } = usePropsAsObjectProperties(props);
1522
16-
const { control } = useControl(LayerSwitcherImage, {}, attrs);
23+
const { control } = useControl(LayerSwitcherImage, properties, attrs);
1724
1825
defineExpose({
1926
control,

‎src/components/sources/OlSourceBingMaps.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ watch(source, () => {
5454
});
5555
5656
watch(
57-
() => layer,
57+
() => layer?.value,
5858
() => {
5959
layer?.value?.setSource(source.value);
6060
}

‎src/demos/MapControlDemo.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,13 @@
154154
/>
155155
</ol-tile-layer>
156156

157+
<ol-tile-layer ref="bingLayer">
158+
<ol-source-bingmaps
159+
apiKey="AjtUzWJBHlI3Ma_Ke6Qv2fGRXEs0ua5hUQi54ECwfXTiWsitll4AkETZDihjcfeI"
160+
:imagerySet="'CanvasDark'"
161+
/>
162+
</ol-tile-layer>
163+
157164
<ol-tile-layer ref="osmLayer">
158165
<ol-source-osm />
159166
</ol-tile-layer>
@@ -169,6 +176,7 @@ const rotation = ref(0);
169176
const layerList = ref([]);
170177
const jawgLayer = ref(null);
171178
const osmLayer = ref(null);
179+
const bingLayer = ref(null);
172180
const swipeControl = ref(null);
173181
174182
const fullscreencontrol = ref(true);

0 commit comments

Comments
 (0)