JSFiddle - React, Tailwind, and code Playground

by wata909

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/ardhi/Leaflet.MousePosition/master/src/L.Control.MousePosition.css">
<div id="map"></div>

CSS

#map {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid blue;
}

JavaScript

var map = L.map('map');

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>"
}).addTo(map);

var office = L.marker([35.6614, 139.7543]).addTo(map);
office.bindPopup("DTS CORPORATION HQ").openPopup();

map.setView([35.3622222, 138.7313889], 15);

map.on('click', function(e) {
  var latitude = (Math.round(e.latlng.lat * 10000)) / 10000;
  var longitude = (Math.round(e.latlng.lng * 10000)) / 10000;
  alert("緯度:" + latitude + " , " + "経度:" + longitude);
});