From 957b7fed577618929667ae0503e8d80f2c2af626 Mon Sep 17 00:00:00 2001 From: Matthew Kalinin Date: Wed, 5 Jun 2024 12:53:41 +0300 Subject: [PATCH 1/4] combined examples with controls into one example --- .../common.css | 0 .../common.ts | 4 +- .../react/index.html | 0 .../react/index.tsx | 20 +++++---- .../vanilla/index.html | 0 example/controls/vanilla/index.ts | 27 ++++++++++++ .../vue/index.html | 0 .../vue/index.ts | 26 ++++++++---- example/geolocation-control/common.ts | 8 ---- example/geolocation-control/react/index.tsx | 38 ----------------- example/geolocation-control/vanilla/index.ts | 17 -------- example/geolocation-control/vue/index.ts | 39 ------------------ example/rotate-tilt-controls/react/index.html | 36 ---------------- example/rotate-tilt-controls/react/index.tsx | 40 ------------------ .../rotate-tilt-controls/vanilla/index.html | 34 --------------- example/rotate-tilt-controls/vanilla/index.ts | 30 -------------- example/rotate-tilt-controls/vue/index.html | 35 ---------------- example/zoom-control/common.css | 0 example/zoom-control/common.ts | 8 ---- example/zoom-control/react/index.html | 37 ----------------- example/zoom-control/vanilla/index.html | 35 ---------------- example/zoom-control/vanilla/index.ts | 18 -------- example/zoom-control/vue/index.html | 36 ---------------- example/zoom-control/vue/index.ts | 41 ------------------- 24 files changed, 61 insertions(+), 468 deletions(-) rename example/{geolocation-control => controls}/common.css (100%) rename example/{rotate-tilt-controls => controls}/common.ts (54%) rename example/{geolocation-control => controls}/react/index.html (100%) rename example/{zoom-control => controls}/react/index.tsx (55%) rename example/{geolocation-control => controls}/vanilla/index.html (100%) create mode 100644 example/controls/vanilla/index.ts rename example/{geolocation-control => controls}/vue/index.html (100%) rename example/{rotate-tilt-controls => controls}/vue/index.ts (60%) delete mode 100644 example/geolocation-control/common.ts delete mode 100644 example/geolocation-control/react/index.tsx delete mode 100644 example/geolocation-control/vanilla/index.ts delete mode 100644 example/geolocation-control/vue/index.ts delete mode 100644 example/rotate-tilt-controls/react/index.html delete mode 100644 example/rotate-tilt-controls/react/index.tsx delete mode 100644 example/rotate-tilt-controls/vanilla/index.html delete mode 100644 example/rotate-tilt-controls/vanilla/index.ts delete mode 100644 example/rotate-tilt-controls/vue/index.html delete mode 100644 example/zoom-control/common.css delete mode 100644 example/zoom-control/common.ts delete mode 100644 example/zoom-control/react/index.html delete mode 100644 example/zoom-control/vanilla/index.html delete mode 100644 example/zoom-control/vanilla/index.ts delete mode 100644 example/zoom-control/vue/index.html delete mode 100644 example/zoom-control/vue/index.ts diff --git a/example/geolocation-control/common.css b/example/controls/common.css similarity index 100% rename from example/geolocation-control/common.css rename to example/controls/common.css diff --git a/example/rotate-tilt-controls/common.ts b/example/controls/common.ts similarity index 54% rename from example/rotate-tilt-controls/common.ts rename to example/controls/common.ts index 9f6ef90..ce83cf2 100644 --- a/example/rotate-tilt-controls/common.ts +++ b/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']; diff --git a/example/geolocation-control/react/index.html b/example/controls/react/index.html similarity index 100% rename from example/geolocation-control/react/index.html rename to example/controls/react/index.html diff --git a/example/zoom-control/react/index.tsx b/example/controls/react/index.tsx similarity index 55% rename from example/zoom-control/react/index.tsx rename to example/controls/react/index.tsx index 62a4b33..e4dcc7a 100644 --- a/example/zoom-control/react/index.tsx +++ b/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( @@ -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 ( - (map = x)}> + (map = x)}> - + + + + + + + ); } diff --git a/example/geolocation-control/vanilla/index.html b/example/controls/vanilla/index.html similarity index 100% rename from example/geolocation-control/vanilla/index.html rename to example/controls/vanilla/index.html diff --git a/example/controls/vanilla/index.ts b/example/controls/vanilla/index.ts new file mode 100644 index 0000000..27c1d28 --- /dev/null +++ b/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({}) + ]) + ); +} diff --git a/example/geolocation-control/vue/index.html b/example/controls/vue/index.html similarity index 100% rename from example/geolocation-control/vue/index.html rename to example/controls/vue/index.html diff --git a/example/rotate-tilt-controls/vue/index.ts b/example/controls/vue/index.ts similarity index 60% rename from example/rotate-tilt-controls/vue/index.ts rename to example/controls/vue/index.ts index 79686df..60d464e 100644 --- a/example/rotate-tilt-controls/vue/index.ts +++ b/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: ` - + + + + + + + + + diff --git a/example/geolocation-control/common.ts b/example/geolocation-control/common.ts deleted file mode 100644 index ca06e2f..0000000 --- a/example/geolocation-control/common.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type {MMapLocationRequest, LngLatBounds} from '@mappable-world/mappable-types'; - -const BOUNDS: LngLatBounds = [ - [54.58311, 25.9985], - [56.30248, 24.47889] -]; - -export const LOCATION: MMapLocationRequest = {bounds: BOUNDS}; diff --git a/example/geolocation-control/react/index.tsx b/example/geolocation-control/react/index.tsx deleted file mode 100644 index fc3ecb8..0000000 --- a/example/geolocation-control/react/index.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import {LOCATION} from '../common'; - -window.map = null; - -main(); -async function main() { - const [mappableReact] = await Promise.all([mappable.import('@mappable-world/mappable-reactify'), mappable.ready]); - const reactify = mappableReact.reactify.bindTo(React, ReactDOM); - - const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = reactify.module(mappable); - - const {useState} = React; - - const {MMapGeolocationControl} = reactify.module( - await mappable.import('@mappable-world/mappable-default-ui-theme') - ); - - ReactDOM.render( - - - , - document.getElementById('app') - ); - - function App() { - const [location] = useState(LOCATION); - - return ( - (map = x)}> - - - - - - - ); - } -} diff --git a/example/geolocation-control/vanilla/index.ts b/example/geolocation-control/vanilla/index.ts deleted file mode 100644 index 55d536b..0000000 --- a/example/geolocation-control/vanilla/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -import {LOCATION} from '../common'; -window.map = null; - -main(); -async function main() { - await mappable.ready; - const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = mappable; - - const {MMapGeolocationControl} = await mappable.import('@mappable-world/mappable-default-ui-theme'); - - map = new MMap(document.getElementById('app'), {location: LOCATION}); - - map.addChild(new MMapDefaultSchemeLayer({})); - map.addChild(new MMapDefaultFeaturesLayer({})); - - map.addChild(new MMapControls({position: 'right'}).addChild(new MMapGeolocationControl({}))); -} diff --git a/example/geolocation-control/vue/index.ts b/example/geolocation-control/vue/index.ts deleted file mode 100644 index 15e6fb1..0000000 --- a/example/geolocation-control/vue/index.ts +++ /dev/null @@ -1,39 +0,0 @@ -import {LOCATION} from '../common'; - -window.map = null; - -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, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = vuefy.module(mappable); - - const {MMapGeolocationControl} = vuefy.module(await mappable.import('@mappable-world/mappable-default-ui-theme')); - - const app = Vue.createApp({ - components: { - MMap, - MMapDefaultSchemeLayer, - MMapDefaultFeaturesLayer, - MMapControls, - MMapGeolocationControl - }, - setup() { - const refMap = (ref: any) => { - window.map = ref?.entity; - }; - const onClick = () => alert('Click!'); - return {LOCATION, refMap, onClick}; - }, - template: ` - - - - - - - ` - }); - app.mount('#app'); -} diff --git a/example/rotate-tilt-controls/react/index.html b/example/rotate-tilt-controls/react/index.html deleted file mode 100644 index b9c642a..0000000 --- a/example/rotate-tilt-controls/react/index.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - React example mappable-default-ui-theme - - - - - - - - - - - - - - -
- - diff --git a/example/rotate-tilt-controls/react/index.tsx b/example/rotate-tilt-controls/react/index.tsx deleted file mode 100644 index 600daf4..0000000 --- a/example/rotate-tilt-controls/react/index.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import {ENABLED_BEHAVIORS, LOCATION} from '../common'; - -window.map = null; - -main(); -async function main() { - // For each object in the JS API, there is a React counterpart - // To use the React version of the API, include the module @mappable-world/mappable-reactify - const [mappableReact] = await Promise.all([mappable.import('@mappable-world/mappable-reactify'), mappable.ready]); - const reactify = mappableReact.reactify.bindTo(React, ReactDOM); - const {MMap, MMapControls, MMapDefaultSchemeLayer} = reactify.module(mappable); - const {MMapRotateTiltControl, MMapTiltControl, MMapRotateControl} = reactify.module( - await mappable.import('@mappable-world/mappable-default-ui-theme') - ); - const {useState} = React; - - function App() { - const [location] = useState(LOCATION); - - return ( - // Initialize the map and pass initialization parameters - (map = x)}> - {/* Add a map scheme layer */} - - - - - - - - ); - } - - ReactDOM.render( - - - , - document.getElementById('app') - ); -} diff --git a/example/rotate-tilt-controls/vanilla/index.html b/example/rotate-tilt-controls/vanilla/index.html deleted file mode 100644 index e4d869a..0000000 --- a/example/rotate-tilt-controls/vanilla/index.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - Vanilla example mappable-default-ui-theme - - - - - - - - - - - - -
- - diff --git a/example/rotate-tilt-controls/vanilla/index.ts b/example/rotate-tilt-controls/vanilla/index.ts deleted file mode 100644 index 4a4c8dd..0000000 --- a/example/rotate-tilt-controls/vanilla/index.ts +++ /dev/null @@ -1,30 +0,0 @@ -import {ENABLED_BEHAVIORS, LOCATION} from '../common'; - -window.map = null; - -main(); -async function main() { - // Waiting for all api elements to be loaded - await mappable.ready; - const {MMap, MMapControls, MMapDefaultSchemeLayer} = mappable; - const {MMapRotateTiltControl, MMapTiltControl, MMapRotateControl} = await mappable.import( - '@mappable-world/mappable-default-ui-theme' - ); - // Initialize the map - map = new MMap( - // Pass the link to the HTMLElement of the container - document.getElementById('app'), - // Pass the map initialization parameters - {location: LOCATION, showScaleInCopyrights: true, behaviors: ENABLED_BEHAVIORS}, - // Add a map scheme layer - [new MMapDefaultSchemeLayer({})] - ); - - map.addChild( - new MMapControls({position: 'right'}, [ - new MMapRotateTiltControl({}), - new MMapRotateControl({}), - new MMapTiltControl({}) - ]) - ); -} diff --git a/example/rotate-tilt-controls/vue/index.html b/example/rotate-tilt-controls/vue/index.html deleted file mode 100644 index 9471aa8..0000000 --- a/example/rotate-tilt-controls/vue/index.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - Vue example mappable-default-ui-theme - - - - - - - - - - - - - -
- - diff --git a/example/zoom-control/common.css b/example/zoom-control/common.css deleted file mode 100644 index e69de29..0000000 diff --git a/example/zoom-control/common.ts b/example/zoom-control/common.ts deleted file mode 100644 index ca06e2f..0000000 --- a/example/zoom-control/common.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type {MMapLocationRequest, LngLatBounds} from '@mappable-world/mappable-types'; - -const BOUNDS: LngLatBounds = [ - [54.58311, 25.9985], - [56.30248, 24.47889] -]; - -export const LOCATION: MMapLocationRequest = {bounds: BOUNDS}; diff --git a/example/zoom-control/react/index.html b/example/zoom-control/react/index.html deleted file mode 100644 index 4183912..0000000 --- a/example/zoom-control/react/index.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - React example mappable-default-ui-theme - - - - - - - - - - - - - - - -
- - diff --git a/example/zoom-control/vanilla/index.html b/example/zoom-control/vanilla/index.html deleted file mode 100644 index 730390e..0000000 --- a/example/zoom-control/vanilla/index.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - Vanilla example mappable-default-ui-theme - - - - - - - - - - - - - -
- - diff --git a/example/zoom-control/vanilla/index.ts b/example/zoom-control/vanilla/index.ts deleted file mode 100644 index a0f61a9..0000000 --- a/example/zoom-control/vanilla/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -import {LOCATION} from '../common'; -window.map = null; - -main(); -async function main() { - await mappable.ready; - const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = mappable; - - const {MMapZoomControl} = await mappable.import('@mappable-world/mappable-default-ui-theme'); - - map = new MMap(document.getElementById('app'), {location: LOCATION}); - - map.addChild(new MMapDefaultSchemeLayer({})); - map.addChild(new MMapDefaultFeaturesLayer({})); - - map.addChild(new MMapControls({position: 'right'}).addChild(new MMapZoomControl({}))); - map.addChild(new MMapControls({position: 'bottom'}).addChild(new MMapZoomControl({}))); -} diff --git a/example/zoom-control/vue/index.html b/example/zoom-control/vue/index.html deleted file mode 100644 index 85eeebd..0000000 --- a/example/zoom-control/vue/index.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - Vue example mappable-default-ui-theme - - - - - - - - - - - - - - -
- - diff --git a/example/zoom-control/vue/index.ts b/example/zoom-control/vue/index.ts deleted file mode 100644 index 11c143c..0000000 --- a/example/zoom-control/vue/index.ts +++ /dev/null @@ -1,41 +0,0 @@ -import {LOCATION} from '../common'; - -window.map = null; - -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, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = vuefy.module(mappable); - - const {MMapZoomControl} = vuefy.module(await mappable.import('@mappable-world/mappable-default-ui-theme')); - - const app = Vue.createApp({ - components: { - MMap, - MMapDefaultSchemeLayer, - MMapDefaultFeaturesLayer, - MMapControls, - MMapZoomControl - }, - setup() { - const refMap = (ref: any) => { - window.map = ref?.entity; - }; - return {LOCATION, refMap}; - }, - template: ` - - - - - - - - - - ` - }); - app.mount('#app'); -} From 4f9be7b909021a27bad8a8125571a5ead45ce0b8 Mon Sep 17 00:00:00 2001 From: Matthew Kalinin Date: Wed, 5 Jun 2024 13:10:34 +0300 Subject: [PATCH 2/4] fix case template --- example/case-template/common.ts | 3 ++- example/case-template/react/index.tsx | 17 ++++++----------- example/case-template/vanilla/index.ts | 12 ++++-------- example/case-template/vue/index.ts | 17 ++++++++--------- 4 files changed, 20 insertions(+), 29 deletions(-) diff --git a/example/case-template/common.ts b/example/case-template/common.ts index ca06e2f..352f4cf 100644 --- a/example/case-template/common.ts +++ b/example/case-template/common.ts @@ -1,8 +1,9 @@ -import type {MMapLocationRequest, LngLatBounds} from '@mappable-world/mappable-types'; +import type {LngLat, LngLatBounds, MMapLocationRequest} from '@mappable-world/mappable-types'; const BOUNDS: LngLatBounds = [ [54.58311, 25.9985], [56.30248, 24.47889] ]; +export const CENTER: LngLat = [55.44279, 25.24107]; export const LOCATION: MMapLocationRequest = {bounds: BOUNDS}; diff --git a/example/case-template/react/index.tsx b/example/case-template/react/index.tsx index 25cf5e7..d1eaf84 100644 --- a/example/case-template/react/index.tsx +++ b/example/case-template/react/index.tsx @@ -1,4 +1,4 @@ -import {LOCATION} from '../common'; +import {CENTER, LOCATION} from '../common'; window.map = null; @@ -9,11 +9,9 @@ async function main() { const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = reactify.module(mappable); - const {useState, useCallback} = React; - - const {MMapZoomControl} = reactify.module(await mappable.import('@mappable-world/mappable-controls@0.0.1')); - - const {MMapButtonExample} = reactify.module(await mappable.import('@mappable-world/mappable-default-ui-theme')); + const {MMapDefaultMarker, MMapZoomControl} = reactify.module( + await mappable.import('@mappable-world/mappable-default-ui-theme') + ); ReactDOM.render( @@ -23,17 +21,14 @@ async function main() { ); function App() { - const [location, setLocation] = useState(LOCATION); - const onClick = useCallback(() => alert('Click!'), []); - return ( - (map = x)}> + (map = x)}> - + ); } diff --git a/example/case-template/vanilla/index.ts b/example/case-template/vanilla/index.ts index 3ad406b..330c33b 100644 --- a/example/case-template/vanilla/index.ts +++ b/example/case-template/vanilla/index.ts @@ -1,4 +1,4 @@ -import {LOCATION} from '../common'; +import {CENTER, LOCATION} from '../common'; window.map = null; main(); @@ -6,17 +6,13 @@ async function main() { await mappable.ready; const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = mappable; - const {MMapZoomControl} = await mappable.import('@mappable-world/mappable-controls@0.0.1'); - const {MMapButtonExample} = await mappable.import('@mappable-world/mappable-default-ui-theme'); + const {MMapDefaultMarker, MMapZoomControl} = await mappable.import('@mappable-world/mappable-default-ui-theme'); map = new MMap(document.getElementById('app'), {location: LOCATION}); map.addChild(new MMapDefaultSchemeLayer({})); map.addChild(new MMapDefaultFeaturesLayer({})); - map.addChild( - new MMapControls({position: 'right'}) - .addChild(new MMapZoomControl({})) - .addChild(new MMapButtonExample({text: 'My button', onClick: () => alert('Click!')})) - ); + map.addChild(new MMapControls({position: 'right'}).addChild(new MMapZoomControl({}))); + map.addChild(new MMapDefaultMarker({coordinates: CENTER, size: 'normal', iconName: 'fallback'})); } diff --git a/example/case-template/vue/index.ts b/example/case-template/vue/index.ts index 63d620d..b624669 100644 --- a/example/case-template/vue/index.ts +++ b/example/case-template/vue/index.ts @@ -1,4 +1,4 @@ -import {LOCATION} from '../common'; +import {CENTER, LOCATION} from '../common'; window.map = null; @@ -9,9 +9,9 @@ async function main() { const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = vuefy.module(mappable); - const {MMapZoomControl} = vuefy.module(await mappable.import('@mappable-world/mappable-controls@0.0.1')); - - const {MMapButtonExample} = vuefy.module(await mappable.import('@mappable-world/mappable-default-ui-theme')); + const {MMapDefaultMarker, MMapZoomControl} = vuefy.module( + await mappable.import('@mappable-world/mappable-default-ui-theme') + ); const app = Vue.createApp({ components: { @@ -19,15 +19,14 @@ async function main() { MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls, - MMapZoomControl, - MMapButtonExample + MMapDefaultMarker, + MMapZoomControl }, setup() { const refMap = (ref: any) => { window.map = ref?.entity; }; - const onClick = () => alert('Click!'); - return {LOCATION, refMap, onClick}; + return {LOCATION, CENTER, refMap}; }, template: ` @@ -35,8 +34,8 @@ async function main() { - + ` }); app.mount('#app'); From 438409b6761c4bcf0a3be194a538872c5e80a12c Mon Sep 17 00:00:00 2001 From: Matthew Kalinin Date: Wed, 5 Jun 2024 13:41:50 +0300 Subject: [PATCH 3/4] fix readme howtouse --- README.md | 35 ++++++++++++++--------------------- 1 file changed, 14 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 79c82fb..835c3f0 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Mappable JS API package [![npm version](https://badge.fury.io/js/%40mappable-world%2Fmappable-default-ui-theme.svg)](https://badge.fury.io/js/%40mappable-world%2Fmappable-default-ui-theme) [![npm](https://img.shields.io/npm/dm/@mappable-world/mappable-default-ui-theme.svg)](https://www.npmjs.com/package/@mappable-world/mappable-default-ui-theme) -[![Build Status](https://github.com/mappable-world/@mappable-world/mappable-default-ui-theme/workflows/Run%20tests/badge.svg)](https://github.com/mappable-world/@mappable-world/mappable-default-ui-theme/actions/workflows/tests.yml) +[![Build Status](https://github.com/mappable-world/mappable-default-ui-theme/workflows/Run%20tests/badge.svg)](https://github.com/mappable-world/@mappable-world/mappable-default-ui-theme/actions/workflows/tests.yml) ## How use @@ -16,10 +16,10 @@ The package is located in the `dist` folder: - `dist/esm` es6 modules for direct connection in your project - `dist/index.js` Mappable JS Module -Recommended use `MMapButtonExample` as usual npm package: +Recommended use `@mappable-world/mappable-default-ui-theme` as usual npm package: ```sh -npm i @mappable-world/mappable-default-ui-theme +npm install @mappable-world/mappable-default-ui-theme ``` and dynamic import @@ -29,36 +29,29 @@ await mappable.ready; // ... -const {MMapButtonExample} = await import('@mappable-world/mappable-default-ui-theme'); +const {MMapZoomControl} = await import('@mappable-world/mappable-default-ui-theme'); // ... -map.addChild(new MMapButtonExample(props)); +map.addChild(new MMapDefaultMarker(props)); ``` ### Usage without npm You can use CDN with module loading handler in JS API on your page. -Just use `mappable.import`: - -```js -const pkg = await mappable.import('@mappable-world/mappable-default-ui-theme'); -``` - By default `mappable.import` can load self modules. -If you want also load your package, should add `loader`: +Just use `mappable.registerCdn` and `mappable.import`: ```js -// Add loader at start loaders array -mappable.import.loaders.unshift(async (pkg) => { - // Process only your package - if (!pkg.includes('@mappable-world/mappable-default-ui-theme')) return; +// register in `mappable.import` which CDN to take the package from +mappable.import.registerCdn( + 'https://cdn.jsdelivr.net/npm/{package}', + '@mappable-world/mappable-default-ui-theme@latest' +); - // Load script directly. You can use another CDN - await mappable.import.script(`https://unpkg.com/${pkg}/dist/index.js`); +// ... - // Return result object - return window['@mappable-world/mappable-default-ui-theme']; -}); +// import package from CDN +const pkg = await mappable.import('@mappable-world/mappable-default-ui-theme'); ``` From 3ee1510d4a825590a6a7e6f0f68030d1360e150b Mon Sep 17 00:00:00 2001 From: Matthew Kalinin Date: Thu, 6 Jun 2024 12:33:26 +0300 Subject: [PATCH 4/4] add docs page --- .github/workflows/gh-pages.yml | 38 +++++++++++ README.md | 4 ++ example/README.md | 113 +++++++++++++++++++++++++++++++++ package.json | 2 +- 4 files changed, 156 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/gh-pages.yml create mode 100644 example/README.md diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml new file mode 100644 index 0000000..250f617 --- /dev/null +++ b/.github/workflows/gh-pages.yml @@ -0,0 +1,38 @@ +name: GitHub Pages + +on: + push: + branches: + - main + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 #Setup Node + with: + node-version-file: '.nvmrc' + cache: 'npm' + - run: npm ci + - run: APIKEY=${{ secrets.APIKEY }} npm run build + - run: APIKEY=${{ secrets.APIKEY }} npm run examples + - name: Upload Pages artifact + uses: actions/upload-pages-artifact@v2 + with: + path: ./dist/example + + deploy: + needs: build + permissions: + pages: write # to deploy to Pages + id-token: write + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + + runs-on: ubuntu-latest + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v2 diff --git a/README.md b/README.md index 835c3f0..d9f4c6f 100644 --- a/README.md +++ b/README.md @@ -55,3 +55,7 @@ mappable.import.registerCdn( // import package from CDN const pkg = await mappable.import('@mappable-world/mappable-default-ui-theme'); ``` + +## More about working with the package + +Read more about working with the package in the [documentation](https://mappable-world.github.io/mappable-default-ui-theme/). diff --git a/example/README.md b/example/README.md new file mode 100644 index 0000000..dd8219f --- /dev/null +++ b/example/README.md @@ -0,0 +1,113 @@ +# Working with the package + +This package contains a range of pre-designed user interface elements for your map. +This guide will provide you with detailed instructions on how to incorporate these +elements into your map and customize them to suit your specific requirements. +Live examples of how they can be used, along with links to the relevant code, will also be provided. + +## Controls + +This section presents all UI components that belong to the category of controls. +These include simple zoom and tilt controls, as well as more advanced controls such as the search control. + +### Simple controls + +This type of controls includes the following: + +- `MMapGeolocationControl` – Display geolocation control on a map +- `MMapZoomControl` – Display zoom control on a map +- `MMapRotateControl` – Display rotate control on a map +- `MMapTiltControl` – Display tilt control on a map +- `MMapRotateTiltControl` – Display rotate and tilt in one control + +The `MMapZoomControl`, `MMapRotateControl`, `MMapTiltControl`, `MMapRotateTiltControl` controls have the same props: + +| Props name | Description | +| ---------- | ----------------------------------------------------- | +| easing | Easing function for map location animation (optional) | +| duration | Map location animate duration (optional) | + +The parameters for the `MMapGeolocationControl` are slightly different: + +| Props name | Description | +| ------------------- | ------------------------------------------ | +| onGeolocatePosition | Geolocation request callback | +| source | Data source id for geolocation placemark | +| easing | Easing function for map location animation | +| duration | Map location animate duration | + +See a [live-example](./controls/vanilla/index.html) with simple controls. + +### Rich controls + +More comprehensive controls include the following classes:: + +- `MMapSearchControl` – adds a control to the map in the form of a search bar. + It also has built-in suggest hints when entering the name of a place or organization. + +`MMapSearchControl` has the following parameters: + +| Props name | Description | +| ------------ | ------------------------------------------------------------------------------------- | +| search | A function that overrides the search function. By default, `mappable.search` is used. | +| suggest | A function that overrides the hint function. By default, `mappable.suggest` is used | +| searchResult | The callback that receives the search results. | + +`MMapSearchControl` does not display markers on the map, it only returns coordinates and location parameters, +the developer is responsible for displaying them on the map. +There is a [live example](./search-control/vanilla/index.html) that demonstrates the possibilities of search control. + +## Markers and popups + +Markers are UI components that are linked to a coordinate on the map. +These components include the following classes: + +- `MMapDefaultMarker` – a marker on the map. It can be of different sizes and contain an icon from a ready-made preset. +- `MMapPopupMarker` – a pop-up on the map with custom content. + It may have a different position relative to the point it points to. + +All markers have parameters from the [MMapMarker](https://mappable.world/docs/js-api/ref/index.html#MMapMarkerProps) base class. +But there are also specific parameters for each type of marker. + +For `MMapDefaultMarker`: + +| Props name | Description | +| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| iconName | The name of the icon from the ready-made [icons preset](https://github.com/mappable-world/mappable-default-ui-theme/blob/main/docs/icons.generated.md) | +| color | The name of the color from the ready-made colors preset or an object indicating the color for the day and night mode | +| size | The size of the marker. 3 sizes are available: `normal`, `small`, `micro`; | +| title | The title to display in the marker hint | +| subtitle | The subtitle to display in the marker hint | +| staticHint | A flag to indicate that the hint is static or appears when the mouse hovers over the marker | +| popup | The parameters for the embedded got into the marker | + +There are 2 live examples for `MMapDefaultMarker`: + +- [Displaying markers on the map](./default-markers/vanilla/index.html) +- [Pop-up displays at the marker](./marker-popup/vanilla/index.html) + +For `MMapPopupMarker`: + +| Props name | Description | +| ---------- | ------------------------------------------------------------------------------- | +| content | The function of creating popup content | +| position | The position of the popup in relation to the point it is pointing to | +| offset | The offset in pixels between the popup pointer and the point it is pointing to. | +| show | Hide or show popup on map | +| onClose | Popup closing callback | +| onOpen | Popup opening callback | + +There is a [live example](./popups-on-map/vanilla/index.html) for `MMapPopupMarker` to demonstrate the possibilities of its operation. + +## Examples + +- [Add controls to the map](./controls/vanilla/index.html) + ([source code](https://github.com/mappable-world/mappable-default-ui-theme/tree/main/example/controls)) +- [Add markers to the map](./default-markers/vanilla/index.html) + ([source code](https://github.com/mappable-world/mappable-default-ui-theme/tree/main/example/default-markers)) +- [Add a marker with a popup to the map](./marker-popup/vanilla/index.html) + ([source code](https://github.com/mappable-world/mappable-default-ui-theme/tree/main/example/marker-popup)) +- [Add a popup with custom content to the map](./popups-on-map/vanilla/index.html) + ([source code](https://github.com/mappable-world/mappable-default-ui-theme/tree/main/example/popups-on-map)) +- [Adding a search control to the map](./search-control/vanilla/index.html) + ([source code](https://github.com/mappable-world/mappable-default-ui-theme/tree/main/example/search-control)) diff --git a/package.json b/package.json index 3ff8969..1a90b3d 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "build:dev": "webpack --mode=development", "build:prod": "webpack --mode=production --node-env=production", "build:esm": "rm -rf ./dist/esm && tsc --project tsconfig.build.json --target es2018 --module es6 --outDir dist/esm", - "examples": "mappable-cli example --input=example --output=dist/example", + "examples": "mappable-cli example --input=example --output=dist/example --readmeFile=example/README.md --templateFile=example/index.html", "watch": "webpack --watch", "start": "webpack serve", "bump": "npm version prerelease --preid=beta --no-git-tag-version && npm run bump:git",