Создание линии
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://api-maps.yandex.ru/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 ymaps3.ready;
const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapFeature, YMapControls} = ymaps3;
// 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({})
]
);
// Create a line object, set its coordinates and styles, and add it to the map
const line = new YMapFeature({
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 YMapControls you can change the position of the control */
const topRightControls = new YMapControls({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://api-maps.yandex.ru/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 @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} = reactify.module(ymaps3);
// Using ymaps3-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
<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={{
type: 'LineString',
coordinates: LINESTRING.coordinates
}}
style={{stroke: [{color: LINESTRING.color, width: 4}]}}
/>
{/* Add a shared container for controls to the map.
Using YMapControls you can change the position of the control */}
<YMapControls position="top left">
{/* Add a custom information message control to the map */}
<InfoMessageR text={LINESTRING.tooltipText} />
</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="./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://api-maps.yandex.ru/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 [ymaps3Vue] = await Promise.all([ymaps3.import('@yandex/ymaps3-vuefy'), ymaps3.ready]);
const vuefy = ymaps3Vue.vuefy.bindTo(Vue);
const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapFeature, YMapControls} = vuefy.module(ymaps3);
const {InfoMessage: InfoMessageV} = vuefy.module({InfoMessage});
const App = Vue.createApp({
components: {
YMap,
YMapDefaultSchemeLayer,
YMapDefaultFeaturesLayer,
YMapFeature,
YMapControls,
InfoMessageV
},
setup() {
const refMap = (ref) => {
window.map = ref?.entity;
};
return {
refMap,
LOCATION,
LINESTRING
};
},
template: `
<YMap
:location="LOCATION"
:ref="refMap"
:showScaleInCopyrights="true"
>
<YMapDefaultSchemeLayer />
<YMapDefaultFeaturesLayer />
<YMapFeature
:geometry="{
type: 'LineString',
coordinates: LINESTRING.coordinates
}"
:style="{ stroke: [{ color: LINESTRING.color, width: 4 }] }"
/>
<YMapControls position="top left">
<InfoMessageV :text="LINESTRING.tooltipText" />
</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="./common.css" />
</head>
<body>
<div id="app"></div>
</body>
</html>
import type {LngLat, YMapLocationRequest} from '@yandex/ymaps3-types';
export const LOCATION: YMapLocationRequest = {
center: [39.9579, 43.4075], // starting position [lng, lat]
zoom: 14 // starting zoom
};
export const LINESTRING: {
color: string;
tooltipText: string;
coordinates: LngLat[];
} = {
color: '#007afce6',
tooltipText: 'Расположение:<br>Сочи Автодром, Адлер',
coordinates: [
[39.968066, 43.409699],
[39.966723, 43.408191],
[39.966421, 43.407965],
[39.966007, 43.407734],
[39.965551, 43.407555],
[39.9649, 43.407408],
[39.963177, 43.407074],
[39.96062, 43.406574],
[39.957886, 43.406046],
[39.957708, 43.40606],
[39.957643, 43.406098],
[39.957602, 43.406221],
[39.957531, 43.406395],
[39.957418, 43.406522],
[39.956181, 43.407399],
[39.955737, 43.407635],
[39.955187, 43.407795],
[39.954524, 43.407837],
[39.953879, 43.407743],
[39.953334, 43.407536],
[39.952908, 43.407248],
[39.952648, 43.406965],
[39.95244, 43.406621],
[39.952363, 43.406249],
[39.952399, 43.405834],
[39.952547, 43.405481],
[39.953316, 43.404321],
[39.953334, 43.404189],
[39.953263, 43.404085],
[39.953086, 43.403991],
[39.948996, 43.402223],
[39.948871, 43.402186],
[39.948676, 43.402181],
[39.948534, 43.402242],
[39.948439, 43.402332],
[39.947427, 43.403977],
[39.947332, 43.404255],
[39.947309, 43.404481],
[39.947338, 43.404731],
[39.947599, 43.405688],
[39.947646, 43.405768],
[39.947747, 43.405806],
[39.947877, 43.405834],
[39.951209, 43.406197],
[39.951292, 43.406221],
[39.951369, 43.406268],
[39.951428, 43.406329],
[39.951635, 43.406928],
[39.951653, 43.407017],
[39.951665, 43.40713],
[39.951647, 43.407229],
[39.950612, 43.409346],
[39.950612, 43.409431],
[39.950653, 43.409506],
[39.95073, 43.409581],
[39.950842, 43.409638],
[39.951884, 43.409944],
[39.952363, 43.410025],
[39.952813, 43.410086],
[39.953429, 43.410119],
[39.953973, 43.410114],
[39.954595, 43.410067],
[39.955181, 43.409987],
[39.956211, 43.409864],
[39.956761, 43.409761],
[39.957324, 43.409614],
[39.957933, 43.409435],
[39.960028, 43.408742],
[39.960603, 43.408596],
[39.961123, 43.408516],
[39.961703, 43.408478],
[39.962301, 43.408497],
[39.962858, 43.408573],
[39.96371, 43.408752],
[39.96387, 43.408724],
[39.963935, 43.408648],
[39.964201, 43.407988],
[39.964326, 43.407894],
[39.964539, 43.407837],
[39.964769, 43.407847],
[39.965101, 43.407903],
[39.965474, 43.40804],
[39.965805, 43.408257],
[39.966078, 43.408535],
[39.966681, 43.409167],
[39.966711, 43.409242],
[39.966699, 43.409303],
[39.966587, 43.409369],
[39.966036, 43.409666],
[39.965935, 43.40977],
[39.9659, 43.409916],
[39.965965, 43.410048],
[39.966841, 43.411033],
[39.967622, 43.411962],
[39.96825, 43.412664],
[39.968392, 43.41273],
[39.968569, 43.412693],
[39.969972, 43.41224],
[39.970102, 43.412183],
[39.97015, 43.412099],
[39.970114, 43.412004],
[39.968066, 43.409699]
]
};
// 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 (YMapComplexEntity)
ymaps3.ready.then(() => {
class InfoMessageClass extends ymaps3.YMapComplexEntity<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 = ymaps3.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;
}