JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<script src="http://include.jaydata.org/datajs-1.0.3-patched.js"></script>
<script src="http://include.jaydata.org/jaydata.min.js"></script>
<script src="http://include.jaydata.org/3rdparty/toastr/toastr.min.js"></script>
<link rel="stylesheet" href="http://include.jaydata.org/3rdparty/toastr/toastr.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div id="map"></div>

CSS

#toast-container {
    position: absolute;
}

#toast-container > div {
    width: 100px;
}

#map {
    overflow: hidden;
    padding: 0px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%; 
    width: 100%;
}

.leaflet-right .leaflet-control {
    margin-right: 30px;
}
.leaflet-top .leaflet-control {
    margin-top: 30px;
}

JavaScript

toastr.options = {
    "fadeOut": 500,
    "timeOut": 800,
    "target": $("#map")[0]
};

var lmap = L.map('map').setView([47.498333, 19.040833], 12);
var lgroup = new L.LayerGroup().addTo(lmap);
L.tileLayer('http://{s}.tile.cloudmade.com/003d6e8d9af14e7582b462c10e572a1a/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
}).addTo(lmap);

$data.define('POI', {
    id: { type: $data.Guid, key: true, required: true },
    name: String,
    coord: $data.GeographyPoint
})
.setStore('default', { name: 'local', databaseName: 'pois' })
.setStore('remote', { name: 'oData', dataSource: 'https://dev-open.jaystack.net/06b63652-9ec1-4c42-82ad-ed6875efacfb/7b261639-c46e-4913-b14f-ea3d3f899fcb/api/mydatabase/POI' });

var points = {};
var popup;

function cancel() {
    popup.closePopup();
    return false;
}

function cancelNew() {
    var id = $("#id").val();
    popup.closePopup();
    var g = points[id];
    g.removeMapObject();
    delete points[g.id];
    return false;
}

function removePOI() {
    var id = $("#id").val();
    popup.closePopup();
    var g = points[id];
    g.remove()
    .then(function () {
        toastr.success('Removed');
        g.removeMapObject();
        delete points[g.id];
    });
    return false;
}

function savePOI() {
    var id = $("#id").val();
    var name = $("#name").val().trim();
    var g = points[id];
    if (!name) {
        $("#row").addClass('error');
    }
    else {
        g.name = name;
        g.save()
        .then(toastr.success('Saved'));
        popup.closePopup();
    }
    return false;
}

function add2map(g) {
    
    points[g.id] = g;
    
    var marker = L.marker([g.coord.coordinates[1], g.coord.coordinates[0]], { draggable: true });
    
    marker.on('dragend', function (e) {
        g.coord =...