JSFiddle - React, Tailwind, and code Playground

by dolf

HTML

<!doctype html>
<html>
    <head>
        <title>OSM</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script src="http://api-maps.yandex.ru/2.0.7/?ns=ym&load=package.full&lang=ru-RU"></script>
    </head>
<body>
    <div id="map" style="height: 480px; width: 640px;"></div>
</body>
</html>

JavaScript

ym.ready(function() {
    var map = new ym.Map('map', {
        center: [59.947, 30.325],
        zoom: 13,
        type: null // что-бы не загружался слой "Схема" Яндекс.Карт
    }, {});

    var osmLayer = new ym.Layer('http://otile%d.mqcdn.com/tiles/1.0.0/osm/%z/%x/%y.png', {
        projection: ym.projection.sphericalMercator,
        // указываем проекцию слоя OSM
        tileTransparent: true
    });
    map.layers.add(osmLayer);

    var train = new ym.Placemark([59.928815, 30.362311], {
        hintContent: "Московский вокзал"
    }, {
        preset: "twirl#trainIcon"
    })
    map.geoObjects.add(train);

    var pizza = new ym.Placemark([59.954327, 30.30698], {
        balloonContent: "Пиццерия"
    }, {
        preset: "twirl#cafeIcon"
    })
    map.geoObjects.add(pizza);

    var area = new ym.Circle([[59.954327, 30.30698], 1400], {
        hintContent: "Область доставки"
    }, {
        strokeColor: "#7C444399",
        strokeWidth: 2,
        fillColor: "#FFFFFF66",
        hintHideTimeout: 100
    });

    area.events.add("mouseenter", function(e) {
        this.options.set({
            strokeColor: "#7C4443BB",
            strokeWidth: 4,
            fillColor: "#FFFFFF99"
        })
    }, area);

    area.events.add("mouseleave", function(e) {
        this.options.set({
            strokeColor: "#7C444399",
            strokeWidth: 2,
            fillColor: "#FFFFFF66"
        })
    }, area);

    var geometry = ym.geometry.LineString.fromEncodedCoordinates("-nCSA99KzwFdBwAA0v3__2kBAABk-___" + "SgYAAKHO__8bEQAAQHX__y0BAAB_____8gIAAFcBAAAREAAAXej__-EEAAAo_v__mwIAANH8__9zAwAAdfj__" + "wAJAACBAAAAbgEAAK0BAAAaAgAA2wMAAKAEAAB_____VgAAAAoHAAACAQAArAAAAHcFAAAl_P__" + "3gMAAAAAAAAyAwAA1wAAAMYCAACtAQAAcAIAAFkCAAA="); // закодированая геометрия линии
    var line = new ym.Polyline(geometry, {}, {
        strokeWidth: 2,
        strokeStyle: "longdash"
    });
    map.geoObjects.add(line);

    map.geoObjects.add(area);

    map.copyrights.add({}, [{
...