Mozillians Geonames+Leaflet
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<form>
<input id="query" type="search" placeholder="search"/>
<input id="send" type="submit" value="Send"/>
<input id="find" type="button" value="Find me"/>
<select id="results">
<option id="default">-- results --</option>
</select>
</form>
<div id='map'></div>
<div id="results">
<div id="country">
<input type="checkbox" />
<b>Country:</b>
<span class="output"></span>
</div>
<div id="region">
<input type="checkbox" />
<b>Region:</b>
<span class="output"></span>
</div>
<div id="city">
<input type="checkbox" />
<b>City:</b>
<span class="output"></span>
</div>
</div>
CSS
select{
width: 100%;
}
#map { width:100%; height:310px; }
JavaScript
var map = L.map('map').setView([0, 0], 1);
var marker = L.marker([0, 0],{
draggable:true
})
.addTo(map);
marker.on('dragend',function(event){
console.log('i was dragged');
console.log(event.target.getLatLng());
});
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.jpg', {
attribution: 'Map data © <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://stamen.com">Stamen</a>',
maxZoom: 20,
minZoom: 1
}).addTo(map);
function updateMarker(data){
console.log(data);
marker.setLatLng([data.geonames[0].lat, data.geonames[0].lng]).update();
map.setView([data.geonames[0].lat, data.geonames[0].lng],10);
$('#country .output').text(data.geonames[0].countryName);
$('#region .output').text(data.geonames[0].adminName1);
$('#city .output').text(data.geonames[0].name);
}
function geocodeForward(options){
options.username = 'wbowling';
options.type = 'json';
options.featureCode = 'PPL';
$.ajax({
url: 'http://api.geonames.org/search',
data: options,
dataType: 'json'
})
.error(function(message){
console.error('failed forward geocoding',message);
})
.success(function(data){
updateMarker(data);
});
}
function geocodeReverse(geoposition){
var options = {};
options.username = 'wbowling';
options.type = 'json';
options.lat = geoposition.coords.latitude;
options.lng = geoposition.coords.longitude;
options.radius = geoposition.accuracy || 25;
// options.maxRows = 10;
$.ajax({
url: 'http://api.geonames.org/findNearbyPlaceName',
data: options,
style: 'full',
cities: 'cities15000',
dataType: 'json'
})
.error(function(message){
console.error('failed reverse geocoding',message);
})
.success(function(data){
updateMarker(data);
...