Create a line
vanilla.html
react.html
vue.html
variables.ts
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 {InfoMessage} from './common';
import {LINESTRING, LOCATION} from '../variables';
window.map = null;
main();
async function main() {
// Waiting for all api elements to be loaded
await mappable.ready;
const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapFeature, MMapControls} = mappable;
// 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({})
]
);
// Create a line object, set its coordinates and styles, and add it to the map
const line = new MMapFeature({
geometry: {
type: 'LineString',
coordinates: LINESTRING.coordinates
},
style: {stroke: [{color: LINESTRING.color, width: 4}]}
});
map.addChild(line);
/* Create and add a shared container for controls to the map.
Using MMapControls you can change the position of the control */
const topRightControls = new MMapControls({position: 'top left'});
map.addChild(topRightControls);
// Add a custom information message control to the map
topRightControls.addChild(new InfoMessage({text: LINESTRING.tooltipText}));
}
</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" />
</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/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 {InfoMessage} from './common';
import {LINESTRING, LOCATION} from '../variables';
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, MMapFeature, MMapControls} = reactify.module(mappable);
// Using mappable-rectify, we turn a custom InfoMessage into a React component
const {InfoMessage: InfoMessageR} = reactify.module({InfoMessage});
function App() {
return (
// 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 />
{/* Add a line object to the map, set its coordinates and styles */}
<MMapFeature
geometry={{
type: 'LineString',
coordinates: LINESTRING.coordinates
}}
style={{stroke: [{color: LINESTRING.color, width: 4}]}}
/>
{/* Add a shared container for controls to the map.
Using MMapControls you can change the position of the control */}
<MMapControls position="top left">
{/* Add a custom information message control to the map */}
<InfoMessageR text={LINESTRING.tooltipText} />
</MMapControls>
</MMap>
);
}
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" />
</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 {InfoMessage} from './common';
import {LINESTRING, LOCATION} from '../variables';
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, MMapFeature, MMapControls} = vuefy.module(mappable);
const {InfoMessage: InfoMessageV} = vuefy.module({InfoMessage});
const App = Vue.createApp({
components: {
MMap,
MMapDefaultSchemeLayer,
MMapDefaultFeaturesLayer,
MMapFeature,
MMapControls,
InfoMessageV
},
setup() {
const refMap = (ref) => {
window.map = ref?.entity;
};
return {
refMap,
LOCATION,
LINESTRING
};
},
template: `
<MMap
:location="LOCATION"
:ref="refMap"
:showScaleInCopyrights="true"
>
<MMapDefaultSchemeLayer />
<MMapDefaultFeaturesLayer />
<MMapFeature
:geometry="{
type: 'LineString',
coordinates: LINESTRING.coordinates
}"
:style="{ stroke: [{ color: LINESTRING.color, width: 4 }] }"
/>
<MMapControls position="top left">
<InfoMessageV :text="LINESTRING.tooltipText" />
</MMapControls>
</MMap>
`
});
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" />
</head>
<body>
<div id="app"></div>
</body>
</html>
import type {LngLat, MMapLocationRequest} from '@mappable-world/mappable-types';
export const LOCATION: MMapLocationRequest = {
center: [54.6056, 24.4705], // starting position [lng, lat]
zoom: 14 // starting zoom
};
export const LINESTRING: {
color: string;
tooltipText: string;
coordinates: LngLat[];
} = {
color: '#122DB2',
tooltipText: 'Location:<br>Yes Marina Circuit, 2/1, Abu Dhabi',
coordinates: [
[54.605463, 24.46997],
[54.60783, 24.470262],
[54.607955, 24.4703],
[54.608049, 24.470389],
[54.608114, 24.470512],
[54.608126, 24.470634],
[54.608091, 24.470762],
[54.607712, 24.472228],
[54.607647, 24.472388],
[54.607558, 24.472506],
[54.60741, 24.472619],
[54.607286, 24.472675],
[54.606615, 24.472865],
[54.606392, 24.472968],
[54.606226, 24.473071],
[54.606076, 24.4732],
[54.605963, 24.473321],
[54.605879, 24.473422],
[54.605777, 24.473644],
[54.60574, 24.473813],
[54.605737, 24.473997],
[54.605778, 24.474215],
[54.605854, 24.474444],
[54.606021, 24.475027],
[54.60608, 24.475459],
[54.606086, 24.475766],
[54.606056, 24.476032],
[54.605871, 24.4774],
[54.605748, 24.478262],
[54.605724, 24.478362],
[54.605701, 24.478443],
[54.60563, 24.478526],
[54.605509, 24.478617],
[54.605436, 24.47864],
[54.605352, 24.478648],
[54.605272, 24.478636],
[54.605186, 24.478605],
[54.605122, 24.478546],
[54.605083, 24.478491],
[54.605034, 24.478399],
[54.604887, 24.478001],
[54.604747, 24.477425],
[54.603563, 24.474212],
[54.603101, 24.472968],
[54.602845, 24.472274],
[54.602653, 24.471736],
[54.602453, 24.471068],
[54.60203, 24.469838],
[54.601627, 24.46873],
[54.60158, 24.468622],
[54.601568, 24.468541],
[54.60158, 24.468494],
[54.601625, 24.468447],
[54.601727, 24.468444],
[54.602104, 24.468485],
[54.602187, 24.468485],
[54.602254, 24.468412],
[54.602468, 24.467672],
[54.602512, 24.467533],
[54.602647, 24.467226],
[54.60277, 24.467006],
[54.603035, 24.466655],
[54.603337, 24.466335],
[54.603717, 24.466038],
[54.605328, 24.464881],
[54.605695, 24.46461],
[54.605984, 24.464422],
[54.60637, 24.464195],
[54.606701, 24.464021],
[54.607236, 24.463786],
[54.607725, 24.463586],
[54.608452, 24.463273],
[54.608763, 24.463159],
[54.608938, 24.463158],
[54.609123, 24.463192],
[54.609292, 24.463281],
[54.609382, 24.46336],
[54.609442, 24.463438],
[54.609502, 24.463553],
[54.609536, 24.463665],
[54.609556, 24.463769],
[54.60954, 24.463941],
[54.609502, 24.464066],
[54.609448, 24.464187],
[54.609369, 24.464295],
[54.609257, 24.464393],
[54.609118, 24.464478],
[54.608971, 24.464537],
[54.608757, 24.464565],
[54.607061, 24.464689],
[54.606852, 24.464714],
[54.606762, 24.464732],
[54.606667, 24.464763],
[54.605756, 24.465281],
[54.605664, 24.465344],
[54.605602, 24.465416],
[54.605536, 24.46557],
[54.605324, 24.466473],
[54.605338, 24.466544],
[54.605387, 24.466592],
[54.605461, 24.466611],
[54.606217, 24.466714],
[54.606306, 24.466748],
[54.606363, 24.466775],
[54.606423, 24.466831],
[54.606483, 24.466934],
[54.606497, 24.467061],
[54.606499, 24.467686],
[54.606444, 24.467793],
[54.606376, 24.467857],
[54.606273, 24.467893],
[54.606132, 24.467921],
[54.606009, 24.467936],
[54.605845, 24.467941],
[54.605683, 24.46793],
[54.604105, 24.467709],
[54.603969, 24.4677],
[54.603796, 24.467706],
[54.603627, 24.467733],
[54.603511, 24.467768],
[54.603434, 24.467832],
[54.603354, 24.46791],
[54.602921, 24.468626],
[54.602697, 24.468955],
[54.60265, 24.469052],
[54.602617, 24.469181],
[54.602606, 24.469291],
[54.602604, 24.469423],
[54.602628, 24.469513],
[54.602686, 24.469578],
[54.602758, 24.469611],
[54.602923, 24.469638],
[54.605463, 24.46997]
]
};
// Create a custom information message control
export let InfoMessage = null;
interface InfoMessageProps {
text: string;
}
// Wait for the api to load to access the entity system (MMapComplexEntity)
mappable.ready.then(() => {
class InfoMessageClass extends mappable.MMapComplexEntity<InfoMessageProps> {
private _element!: HTMLDivElement;
private _detachDom!: () => void;
// Method for create a DOM control element
_createElement(props: InfoMessageProps) {
// Create a root element
const infoWindow = document.createElement('div');
infoWindow.classList.add('info_window');
infoWindow.innerHTML = props.text;
return infoWindow;
}
// Method for attaching the control to the map
_onAttach() {
this._element = this._createElement(this._props);
this._detachDom = mappable.useDomContext(this, this._element, this._element);
}
// Method for detaching control from the map
_onDetach() {
this._detachDom();
this._detachDom = undefined;
this._element = undefined;
}
}
InfoMessage = InfoMessageClass;
});
.info_window {
padding: 8px 12px 8px 40px;
border-radius: 12px;
background-color: #313133;
background-image: url('./info-icon.svg');
background-position: 10px 8px;
background-repeat: no-repeat;
color: #f2f5fa;
font-size: 14px;
line-height: 20px;
min-width: max-content;
}