Commits

stefano cudini committed 96ced75 Draft

added cloudmade demo

Comments (0)

Files changed (1)

demos/cloudmade.html

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
+<html xmlns="http://www.w3.org/1999/xhtml"> 
+<head> 
+<title></title> 
+<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" />
+<style>
+.search-input {
+	font-family:Courier
+}
+.search-input,
+.leaflet-control-search {
+	max-width:400px;
+}
+</style>
+</head>
+
+<body>
+<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="http://geocoding.cloudmade.com">geocoding.cloudmade.com</a></small>
+</div>
+
+<script src="/leaflet/leaflet.js"></script>
+<script src="../leaflet-search.js"></script>
+<script>
+
+	var map = new L.Map('map', {zoom: 9, center: new L.latLng([41.575730,13.002411]) });
+	map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));	//base layer
+	
+	var apiKey = 'ccf7b09213284d9391e2b001c7ce2103';
+	//cloudmade api key for this demo
+	
+	L.control.search({
+			url: 'http://geocoding.cloudmade.com/'+apiKey+'/geocoding/v2/find.js?query={s}',
+			jsonpParam: 'callback',
+			autoCollapse: true,
+			zoom:10,
+			markerLocation: true,
+			filterJSON: function(json) {
+				var key, loc, rjson = {},
+					features = json.features;
+					
+				for(var i in features)
+				{
+					key = features[i].properties.name;
+					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();
+			
+		})
+		.addTo(map);
+
+</script>
+
+<div id="copy">powered by <a href="mailto:stefano.cudini@gmail.com">Stefano Cudini</a></div>
+</body>
+</html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.