Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add example page #11

Merged
merged 4 commits into from
Jun 7, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
combined examples with controls into one example
  • Loading branch information
matthew44-mappable committed Jun 5, 2024
commit 957b7fed577618929667ae0503e8d80f2c2af626
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -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'];
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {LOCATION} from '../common';
import {ENABLED_BEHAVIORS, LOCATION} from '../common';

window.map = null;

Expand All @@ -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>
Expand All @@ -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>
);
}
Expand Down
27 changes: 27 additions & 0 deletions example/controls/vanilla/index.ts
Original file line number Diff line number Diff line change
@@ -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({})
])
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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 />
Expand Down
8 changes: 0 additions & 8 deletions example/geolocation-control/common.ts

This file was deleted.

38 changes: 0 additions & 38 deletions example/geolocation-control/react/index.tsx

This file was deleted.

17 changes: 0 additions & 17 deletions example/geolocation-control/vanilla/index.ts

This file was deleted.

39 changes: 0 additions & 39 deletions example/geolocation-control/vue/index.ts

This file was deleted.

36 changes: 0 additions & 36 deletions example/rotate-tilt-controls/react/index.html

This file was deleted.

40 changes: 0 additions & 40 deletions example/rotate-tilt-controls/react/index.tsx

This file was deleted.

34 changes: 0 additions & 34 deletions example/rotate-tilt-controls/vanilla/index.html

This file was deleted.

30 changes: 0 additions & 30 deletions example/rotate-tilt-controls/vanilla/index.ts

This file was deleted.

Loading
Loading