fix(demo): use correct component names for controls

Author: d-koppenhagen

docs/componentsguide/mapcontrols/contextmenu/index.md

@@ -1,4 +1,4 @@
-# ol-context-menu
+# ol-context-menu-control
 
 > A contextmenu extension for OpenLayers.
 

docs/componentsguide/mapcontrols/index.md

@@ -4,7 +4,10 @@ aside: false
 
 # Map Controls
 
-A control is a visible widget with a DOM element in a fixed position on the screen. They can involve user input (buttons), or be informational only; the position is determined using CSS. By default these are placed in the container with CSS class name ol-overlaycontainer-stopevent, but can use any outside DOM element.
+A control is a visible widget with a DOM element in a fixed position on the screen.
+They can involve user input (buttons), or be informational only;
+the position is determined using CSS.
+By default these are placed in the container with CSS class name ol-overlaycontainer-stopevent, but can use any outside DOM element.
 
 <script setup>
 import MapControlDemo from "@demos/MapControlDemo.vue"
@@ -15,17 +18,7 @@ import MapControlDemo from "@demos/MapControlDemo.vue"
 
 ## Control List
 
-- `ol-attribution-control`
-- `ol-context-menu`
-- `ol-fullscreen-control`
-- `ol-mouseposition-control`
-- `ol-overviewmap-control`
-- `ol-rotate-control`
-- `ol-scaleline-control`
-- `ol-swipe-control`
-- `ol-zoom-control`
-- `ol-zoomslider-control`
-- `ol-zoomtoextent-control`
+See menu items on the left.
 
 ## Usage
 
@@ -81,6 +74,43 @@ import MapControlDemo from "@demos/MapControlDemo.vue"
       <input type="checkbox" id="swipecontrol" v-model="showSwipeControl" />
       <label for="swipecontrol">swipe-control</label>
     </li>
+    <li>
+      <input
+        type="checkbox"
+        id="layerswitchercontrol"
+        v-model="showLayerSwitcherControl"
+      />
+      <label for="layerswitchercontrol">layerswitcher-control</label>
+    </li>
+    <li>
+      <input
+        type="checkbox"
+        id="layerswitcherimagecontrol"
+        v-model="showLayerSwitcherImageControl"
+      />
+      <label for="layerswitcherimagecontrol">layerswitcherimage-control</label>
+    </li>
+    <li>
+      <input
+        type="checkbox"
+        id="printdialogcontrol"
+        v-model="showPrintDialogControl"
+      />
+      <label for="printdialogcontrol">printdialog-control</label>
+    </li>
+    <li>
+      <input type="checkbox" id="togglecontrol" v-model="showToggleControl" />
+      <label for="togglecontrol">toggle-control</label>
+    </li>
+
+    <li>
+      <input
+        type="checkbox"
+        id="videorecordercontrol"
+        v-model="showVideoRecorderControl"
+      />
+      <label for="videorecordercontrol">videorecorder-control</label>
+    </li>
   </ul>
 
   <ol-map
@@ -123,6 +153,23 @@ import MapControlDemo from "@demos/MapControlDemo.vue"
       :layerList="layerList"
     />
 
+    <ol-layerswitcher-control
+      v-if="showLayerSwitcherControl && layerList.length > 0"
+    />
+
+    <ol-layerswitcherimage-control
+      v-if="showLayerSwitcherImageControl && layerList.length > 0"
+    />
+
+    <ol-printdialog-control v-if="showPrintDialogControl" />
+
+    <ol-toggle-control v-if="showToggleControl" />
+
+    <ol-videorecorder-control
+      v-if="showVideoRecorderControl"
+      @stop="videoStopped"
+    />
+
     <ol-tile-layer ref="jawgLayer" title="JAWG">
       <ol-source-xyz
         crossOrigin="anonymous"
