combined examples with controls into one example

example/rotate-tilt-controls/common.ts → example/controls/common.ts

@@ -1,9 +1,9 @@
-import {BehaviorType, LngLatBounds, MMapBoundsLocation} from '@mappable-world/mappable-types';
+import type {MMapLocationRequest, LngLatBounds, BehaviorType} from '@mappable-world/mappable-types';
 
 const BOUNDS: LngLatBounds = [
     [54.58311, 25.9985],
     [56.30248, 24.47889]
 ];
 
-export const LOCATION: MMapBoundsLocation = {bounds: BOUNDS};
+export const LOCATION: MMapLocationRequest = {bounds: BOUNDS};
 export const ENABLED_BEHAVIORS: BehaviorType[] = ['drag', 'scrollZoom', 'dblClick', 'mouseTilt', 'mouseRotate'];

example/zoom-control/react/index.tsx → example/controls/react/index.tsx

@@ -1,4 +1,4 @@
-import {LOCATION} from '../common';
+import {ENABLED_BEHAVIORS, LOCATION} from '../common';
 
 window.map = null;
 
@@ -9,9 +9,8 @@ async function main() {
 
     const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = reactify.module(mappable);
 
-    const {useState} = React;
-
-    const {MMapZoomControl} = reactify.module(await mappable.import('@mappable-world/mappable-default-ui-theme'));
+    const {MMapGeolocationControl, MMapRotateControl, MMapRotateTiltControl, MMapTiltControl, MMapZoomControl} =
+        reactify.module(await mappable.import('@mappable-world/mappable-default-ui-theme'));
 
     ReactDOM.render(
         <React.StrictMode>
@@ -21,18 +20,25 @@ async function main() {
     );
 
     function App() {
-        const [location] = useState(LOCATION);
+        const location = React.useMemo(() => LOCATION, []);
+        const behaviors = React.useMemo(() => ENABLED_BEHAVIORS, []);
 
         return (
-            <MMap location={location} ref={(x) => (map = x)}>
+            <MMap location={location} behaviors={behaviors} ref={(x) => (map = x)}>
                 <MMapDefaultSchemeLayer />
                 <MMapDefaultFeaturesLayer />
-                <MMapControls position="right">
+                <MMapControls position="left">
                     <MMapZoomControl />
+                    <MMapGeolocationControl />
                 </MMapControls>
                 <MMapControls position="bottom">
                     <MMapZoomControl />
                 </MMapControls>
+                <MMapControls position="right">
+                    <MMapRotateTiltControl />
+                    <MMapRotateControl />
+                    <MMapTiltControl />
+                </MMapControls>
             </MMap>
         );
     }

example/controls/vanilla/index.ts

@@ -0,0 +1,27 @@
+import {ENABLED_BEHAVIORS, LOCATION} from '../common';
+window.map = null;
+
+main();
+async function main() {
+    await mappable.ready;
+    const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = mappable;
+
+    const {MMapGeolocationControl, MMapRotateControl, MMapRotateTiltControl, MMapTiltControl, MMapZoomControl} =
+        await mappable.import('@mappable-world/mappable-default-ui-theme');
+
+    map = new MMap(
+        document.getElementById('app'),
+        {location: LOCATION, showScaleInCopyrights: true, behaviors: ENABLED_BEHAVIORS},
+        [new MMapDefaultSchemeLayer({}), new MMapDefaultFeaturesLayer({})]
+    );
+
+    map.addChild(new MMapControls({position: 'left'}, [new MMapZoomControl({}), new MMapGeolocationControl({})]));
+    map.addChild(new MMapControls({position: 'bottom'}, [new MMapZoomControl({})]));
+    map.addChild(
+        new MMapControls({position: 'right'}, [
+            new MMapRotateTiltControl({}),
+            new MMapRotateControl({}),
+            new MMapTiltControl({})
+        ])
+    );
+}

example/rotate-tilt-controls/vue/index.ts → example/controls/vue/index.ts

@@ -6,18 +6,22 @@ main();
 async function main() {
     const [mappableVue] = await Promise.all([mappable.import('@mappable-world/mappable-vuefy'), mappable.ready]);
     const vuefy = mappableVue.vuefy.bindTo(Vue);
-    const {MMap, MMapControls, MMapDefaultSchemeLayer} = vuefy.module(mappable);
-    const {MMapRotateTiltControl, MMapTiltControl, MMapRotateControl, MMapZoomControl} = vuefy.module(
-        await mappable.import('@mappable-world/mappable-default-ui-theme')
-    );
+
+    const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = vuefy.module(mappable);
+
+    const {MMapGeolocationControl, MMapRotateControl, MMapRotateTiltControl, MMapTiltControl, MMapZoomControl} =
+        vuefy.module(await mappable.import('@mappable-world/mappable-default-ui-theme'));
+
     const app = Vue.createApp({
         components: {
             MMap,
-            MMapControls,
             MMapDefaultSchemeLayer,
+            MMapDefaultFeaturesLayer,
+            MMapControls,
+            MMapGeolocationControl,
+            MMapRotateControl,
             MMapRotateTiltControl,
             MMapTiltControl,
-            MMapRotateControl,
             MMapZoomControl
         },
         setup() {
@@ -27,8 +31,16 @@ async function main() {
             return {LOCATION, ENABLED_BEHAVIORS, refMap};
         },
         template: `
-            <MMap :location="LOCATION" :behaviors="ENABLED_BEHAVIORS" :showScaleInCopyrights="true" :ref="refMap">
+            <MMap :location="LOCATION" :behaviors="ENABLED_BEHAVIORS" :ref="refMap">
                 <MMapDefaultSchemeLayer />
+                <MMapDefaultFeaturesLayer />
+                <MMapControls position="left">
+                    <MMapZoomControl />
+                    <MMapGeolocationControl />
+                </MMapControls>
+                <MMapControls position="bottom">
+                    <MMapZoomControl />
+                </MMapControls>
                 <MMapControls position="right">
                     <MMapRotateTiltControl />
                     <MMapRotateControl />