Leaflet карта с рисованием полигонов

387

10 октября 2021, 15:30

Может кто знает как подключить Leaflet карту с возможностью рисовать полигоны на карте и потом отправлять координаты на почту (второстепенно). У меня не получается. Надеюсь на вашу помощь!

Answer 1

Для установки карты на вашу страницу необходимо:

1) Добавить Leaflet CSS(в <head>):

     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

и скрипты(перед </body>):

 <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>

2) Добавить контейнер для карты на страницу:

<div id="mapid"></div>

3) Задать желаемую высоту контейнера(иначе будет 0):

#mapid { height: 180px; }

4) Добавить на карту слои и необходимые объекты, например:

const mymap = L.map('mapid').setView([51.505, -0.09], 13);
const polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);
L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
}).addTo(mymap);

Рабочий пример: https://codepen.io/styfrombrest/pen/rNNGKya