JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<!-- saved from url=(0023)http://www.contoso.com/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Direction Yandex map.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://api-maps.yandex.ru/1.1/index.xml?modules=regions" type="text/javascript"></script><script type="text/javascript">
(function(A) {
A.indexOf = A.indexOf || function(object) {
for (var i = 0, l = this.length; i < l; i++) {
if (i in this && this[i] === object) {
return i; } }
return -1;
};
})(Array.prototype);
YMaps.jQuery(function () {
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
map.setCenter(new YMaps.GeoPoint(55, 55), 4);
var zoom = new YMaps.Zoom();map.addControl(zoom);map.enableScrollZoom(true);
YMaps.Regions.load("ru", function (state, response) {
if (state == YMaps.State.SUCCESS) {
var shapes, polygon;
var regionVba1 = response.filter(function (obj) {
var names = [
"Кировская область", "Нижегородская область", "Пензенская область", "Республика Марий Эл", "Республика Мордовия", "Самарская область", "Саратовская область", "Ульяновская область", "Чувашская Республика"
];
return (names.indexOf(obj.name) > -1);
});
for (var i = 0; i < regionVba1.length; i++) {
shapes = regionVba1[i].metaDataProperty.encodedShapes;
for (var ix = shapes.length; ix--; ) {
polygon = YMaps.Polygon.fromEncodedPoints(
shapes[ix].coords,
shapes[ix].levels
);
polygon.setStyle({
polygonStyle: {
fillColor: "b00c0c50",
...