JSFiddle - React, Tailwind, and code Playground

by phillipadsmith

HTML

<html>
    <head>
       <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
    </head>
    <body>
        <div id="map"></div>
    </body>

</html>

CSS

#map { 
    border: 1px solid black;
    height: 600px;
    width: 100%;
}

.search {
    background: white;
    width: 200px;
    height: 200px;
    padding: 10px;
}

JavaScript

// Leaflet
var map = L.map('map', { doubleClickZoom: false } ).setView([52.2385, -123.1185], 6);
    L.tileLayer('http://{s}.tile.cloudmade.com/8df2e4e99eb94de2a136db10bf4e9afa/997/256/{z}/{x}/{y}.png', {
}).addTo(map);

// Leaflet control for riding search
var search = L.control({ 
        //position: 'bottomleft' 
});
search.onAdd = function (map) {
    var div  = L.DomUtil.create('div', 'search');
    this._div = div 
    this.update();
    return this._div;
};
search.update = function () {
    this._div.innerHTML =
        '<form id="search">' +
        '<input type="text" size="25" placeholder="Your address: Street, City." autofocus />&nbsp;' + 
        '<input type="submit" value="Go" />' +
        '<p>Drag the map. You will lose focus on the input.' +
        'Try to get it back!!!' +
        '</form>';
};
search.addTo(map);