Leaflet Input Widget

by Dan Wolfe

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css">
<div class="form-item form-type-textfield form-item-field-observable-point-und-0-lat">
  <label for="edit-field-observable-point-und-0-lat">Latitude </label>
 <input class="geofield_lat form-text" type="text" id="edit-field-observable-point-und-0-lat" name="field_observable_point[und][0][lat]" value="" size="60" maxlength="128">
</div>
<div class="form-item form-type-textfield form-item-field-observable-point-und-0-lon">
  <label for="edit-field-observable-point-und-0-lon">Longitude </label>
 <input class="geofield_lon form-text" type="text" id="edit-field-observable-point-und-0-lon" name="field_observable_point[und][0][lon]" value="" size="60" maxlength="128">
</div>

<div id="map"></div>

CSS

body {
    padding: 0;
    margin: 0;
}
html, body, #map {
    height: 96%;
    width: 100%;
}

JavaScript

(function($) {
    $(document).ready(function() {
        var centerLat = 44,
            centerLng = -88;
        var basic = L.tileLayer('http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png');
        var baseMaps = {
            "Basic": basic
        };
        var map = L.map('map', {
            center: new L.LatLng(centerLat, centerLng),
            zoom: 5,
            maxZoom: 6,
            minZoom: 5,
            layers: [basic]
        });
        var my_marker= new L.marker();
        map.on('click', onMapClick);

        function onMapClick(e) {
            lat = e.latlng.lat.toFixed(5);
            lng = e.latlng.lng.toFixed(5);
            $("#edit-field-observable-point-und-0-lon").val(lng);
            $("#edit-field-observable-point-und-0-lat").val(lat);
            if (map.hasLayer(my_marker)) {
                map.removeLayer(my_marker);
            }
            my_marker = new L.marker([lat, lng]).addTo(map);
        }
    });
}(jQuery));