JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://www.javascripttoolbox.com/libsource.php/contextmenu/source/jquery.contextmenu.js"></script>
<link rel="stylesheet" href="http://www.javascripttoolbox.com/lib/contextmenu/jquery.contextmenu.css">
<div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>

JavaScript

var map,
cm,
ll = new L.LatLng(-36.852668, 174.762675),
    ll2 = new L.LatLng(-36.86, 174.77);

function showCoordinates(e) {
    alert(e.latlng);
}

function centerMap(e) {
    map.panTo(e.latlng);
}

function zoomIn(e) {
    map.zoomIn();
}

function zoomOut(e) {
    map.zoomOut();
}

map = L.map('map', {
    center: ll,
    zoom: 15
});

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker(ll, {

}).addTo(map);

L.marker(ll2, {

}).addTo(map);

var menu1 = [{
    'Пункт 1': function (menuItem, menu) {
        alert("Вы выбрали пункт 1");
    }
},
$.contextMenu.separator, {
    'Сменить иконку': function (menuItem, menu) {
        $(this).attr('src', 'https://guard.originsmod.info/map/icons/ico_heli.png')
    }
}];
$(function () {
    $('img.leaflet-clickable').contextMenu(menu1, {
        theme: 'vista'
    });
});