Add a label with your own image
vanilla.html
common.css
common.js
pin.svg
react.html
vue.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
<script src="./common.js"></script>
<script>
window.map = null;
main();
async function main() {
await mappable.ready;
const {MMap, MMapDefaultSchemeLayer, MMapControls, MMapDefaultFeaturesLayer, MMapMarker} = mappable;
const {MMapZoomControl} = await mappable.import('@mappable-world/mappable-controls@0.0.1');
map = new MMap(document.getElementById('app'), {location: LOCATION});
map.addChild((scheme = new MMapDefaultSchemeLayer()));
map.addChild(new MMapDefaultFeaturesLayer());
map.addChild(new MMapControls({position: 'right'}).addChild(new MMapZoomControl({})));
const el = document.createElement('img');
el.className = 'my-marker';
el.src = './pin.svg';
el.onclick = () => map.update({location: {...LOCATION, duration: 400}});
map.addChild(new MMapMarker({coordinates: LOCATION.center}, el));
}
</script>
<!-- prettier-ignore -->
<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" />
</head>
<body>
<div id="app"></div>
</body>
</html>
.my-marker {
position: relative;
box-sizing: border-box;
transform: translate(-50%, calc(-50% - 24px));
cursor: pointer;
}
const LOCATION = {center: [55.44279, 25.24613], zoom: 9};
<svg width="58" height="67" viewBox="0 0 58 67" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter)">
<path d="M34.342 49.376c-3.076.93-4.687 2.979-4.831 6.147a.5.5 0 0 1-.5.477h-.022a.5.5 0 0 1-.5-.477c-.144-3.168-1.755-5.217-4.831-6.147C13.53 46.968 6 37.863 6 27 6 14.297 16.297 4 29 4s23 10.297 23 23c0 10.863-7.531 19.968-17.658 22.376z" fill="#f00" />
</g>
<path d="M29 67a4 4 0 1 1 0-8 4 4 0 0 1 0 8z" fill="#fff" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M29 65a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#f00" />
<defs>
<filter id="filter" x="0" y="0" width="58" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="3" />
<feColorMatrix values="0 0 0 0 0.4 0 0 0 0 0.396078 0 0 0 0 0.380392 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_9595_81428" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow_9595_81428" result="shape" />
</filter>
</defs>
</svg>
<!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://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
<script src="./common.js"></script>
<script type="text/babel">
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, MMapControls, MMapDefaultFeaturesLayer, MMapMarker} =
reactify.module(mappable);
const {useState} = React;
const {MMapZoomControl} = reactify.module(await mappable.import('@mappable-world/mappable-controls@0.0.1'));
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('app')
);
function App() {
const [location, setLocation] = useState(LOCATION);
return (
<MMap location={location} ref={(x) => (map = x)}>
<MMapDefaultSchemeLayer />
<MMapDefaultFeaturesLayer />
<MMapControls position="right">
<MMapZoomControl />
</MMapControls>
<MMapMarker coordinates={LOCATION.center}>
<img
src="./pin.svg"
className="my-marker"
onClick={() => setLocation({...LOCATION, duration: 400})}
/>
</MMapMarker>
</MMap>
);
}
}
</script>
<!-- prettier-ignore -->
<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" />
</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://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
<script src="./common.js"></script>
<script>
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, MMapControls, MMapDefaultFeaturesLayer, MMapMarker} =
vuefy.module(mappable);
const {MMapZoomControl} = vuefy.module(await mappable.import('@mappable-world/mappable-controls@0.0.1'));
const app = Vue.createApp({
components: {
MMap,
MMapDefaultSchemeLayer,
MMapControls,
MMapDefaultFeaturesLayer,
MMapMarker,
MMapZoomControl
},
setup() {
const mapLocation = Vue.ref(LOCATION);
const markerCoordinates = Vue.ref(LOCATION.center);
const updateMapLocation = () => {
mapLocation.value = {...LOCATION, duration: 400};
};
const refMap = (ref) => {
window.map = ref?.entity;
};
return {mapLocation, markerCoordinates, updateMapLocation, refMap};
},
template: `
<MMap :location="mapLocation" :ref="refMap">
<MMapDefaultSchemeLayer />
<MMapDefaultFeaturesLayer />
<MMapControls position="right">
<MMapZoomControl></MMapZoomControl>
</MMapControls>
<MMapMarker :coordinates="markerCoordinates">
<img src="./pin.svg" className="my-marker" @click="updateMapLocation" />
</MMapMarker>
</MMap>
`
});
app.mount('#app');
}
</script>
<!-- prettier-ignore -->
<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" />
</head>
<body>
<div id="app"></div>
</body>
</html>