leaflet-search / demos / cloudmade.html

The default branch has multiple heads

Full commit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> 
<html xmlns=""> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="/leaflet/leaflet.css" />
<link rel="stylesheet" href="../leaflet-search.css" />
<link rel="stylesheet" href="../style.css" />
.search-input {
.leaflet-control-search {

<h3><a href="../"><big></big> Leaflet.Control.Search</a></h3>

<h4>GeoCode Cloudmade Example: <em>search locations name by Geocoding Cloudmade jsonp Service</em></h4>
<div id="map"></div>

<div id="post-it">
<b>Search values:</b><br />
Geocoding API by <br />
<small><a href=""></a></small>

<script src="/leaflet/leaflet.js"></script>
<script src="../leaflet-search.js"></script>

	var map = new L.Map('map', {zoom: 9, center: new L.latLng([41.575730,13.002411]) });
	map.addLayer(new L.TileLayer('http://{s}{z}/{x}/{y}.png'));	//base layer
	var apiKey = 'ccf7b09213284d9391e2b001c7ce2103';
	//cloudmade api key for this demo{
			url: ''+apiKey+'/geocoding/v2/find.js?query={s}',
			jsonpParam: 'callback',
			autoCollapse: true,
			markerLocation: true,
			filterJSON: function(json) {
				var key, loc, rjson = {},
					features = json.features;
				for(var i in features)
					key = features[i];
					loc = L.latLng(features[i].centroid.coordinates);
					loc.props = features[i].properties;
					//val must be L.Latlng... or an extension of L.Latlng
					//	which may contain arbitrary properties
					rjson[ key ]= loc;
				return rjson;
		.on('search_locationfound', function(e) {
			var loc = e.latlng,
				title = e.text,
				props = loc.props,
				popup = '<h4>'+title+'</h4>';
			for(var i in props)
				popup += '<b>'+i+':</b> '+ props[i] +'<br>';
			//stringify feature properties

			L.marker(loc,{title: title}).addTo(map).bindPopup(popup).openPopup();


<div id="copy">powered by <a href="">Stefano Cudini</a></div>