A hint about scrolling the map
vanilla.html
react.html
vue.html
variables.ts
variables.css
common.ts
common.css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
<!-- To make the map appear, you must add your apikey -->
<script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
<script
data-plugins="transform-modules-umd"
data-presets="typescript"
type="text/babel"
src="../variables.ts"
></script>
<script
data-plugins="transform-modules-umd"
data-presets="typescript"
type="text/babel"
src="./common.ts"
></script>
<script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
import {LOCATION} from '../variables';
import {createDebouncedTimeout, isTouchDevice} from './common';
window.map = null;
main();
async function main() {
// Waiting for all api elements to be loaded
await mappable.ready;
const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapListener} = mappable;
const debouncedTimeout = createDebouncedTimeout();
// 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,
},
[
// Add a map scheme layer
new MMapDefaultSchemeLayer({}),
// Add a layer of geo objects to display the line
new MMapDefaultFeaturesLayer({})
]
);
const scrollEvent = (event: WheelEvent) => {
const hintElement = document.getElementById('hint');
if (event.ctrlKey || event.metaKey) {
hintElement.classList.add('hidden');
} else {
hintElement.classList.remove('hidden');
event.stopPropagation();
debouncedTimeout(() => {
hintElement.classList.add('hidden');
}, 500);
}
};
const dragListener = new MMapListener({
onActionStart: (event) => {
if (event.type === 'drag' && isTouchDevice()) {
const hintElement = document.getElementById('hint');
const hintTextElement = hintElement.getElementsByClassName('text')[0];
if (event.points.length < 2) {
hintTextElement.textContent = 'Use two fingers to drag the map';
hintElement.classList.remove('hidden');
debouncedTimeout(() => {
hintElement.classList.add('hidden');
}, 1000);
event.preventDefault();
} else {
hintElement.classList.add('hidden');
}
}
},
});
const container = document.getElementById('container');
container.addEventListener('wheel', scrollEvent, {passive: false, capture: true});
map.addChild(dragListener);
}
</script>
<style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; } </style>
<link rel="stylesheet" href="./common.css" />
<link rel="stylesheet" href="../variables.css" />
</head>
<body>
<div id="container" class="container">
<div id="hint" class="hint hidden">
<div class="text">Use<span class="command">⌘/Ctrl + scroll</span>to zoom</div>
</div>
<div id="app"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<script crossorigin src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
<!-- To make the map appear, you must add your apikey -->
<script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
<script
data-plugins="transform-modules-umd"
data-presets="typescript"
type="text/babel"
src="../variables.ts"
></script>
<script
data-plugins="transform-modules-umd"
data-presets="typescript"
type="text/babel"
src="./common.ts"
></script>
<script data-plugins="transform-modules-umd" data-presets="react, typescript" type="text/babel">
import {LOCATION} from '../variables';
import {createDebouncedTimeout, isTouchDevice} 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, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapListener} = reactify.module(mappable);
const {useState, useEffect, useCallback, useRef} = React;
const debouncedTimeout = createDebouncedTimeout();
function App() {
const [show, setShow] = useState(false);
const [hintText, setHintText] = useState('⌘/Ctrl + scroll');
const containerRef = useRef(null);
const scrollEvent = useCallback((event: WheelEvent) => {
if (event.ctrlKey || event.metaKey) {
setShow(false);
} else {
setShow(true);
event.stopPropagation();
debouncedTimeout(() => {
setShow(false);
}, 500);
}
}, []);
useEffect(() => {
if (!containerRef.current || isTouchDevice()) {
return;
}
containerRef.current.addEventListener('wheel', scrollEvent, {passive: false, capture: true});
return () => containerRef?.current.removeEventListener('wheel', scrollEvent);
}, []);
const onActionStart = useCallback((event) => {
if (event.type === 'drag' && isTouchDevice()) {
setHintText('2 fingers');
if (event.points.length < 2) {
setShow(true);
event.preventDefault();
debouncedTimeout(() => {
setShow(false);
}, 1000);
} else {
setShow(false);
}
}
}, []);
return (
<div ref={containerRef} id="container" className="container" >
<div className={`hint ${show ? '' : 'hidden'}`}>
<div className="text">
Use
<span className="command">{hintText}</span>
to interact with the map
</div>
</div>
{/* Initialize the map and pass initialization parameters*/}
<MMap
location={LOCATION}
showScaleInCopyrights={true}
ref={(x) => (map = x)}
>
{/* Add a map scheme layer */}
<MMapDefaultSchemeLayer />
{/* Add a layer of geo objects to display the line */}
<MMapDefaultFeaturesLayer />
<MMapListener onActionStart={onActionStart} />
</MMap>
</div>
);
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('app')
);
}
</script>
<style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; } </style>
<link rel="stylesheet" href="./common.css" />
<link rel="stylesheet" href="../variables.css" />
</head>
<body>
<div id="app"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<script crossorigin src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
<!-- To make the map appear, you must add your apikey -->
<script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
<script
data-plugins="transform-modules-umd"
data-presets="typescript"
type="text/babel"
src="../variables.ts"
></script>
<script
data-plugins="transform-modules-umd"
data-presets="typescript"
type="text/babel"
src="./common.ts"
></script>
<script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
import {LOCATION} from '../variables';
import {createDebouncedTimeout, isTouchDevice} from './common';
window.map = null;
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, MMapListener} = vuefy.module(mappable);
const debouncedTimeout = createDebouncedTimeout();
const App = Vue.createApp({
components: {
MMap,
MMapDefaultSchemeLayer,
MMapDefaultFeaturesLayer,
MMapListener
},
setup() {
const refMap = (ref) => {
window.map = ref?.entity;
};
const show = Vue.ref(false);
const hintText = Vue.ref("⌘/Ctrl + scroll");
const scrollEvent = (event: WheelEvent) => {
if (event.ctrlKey || event.metaKey) {
show.value = false;
} else {
show.value = true;
event.stopPropagation();
debouncedTimeout(() => {
show.value = false;
}, 500);
}
};
const handleActionStart = (event) => {
if (event.type === 'drag' && isTouchDevice()) {
hintText.value = "2 fingers";
if (event.points.length < 2) {
show.value = true;
event.preventDefault();
debouncedTimeout(() => {
show.value = false;
}, 1000);
} else {
show.value = false;
}
}
}
Vue.onUnmounted(() => {
const container = document.getElementById('container');
container.removeEventListener('wheel', scrollEvent);
});
Vue.onMounted(() => {
const container = document.getElementById('container');
container.addEventListener('wheel', scrollEvent, {passive: false, capture: true});
});
return {
refMap,
LOCATION,
show,
hintText,
handleActionStart
};
},
template: `
<div id="container" class="container">
<div :class="[show ? '' : 'hidden', 'hint']">
<div class="text">
Use<span class="command" v-html="hintText"></span>to interact with the map
</div>
</div>
<MMap
:location="LOCATION"
:ref="refMap"
:showScaleInCopyrights="true"
>
<MMapDefaultSchemeLayer />
<MMapDefaultFeaturesLayer />
<MMapListener :onActionStart="handleActionStart"/>
</MMap>
</div>
`
});
App.mount('#app');
}
main();
</script>
<style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; } </style>
<link rel="stylesheet" href="./common.css" />
<link rel="stylesheet" href="../variables.css" />
</head>
<body>
<div id="app"></div>
</body>
</html>
import type {MMapLocationRequest} from '@mappable-world/mappable-types';
export const LOCATION: MMapLocationRequest = {
center: [55.2811, 25.2239], // starting position [lng, lat]
zoom: 14.2 // starting zoom
};
:root {
--color-bg-overlay: rgba(5, 13, 51, 0.4);
}
export function createDebouncedTimeout() {
let timeoutId = null;
return function (callback: () => void, delay: number) {
if (timeoutId !== null) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => {
callback();
timeoutId = null;
}, delay);
};
}
/**
* Determines if this device is likely to have touch interface
*/
export function isTouchDevice(): boolean {
return (
'ontouchstart' in window ||
navigator.maxTouchPoints > 0 ||
(navigator as any).msMaxTouchPoints > 0 ||
!window.matchMedia('(hover: hover)').matches
);
}
.container {
width: 100%;
height: 100%;
position: relative;
}
.hint {
width: 100%;
display: flex;
height: 100%;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
background-color: var(--color-bg-overlay);
user-select: none;
z-index: 10;
visibility: visible;
transition: all 0.4s ease-in-out;
opacity: 1;
}
.hint.hidden {
visibility: hidden;
opacity: 0;
}
.text {
display: flex;
color: #f2f5fa;
font-size: 16px;
gap: 4px;
align-items: center;
font-weight: 500;
line-height: 21px;
}
.command {
height: 20px;
border-radius: 4px;
padding: 2px 6px;
background-color: #050d3366;
vertical-align: center;
}