Polygon
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, MMapFeature, MMapDefaultFeaturesLayer, MMapControls} = 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 MMapControls({position: 'right'}).addChild(new MMapZoomControl({})));
map.addChild(new MMapDefaultFeaturesLayer());
map.addChild(new MMapFeature(FEATURE1));
map.addChild(new MMapFeature(FEATURE2));
}
</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>
const LOCATION = {center: [55.42071, 25.16759], zoom: 11};
const FEATURE1 = {
id: 'one',
draggable: true,
geometry: {
type: 'Polygon',
coordinates: [
// The coordinates of the vertices of the outer contour.
[
[55.61971, 25.24359],
[55.71971, 25.29359],
[55.81971, 25.24359],
[55.81971, 25.19359],
[55.61971, 25.19359]
],
// The coordinates of the vertices of the inner contour.
[
[55.63971, 25.24359],
[55.79971, 25.24359],
[55.71971, 25.14359]
]
]
},
style: {
fillRule: 'nonZero',
fill: '#00FF00',
fillOpacity: 0.9,
stroke: [
{
color: '#0000FF',
// Stroke width.
width: 5,
// Stroke style.
dash: [4, 8]
}
]
}
};
const FEATURE2 = {
id: 'second',
geometry: {
type: 'Polygon',
coordinates: [
// Specify the coordinates of the vertices of the polygon.
// The coordinates of the vertices of the outer contour.
[
[55.31971, 25.24359],
[55.41971, 25.29359],
[55.51971, 25.24359],
[55.51971, 25.19359],
[55.31971, 25.19359]
],
// The coordinates of the vertices of the inner contour.
[
[55.33971, 25.24359],
[55.49971, 25.24359],
[55.41971, 25.14359]
]
]
},
style: {
fill: '#00FF0088',
stroke: [{color: '#f66e30', width: 5}]
}
};
<!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, MMapFeature, MMapDefaultFeaturesLayer, MMapControls} =
reactify.module(mappable);
const {MMapZoomControl} = reactify.module(await mappable.import('@mappable-world/mappable-controls@0.0.1'));
function App() {
return (
<React.Fragment>
<MMap location={LOCATION} ref={(x) => (map = x)}>
<MMapDefaultSchemeLayer />
<MMapDefaultFeaturesLayer />
<MMapFeature {...FEATURE1} />
<MMapFeature {...FEATURE2} />
<MMapControls position="right">
<MMapZoomControl />
</MMapControls>
</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, MMapFeature, MMapDefaultFeaturesLayer, MMapControls} =
vuefy.module(mappable);
const {MMapZoomControl} = vuefy.module(await mappable.import('@mappable-world/mappable-controls@0.0.1'));
const app = Vue.createApp({
components: {
MMap,
MMapDefaultSchemeLayer,
MMapFeature,
MMapDefaultFeaturesLayer,
MMapControls,
MMapZoomControl
},
setup() {
const refMap = (ref) => {
window.map = ref?.entity;
};
return {LOCATION, refMap, FEATURE1, FEATURE2};
},
template: `
<MMap :location="LOCATION" :ref="refMap">
<MMapDefaultSchemeLayer />
<MMapDefaultFeaturesLayer />
<MMapFeature v-bind="FEATURE1" />
<MMapFeature v-bind="FEATURE2" />
<MMapControls position="right">
<MMapZoomControl></MMapZoomControl>
</MMapControls>
</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>