JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="http://leaflet.github.com/Leaflet.draw/leaflet.draw.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<link rel="stylesheet" href="http://leaflet.github.com/Leaflet.draw/leaflet.draw.css">
<b>A map using Leaflet.js</b>
<div id="map"></div>

CSS

#map { height: 280px; width: 460px;}

JavaScript

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map', {drawControl: true}).setView([41.6,-91.668], 8);

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


map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;

    if (type === 'marker') {
        // Do marker specific actions
    }

    // Do whatever else you need to. (save to db, add to map etc)
    map.addLayer(layer);
    alert(layer.toGeoJSON().geometry.coordinates.toString());
});