JSFiddle - React, Tailwind, and code Playground

by vasilka

HTML

<div id="map"></div>
<div class="inputs">
    <input type="button" value="Показать пример YMapsML" class="load-ymapsml">
    <input type="button" value="Показать пример KML" class="load-kml">
</div>

CSS

</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script type="text/javascript" src="https://yandex.st/jquery/1.6.4/jquery.min.js"></script>
<style>
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 80%;
        }
        .inputs {
            padding: 10px;
        }

JavaScript

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map('map', {
            center: [55.76, 37.64],// Москва
            zoom: 2,
            controls: ['zoomControl']
        }),
        ymapsmlButton = $('.load-ymapsml'),
        kmlButton = $('.load-kml');

    // Отключение кеширования атрибута disabled в Firefox.
    ymapsmlButton.get(0).disabled = false;
    kmlButton.get(0).disabled = false;

    // При нажатии на кнопку загружаем соответствующий XML-файл.
    // и отображаем его данные на карте.
    ymapsmlButton.click(function (e) {
        ymaps.geoXml.load('https://maps.yandex.ru/export/usermaps/93jfWjoXws37exPmKH-OFIuj3IQduHal/')
            .then(onGeoXmlLoad);
        e.target.disabled = true;
    });
    kmlButton.click(function (e) {
        ymaps.geoXml.load("http://www.meteolocator.ru/gzkml.php?qie=5&typ=map&par=x%3D3%26y%3D3%26param%3DTMP_2_m_above_ground%26predict%3D12")
            .then(onGeoXmlLoad);
        e.target.disabled = true;
    });

    // Обработчик загрузки XML-файлов.
    function onGeoXmlLoad (res) {
        myMap.geoObjects.add(res.geoObjects);
        if (res.mapState) {
            res.mapState.applyToMap(myMap);
        }
    }
}