@@ -157,6 +204,15 @@ const overviewmapcontrol = ref(true);
 const mousepositioncontrol = ref(true);
 const rotatecontrol = ref(true);
 const showSwipeControl = ref(true);
+const showLayerSwitcherControl = ref(true);
+const showLayerSwitcherImageControl = ref(true);
+const showPrintDialogControl = ref(true);
+const showToggleControl = ref(true);
+const showVideoRecorderControl = ref(true);
+
+const videoStopped = (event) => {
+  console.log(event);
+};
 
 onMounted(() => {
   layerList.value.push(jawgLayer.value.tileLayer);

docs/demo.md

@@ -59,33 +59,33 @@ import AppDemo from "@demos/AppDemo.vue"
     </ol-tile-layer>
 
     <ol-control-bar>
-      <ol-control-toggle
+      <ol-toggle-control
         html="<i class='fas fa-map-marker'></i>"
         className="edit"
         title="Point"
         :onToggle="(active) => changeDrawType(active, 'Point')"
       />
-      <ol-control-toggle
+      <ol-toggle-control
         html="<i class='fas fa-draw-polygon'></i>"
         className="edit"
         title="Polygon"
         :onToggle="(active) => changeDrawType(active, 'Polygon')"
       />
-      <ol-control-toggle
+      <ol-toggle-control
         html="<i class='fas fa-circle'></i>"
         className="edit"
         title="Circle"
         :onToggle="(active) => changeDrawType(active, 'Circle')"
       />
-      <ol-control-toggle
+      <ol-toggle-control
         html="<i class='fas fa-grip-lines'></i>"
         className="edit"
         title="LineString"
         :onToggle="(active) => changeDrawType(active, 'LineString')"
       />
       <ol-videorecorder-control @stop="videoStopped">
       </ol-videorecorder-control>
-      <ol-control-printdialog />
+      <ol-printdialog-control />
     </ol-control-bar>
 
     <ol-mouseposition-control />
@@ -105,7 +105,7 @@ import AppDemo from "@demos/AppDemo.vue"
       tipLabel="Fit to Turkey"
     />
 
-    <ol-context-menu :items="contextMenuItems" />
+    <ol-context-menu-control :items="contextMenuItems" />
 
     <ol-interaction-clusterselect @select="featureSelected" :pointRadius="20">
       <ol-style>

src/demos/AppDemo.vue

@@ -41,33 +41,33 @@
     </ol-tile-layer>
 
     <ol-control-bar>
-      <ol-control-toggle
+      <ol-toggle-control
         html="<i class='fas fa-map-marker'></i>"
         className="edit"
         title="Point"
         :onToggle="(active) => changeDrawType(active, 'Point')"
       />
-      <ol-control-toggle
+      <ol-toggle-control
         html="<i class='fas fa-draw-polygon'></i>"
         className="edit"
         title="Polygon"
         :onToggle="(active) => changeDrawType(active, 'Polygon')"
       />
-      <ol-control-toggle
+      <ol-toggle-control
         html="<i class='fas fa-circle'></i>"
         className="edit"
         title="Circle"
         :onToggle="(active) => changeDrawType(active, 'Circle')"
       />
-      <ol-control-toggle
+      <ol-toggle-control
         html="<i class='fas fa-grip-lines'></i>"
         className="edit"
         title="LineString"
         :onToggle="(active) => changeDrawType(active, 'LineString')"
       />
       <ol-videorecorder-control @stop="videoStopped">
       </ol-videorecorder-control>
-      <ol-control-printdialog />
+      <ol-printdialog-control />
     </ol-control-bar>
 
     <ol-mouseposition-control />
@@ -87,7 +87,7 @@
       tipLabel="Fit to Turkey"
     />
 
-    <ol-context-menu :items="contextMenuItems" />
+    <ol-context-menu-control :items="contextMenuItems" />
 
     <ol-interaction-clusterselect @select="featureSelected" :pointRadius="20">
       <ol-style>