Skip to content

Instantly share code, notes, and snippets.

@jlord
Created April 19, 2012 06:39
Show Gist options
  • Save jlord/2419174 to your computer and use it in GitHub Desktop.
Save jlord/2419174 to your computer and use it in GitHub Desktop.
Geocoder with Leaflet
<html>
<head>
<title>I'm learning</title>
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
<script src="http://zeptojs.com/zepto.js" type="text/javascript"></script>
<script src="map.js" type="text/javascript"></script>
<style>
body {margin: 0; padding: 0; text-align: center;}
#button { -webkit-transition: -webkit-transform 3s ease-in; box-shadow: 0 0 25px #EFEF4D; margin: auto; margin-top: 15px; padding: 3px 6px; height: 20px; width: 200px;}
#button:hover { -webkit-transform: rotate(360deg); }
#button:active { box-shadow: 0 0 25px #4DEFB9; }
input {margin: auto; margin-top: 10px; width: 300px;}
#map {margin: auto; box-shadow: 0 0 5px #888; height: 70%; width: 75%;}
h1 {font-family: Baskerville; margin-top: 15px;}
</style>
</head>
<body>
<h1>HeLlO. Yes, this is map.</h1>
<div id="map"></div>
<input type=text value="10 Downing Street, London"></input>
<div id="button">SUBMIT QUERY, HUMAN!</div>
</body>
</html>
var map
var defaultZoom = 13
function loadMap() {
map = new L.Map('map');
var cloudmade = new L.TileLayer('http://tile.stamen.com/toner/{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
});
var warnervegas = new L.LatLng(32.617, -83.612); // geographical point (longitude and latitude)
map.setView(warnervegas, defaultZoom).addLayer(cloudmade);
$("#button").bind('click', function clickButt(){
var address = $("input").val()
geoCode(address, displayAddress)
})
}
document.addEventListener('DOMContentLoaded', loadMap)
function geoCode(address, callback) {
var firstPart = 'http://geocoding.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/geocoding/v2/find.geojs?query='
var url = firstPart + encodeURI(address)
$.ajaxJSONP({
url: url + '&callback=?',
success: callback
})
}
function displayAddress(data) {
console.log(data)
var markerLocation = new L.LatLng(data.features[0].centroid.coordinates[1], data.features[0].centroid.coordinates[0]);
setCenter(markerLocation)
var marker = new L.Marker(markerLocation);
map.addLayer(marker);
}
function setCenter(markerLocation) {
map.setView(markerLocation, defaultZoom)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment