JSFiddle - React, Tailwind, and code Playground

by Stefano

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>
<div id="map" style="height:350px; width:480px;"></div>
<text-area id = "lat"> 
</text-area>
<text-area id = "lng"></text-area>

CSS

#map{
    
}

JavaScript

var map = L.map('map').setView([51.5, -0.09], 13);
var my_divicon = L.divIcon({
    className: 'arrow_box'
});
var marker = L.marker([51.5, -0.09], {
    draggable:true
});
function addToTextBox(lt,ln){
    document.getElementById('lat').innerHTML = lt;
    document.getElementById('lng').innerHTML = ln;
}

marker.on('dragend', function(event){
    //alert('drag ended');
    var marker = event.target;
    var location = marker.getLatLng();
    var lat = location.lat;
    var lon = location.lng;
    addToTextBox(lat,lon);
  })
  .on('down', () => {console.log('down')})
  .on('predrag', () => {console.log('predrag')})
  .on('dragstart', () => {console.log('dragstart')})
  .on('drag', () => {console.log('drag')});

marker.addTo(map);