Line with a stroke
vanilla.html
react.html
vue.html
variables.ts
variables.css
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="react, typescript"
type="text/babel"
src="../variables.ts"
></script>
<script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
import {FEATURE_PROPS, 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, MMapControl} = mappable;
// Create a line object, set its coordinates and styles, and add it to the map
const line = new MMapFeature(FEATURE_PROPS);
class OpacityRange extends mappable.MMapComplexEntity<{}> {
private _element!: HTMLDivElement;
private _detachDom!: () => void;
// Method for create a DOM control element
_createElement() {
// Create a root element
const container = document.createElement('div');
container.classList.add('container');
const text = document.createElement('div');
text.classList.add('text');
text.innerText = 'opacity';
const input = document.createElement('input');
input.type = 'range';
input.min = '1';
input.max = '100';
input.step = '1';
input.value = '100';
input.classList.add('slider');
input.oninput = (event) => {
const value = event.target instanceof HTMLInputElement ? event.target.value : undefined;
input.style.background = `linear-gradient(to right, #122DB2 ${value}%, #F5F6F7 ${value}%)`;
const style = {
...FEATURE_PROPS.style,
stroke: FEATURE_PROPS.style.stroke.map((stroke) => ({...stroke, opacity: parseInt(value) / 100}))
};
line.update({style});
};
container.appendChild(text);
container.appendChild(input);
return container;
}
// Method for attaching the control to the map
_onAttach() {
this._element = this._createElement();
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;
}
}
// 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({})
]
);
map.addChild(line);
map.addChild(
new MMapControls({position: 'top right'}, [new MMapControl({transparent: true}).addChild(new OpacityRange({}))])
);
}
</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="../variables.css" />
<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="react, typescript"
type="text/babel"
src="../variables.ts"
></script>
<script data-plugins="transform-modules-umd" data-presets="react, typescript" type="text/babel">
import {FEATURE_PROPS, LOCATION} from '../variables';
import {ChangeEvent} from 'react';
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, MMapControl} =
reactify.module(mappable);
const {useState, useMemo, useRef, useEffect, useCallback} = React;
function App() {
const [opacity, setOpacity] = useState(100);
const sliderRef = useRef(null);
const style = useMemo(
() => ({
...FEATURE_PROPS.style,
stroke: FEATURE_PROPS.style.stroke.map((stroke) => ({...stroke, opacity: opacity / 100}))
}),
[opacity]
);
useEffect(() => {
if (sliderRef.current) {
sliderRef.current.addEventListener('input', (event: ChangeEvent<HTMLInputElement>) => {
const tempSliderValue = event.target.value as unknown as number;
const progress = (tempSliderValue / sliderRef.current.max) * 100;
(
sliderRef.current as HTMLImageElement
).style.background = `linear-gradient(to right, #122DB2 ${progress}%, #F5F6F7 ${progress}%)`;
});
}
}, [sliderRef.current]);
const onSliderChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
setOpacity(event.target.value as unknown as number);
}, []);
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={FEATURE_PROPS.geometry} style={style} />
{/* Add a shared container for controls to the map.
Using MMapControls you can change the position of the control */}
<MMapControls position="top right">
<MMapControl transparent={true}>
<div className="container">
<div className="text">opacity</div>
<input
ref={sliderRef}
type="range"
min="1"
onChange={onSliderChange}
max="100"
step="1"
value={opacity}
className="slider"
/>
</div>
</MMapControl>
</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="../variables.css" />
<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>
<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="react, typescript"
type="text/babel"
src="../variables.ts"
></script>
<script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
import {FEATURE_PROPS, 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, MMapControl} =
vuefy.module(mappable);
const App = Vue.createApp({
components: {
MMap,
MMapDefaultSchemeLayer,
MMapDefaultFeaturesLayer,
MMapFeature,
MMapControls,
MMapControl
},
setup() {
const refMap = (ref) => {
window.map = ref?.entity;
};
const opacity = Vue.ref<number>(100);
const sliderRef = Vue.ref(null);
const style = Vue.computed(() => ({
...FEATURE_PROPS.style,
stroke: FEATURE_PROPS.style.stroke.map((stroke) => ({...stroke, opacity: opacity.value / 100}))
}));
Vue.onMounted(() => {
if (sliderRef.value) {
sliderRef.value.addEventListener('input', (event) => {
const tempSliderValue = event.target.value;
const progress = (tempSliderValue / sliderRef.value.max) * 100;
(
sliderRef.value as HTMLImageElement
).style.background = `linear-gradient(to right, #122DB2 ${progress}%, #F5F6F7 ${progress}%)`;
});
}
});
const onSliderChange = (event) => {
opacity.value = event.target.value;
};
return {
refMap,
LOCATION,
FEATURE_PROPS,
style,
opacity,
sliderRef,
onSliderChange
};
},
template: `
<MMap
:location="LOCATION"
:ref="refMap"
:showScaleInCopyrights="true"
>
<MMapDefaultSchemeLayer />
<MMapDefaultFeaturesLayer />
<MMapFeature
:geometry="FEATURE_PROPS.geometry"
:style="style"
/>
<MMapControls position="top right">
<MMapControl :transparent="true">
<div class="container">
<div class="text">
opacity
</div>
<input
ref="sliderRef"
type="range"
min="1"
@change="onSliderChange"
max="100"
step="1"
class="slider"
v-model="opacity"
/>
</div>
</MMapControl>
</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="../variables.css" />
<link rel="stylesheet" href="./common.css" />
</head>
<body>
<div id="app"></div>
</body>
</html>
import type {DrawingStyle, LineStringGeometry, MMapLocationRequest} from '@mappable-world/mappable-types';
export const LOCATION: MMapLocationRequest = {
center: [55.3728, 25.3348], // starting position [lng, lat]
zoom: 14 // starting zoom
};
export const FEATURE_PROPS: {geometry: LineStringGeometry; style: DrawingStyle} = {
geometry: {
type: 'LineString',
coordinates: [
[55.3666, 25.3442],
[55.3757, 25.3394],
[55.3695, 25.3305],
[55.3607, 25.3348],
[55.3666, 25.3442]
]
},
style: {
simplificationRate: 0,
stroke: [
{color: 'rgba(46, 76, 229, 0.6)', width: 14},
{color: '#122DB2', width: 4, dash: [13]},
{color: '#FFFFFF', width: 32}
],
fill: 'rgba(46, 76, 229, 0.6)'
}
};
:root {
--color-text-primary: #050d33;
}
.container {
display: flex;
align-items: center;
box-sizing: border-box;
width: 210px;
padding: 16px;
border-radius: 12px;
background: #fff;
box-shadow: 0 4px 12px 0 rgba(95, 105, 131, 0.1), 0 4px 24px 0 rgba(95, 105, 131, 0.04);
gap: 12px;
}
.text {
font-size: 14px;
font-style: normal;
line-height: 16px;
color: var(--color-text-primary);
}
input[type='range'] {
width: 100%;
height: 2px;
cursor: pointer;
outline: none;
background: linear-gradient(to right, #122db2 100%, #f5f6f7 0%);
-webkit-appearance: none;
appearance: none;
}
input[type='range']::-webkit-slider-thumb {
width: 16px;
height: 16px;
cursor: pointer;
border: 2px solid #122db2;
border-radius: 50%;
background-color: #fff;
-webkit-appearance: none;
appearance: none;
}