JSFiddle - React, Tailwind, and code Playground

by tomik23

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>

<div id="map"></div>

CSS

html,
body {
  height: 100%;
  margin: 0;
}

#map {
  width: 100%;
  height: 100%;
}

JavaScript

let zoom = 18;
let lat = 52.2297700;
let lon = 21.0117800;

let map = L.map('map').setView([lat, lon], zoom);

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

L.marker([lat, lon]).addTo(map).bindPopup('Ĺšrodek Warszawy');

map.on('click', function(e) {
  console.log(e.latlng)
  alert(e.latlng)
})