Линия с обводкой
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://api-maps.yandex.ru/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 ymaps3.ready;
const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapFeature, YMapControls, YMapControl} = ymaps3;
// Create a line object, set its coordinates and styles, and add it to the map
const line = new YMapFeature(FEATURE_PROPS);
class OpacityRange extends ymaps3.YMapComplexEntity<{}> {
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 = ymaps3.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 YMap(
// 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 YMapDefaultSchemeLayer({}),
// Add a layer of geo objects to display the line
new YMapDefaultFeaturesLayer({})
]
);
map.addChild(line);
map.addChild(
new YMapControls({position: 'top right'}, [new YMapControl({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://api-maps.yandex.ru/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 @yandex/ymaps3-reactify
const [ymaps3React] = await Promise.all([ymaps3.import('@yandex/ymaps3-reactify'), ymaps3.ready]);
const reactify = ymaps3React.reactify.bindTo(React, ReactDOM);
const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapFeature, YMapControls, YMapControl} =
reactify.module(ymaps3);
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
<YMap location={LOCATION} showScaleInCopyrights={true} ref={(x) => (map = x)}>
{/* Add a map scheme layer */}
<YMapDefaultSchemeLayer />
{/* Add a layer of geo objects to display the line */}
<YMapDefaultFeaturesLayer />
{/* Add a line object to the map, set its coordinates and styles */}
<YMapFeature geometry={FEATURE_PROPS.geometry} style={style} />
{/* Add a shared container for controls to the map.
Using YMapControls you can change the position of the control */}
<YMapControls position="top right">
<YMapControl 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>
</YMapControl>
</YMapControls>
</YMap>
);
}
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://api-maps.yandex.ru/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 [ymaps3Vue] = await Promise.all([ymaps3.import('@yandex/ymaps3-vuefy'), ymaps3.ready]);
const vuefy = ymaps3Vue.vuefy.bindTo(Vue);
const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapFeature, YMapControls, YMapControl} =
vuefy.module(ymaps3);
const App = Vue.createApp({
components: {
YMap,
YMapDefaultSchemeLayer,
YMapDefaultFeaturesLayer,
YMapFeature,
YMapControls,
YMapControl
},
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: `
<YMap
:location="LOCATION"
:ref="refMap"
:showScaleInCopyrights="true"
>
<YMapDefaultSchemeLayer />
<YMapDefaultFeaturesLayer />
<YMapFeature
:geometry="FEATURE_PROPS.geometry"
:style="style"
/>
<YMapControls position="top right">
<YMapControl :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>
</YMapControl>
</YMapControls>
</YMap>
`
});
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, YMapLocationRequest} from '@yandex/ymaps3-types';
export const LOCATION: YMapLocationRequest = {
center: [30.2931, 59.9299], // starting position [lng, lat]
zoom: 14.7 // starting zoom
};
export const FEATURE_PROPS: {geometry: LineStringGeometry; style: DrawingStyle} = {
geometry: {
type: 'LineString',
coordinates: [
[30.2919, 59.9313],
[30.2936, 59.9279],
[30.2895, 59.9282],
[30.2858, 59.9293],
[30.2919, 59.9313]
]
},
style: {
simplificationRate: 0,
stroke: [
{color: 'rgba(25, 109, 255, 0.6)', width: 14},
{color: '#196DFF', width: 4, dash: [13]},
{color: '#FFFFFF', width: 32}
],
fill: 'rgba(25, 109, 255, 0.6)'
}
};
:root {
--color-text-primary: #000;
}
.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;
}