Basic parameters
vanilla.html
common.css
common.js
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} = mappable;
map = new MMap(document.getElementById('app'), {location: LOCATION});
map.addChild((scheme = new MMapDefaultSchemeLayer()));
}
function setCenter() {
map.setLocation({
center: [58.74507, 27.26085]
});
}
function setBounds() {
// Bounds - the boundaries of the visible area of the map.
// Specified in geographic coordinates of the most southeastern and most northwestern points of the visible area.
map.setLocation({
bounds: [
[55.42637, 25.24864],
[55.46225, 25.23789]
]
});
}
async function setTypeAndPan() {
const {MMapTileDataSource, MMapLayer} = mappable;
map.removeChild(scheme);
// Change the map type to "Satellite".
const dataSource = new MMapTileDataSource(dataSourceProps);
const layer = new MMapLayer(layerProps);
map.addChild(dataSource).addChild(layer);
// Moving the center of the map to a point with new coordinates.
map.setLocation(NEW_LOCATION);
const {SphericalMercator} = await mappable.import(
'@mappable-world/mappable-spherical-mercator-projection@0.0.1'
);
map.update({
projection: new SphericalMercator()
});
}
mappable.ready.then(() => {
changeCenter.onclick = setCenter;
changeBounds.onclick = setBounds;
changeTypeAndPan.onclick = setTypeAndPan;
});
</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 class="toolbar">
<button type="button" id="changeCenter">Change center</button>
<button type="button" id="changeBounds">Change borders</button>
<button type="button" id="changeTypeAndPan">Change type and move</button>
</div>
<div id="app"></div>
</body>
</html>
#app {
height: calc(100vh - 32px);
}
const LOCATION = {center: [55.44279, 25.24613], zoom: 9};
const dataSourceProps = {
id: 'osm-satellite',
copyrights: ['© OpenStreetMap contributors, CC-BY-SA'],
raster: {
type: 'ground',
fetchTile: 'https://tile.openstreetmap.org/z/x/y.png'
},
zoomRange: {min: 0, max: 19},
clampMapZoom: true
};
const layerProps = {
id: 'satellite',
source: 'osm-satellite',
type: 'ground',
options: {
raster: {
awaitAllTilesOnFirstDisplay: true
}
}
};
const NEW_LOCATION = {
center: [-73.98055350000001, 40.70696053904341],
zoom: 10,
duration: 1000
};
<!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, MMapTileDataSource, MMapLayer} = reactify.module(mappable);
function App() {
const [location, setLocation] = React.useState(LOCATION);
const [projection, setProjection] = React.useState(undefined);
const changeCenter = React.useCallback(() => {
setLocation({
center: [58.74507, 27.26085]
});
}, [setLocation]);
const setBounds = React.useCallback(() => {
setLocation({
bounds: [
[55.42637, 25.24864],
[55.46225, 25.23789]
]
});
}, [setLocation]);
const setTypeAndPan = React.useCallback(async () => {
const {SphericalMercator} = await mappable.import(
'@mappable-world/mappable-spherical-mercator-projection@0.0.1'
);
setProjection(new SphericalMercator());
// Moving the center of the map to a point with new coordinates.
setLocation(NEW_LOCATION);
}, [setProjection, setLocation]);
return (
<React.Fragment>
<div className="toolbar">
<button type="button" onClick={changeCenter}>
Change center
</button>
<button type="button" onClick={setBounds}>
Change borders
</button>
<button type="button" onClick={setTypeAndPan}>
Change type and move
</button>
</div>
<MMap location={location} ref={(x) => (map = x)} projection={projection}>
{projection === undefined ? (
<MMapDefaultSchemeLayer />
) : (
<React.Fragment>
<MMapTileDataSource {...dataSourceProps} />
<MMapLayer {...layerProps} />
</React.Fragment>
)}
</MMap>
</React.Fragment>
);
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('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>
<!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, MMapTileDataSource, MMapLayer} = vuefy.module(mappable);
const app = Vue.createApp({
components: {MMap, MMapDefaultSchemeLayer, MMapTileDataSource, MMapLayer},
setup() {
const location = Vue.ref(LOCATION);
const type = Vue.ref('mappable');
const projection = Vue.ref(undefined);
const dataSource = Vue.ref(dataSourceProps);
const layer = Vue.ref(layerProps);
const refMap = (ref) => {
window.map = ref?.entity;
};
return {location, type, projection, dataSource, layer, refMap};
},
methods: {
changeCenter() {
this.location = {
center: [58.74507, 27.26085]
};
},
setBounds() {
this.location = {
bounds: [
[55.42637, 25.24864],
[55.46225, 25.23789]
]
};
},
async setTypeAndPan() {
const {SphericalMercator} = await mappable.import(
'@mappable-world/mappable-spherical-mercator-projection@0.0.1'
);
this.type = 'osm';
this.location = NEW_LOCATION;
this.projection = new SphericalMercator();
}
},
template: `
<div className="toolbar">
<button type="button" @click="changeCenter">
Change center
</button>
<button type="button" @click="setBounds">
Change borders
</button>
<button type="button" @click="setTypeAndPan">
Change type and move
</button>
</div>
<MMap :location="location" :projection="projection" :ref="refMap">
<MMapDefaultSchemeLayer v-if="type === 'mappable'"/>
<template v-else>
<MMapTileDataSource v-bind="dataSource" />
<MMapLayer v-bind="layer" />
</template>
</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>