JSFiddle - React, Tailwind, and code Playground

by denvut

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<div id="map" style="width: 100%; height: 100%"></div>
<div class="simple_overlay" id="test1" style="display:none;background:white;padding:20px;width:70%">
    <br>
    <form class="form-container">
        <div class="form-title">
             <h2>Add article</h2>

        </div>
        <div class="form-title">Title</div>
        <input id="title" class="form-field" type="text" name="title" />
        <br />
        <div class="form-title">Latitude</div>
        <input id="latitude" class="form-field" type="text" name="latitude" />
        <br />
        <div class="form-title">Longitude</div>
        <input id="longitude" class="form-field" type="text" name="longitude" />
        <br />
        <div class="submit-container">
            <input class="submit-button" type="submit" value="Submit" />
        </div>
    </form>

CSS

html, body, #map {
    height: 100%;
    width: 100%;
}
html, body {
    padding:0px;
    margin:0px;
    background: rgb(169, 219, 128);
    /* Old browsers */
}
/* the overlayed element */
 .simple_overlay {
    display:none;
    /* place overlay on top of other elements */
    z-index:100000;
    /* styling */
    background-color:#333;
    border:1px solid #666;
    /* CSS3 styling for latest browsers */
    -moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;
}
/* close button positioned on upper right corner */
 .simple_overlay .close {
    background-image:url(http://demo.staticfloat.com/overlay/close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}
.form-container {
    border: 1px solid #f2e3d2;
    background: #c9b7a2;
    background: -webkit-gradient(linear, left top, left bottom, from(#f2e3d2), to(#c9b7a2));
    background: -webkit-linear-gradient(top, #f2e3d2, #c9b7a2);
    background: -moz-linear-gradient(top, #f2e3d2, #c9b7a2);
    background: -ms-linear-gradient(top, #f2e3d2, #c9b7a2);
    background: -o-linear-gradient(top, #f2e3d2, #c9b7a2);
    background-image: -ms-linear-gradient(top, #f2e3d2 0%, #c9b7a2 100%);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: rgba(000, 000, 000, 0.9) 0 1px 2px, inset rgba(255, 255, 255, 0.4) 0 0px 0;
    -moz-box-shadow: rgba(000, 000, 000, 0.9) 0 1px 2px, inset rgba(255, 255, 255, 0.4) 0 0px 0;
    box-shadow: rgba(000, 000, 000, 0.9) 0 1px 2px, inset rgba(255, 255, 255, 0.4) 0 0px 0;
    font-family:'Helvetica Neue', Helvetica, sans-serif;
    text-decoration: none;
    vertical-align: middle;
    min-width:300px;
    padding:20px;
    width:300px;
}
.form-field {
    border: 1px solid #c9b7a2;
    background: #e4d5c3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #c9b7a2;
    -webkit-box-shadow: rgba(255, 255,...

JavaScript

$(document).ready(function () {
    $("img[rel]").overlay();
    $('#test1').fadeOut();

    var map = L.map('map').setView([-41.2858, 174.78682], 8);
    mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; ' + mapLink,
        maxZoom: 18,
    }).addTo(map);
    

    map.on('popupopen', function () {
        $("img[rel]").overlay();
    });
    map.on('click', onMapClick);


    // Script for adding marker on map click
    function onMapClick(e) {

        var geojsonFeature = {
            "type": "Feature",
                "properties": {},
                "geometry": {
                "type": "Point",
                    "coordinates": [e.latlng.lat, e.latlng.lng]
            }
        }

        var marker;

        L.geoJson(geojsonFeature, {

            pointToLayer: function (feature, latlng) {

                marker = L.marker(e.latlng, {

                    title: "Resource Location",
                    alt: "Resource Location",
                    riseOnHover: true,
                    draggable: true,

                }).bindPopup("Add an article here at<br>" + e.latlng +"?<br><img src='http://geo-marburg.de/leaflet_php/yes.png' class='pop' rel='#test1' alt='' width='80px'/><br><input type='button' value='Nope!' class='marker-delete-button'/>", {
                    closeButton: false
                }, {
                    closeOnClick: false
                });

                marker.on("popupopen", onPopupOpen);

                return marker;
            }
        }).addTo(map);


    }


    // Function to handle delete as well as other events on marker popup open

    function onPopupOpen() {

        var tempMarker = this;
        
        var ll = tempMarker.getLatLng();
        $('#latitude').val(ll.lat);
        $('#longitude').val(ll.lng);
        
        // To remove marker on click of delete button in...