city search in openlayers, openstreemaps
I am new with Openlayers and OpenStreetMaps. I need to insert in the map a search city. In order to write the name of city, click on button, and get the position of the city in the map. Could anybody help me? I show the code I use, well in the linia var jsonurl = "/data/2.1/find/name?q="+param; I really don't have the script name,...it fails here, .... thank you in advanced...
<html>
<head><title>OpenLayers</title></head>
<body>
<div id="mapdiv">
<form id="searchform" action="#" method="get" style="display:inline"
onsubmit="FindCity(); return false">
<input type="text" id="query_str" name="query_str" value="London, UK"
onfocus="this.value = (this.value=='London, UK')? '' : this.value;">
<input type="submit" value=" Find ">
</form>
</div>
<link rel="stylesheet" href="/OpenLayers-2.13.1/theme/default/google.css" type="text/css">
<script src="http://maps.google.com/maps/api/js?v=3.3&sensor=false"></script>
<script type="text/javascript" src="/OpenLayers-2.13.1/OpenLayers.js"> </script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
var pois = new OpenLayers.Layer.Text( "My Points",
{ location:"data1.txt",
projection: map.displayProjection
});
map.addLayer(pois);
//Set start centrepoint and zoom
//TODO: Is it possible to just zoom to extents of defined markers instead?
var lonLat = new OpenLayers.LonLat( 1.00, 41.00 )
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
var zoom=7;
map.setCenter (lonLat, zoom);
function getSearchData(JSONtext)
{
console.log( JSONtext );
JSONobject = ParseJson(JSONtext);
city = JSONobject.list;
if( city.length == 0 ) {
ShowAlertMess( 'not found' );
return;
}
var centre = new OpenLayers.LonLat(city[0].coord.lon, city[0].coord.lat);
centre.transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")
);
map.setCenter( centre, 10);
// alert(JSONobject.cod);
}
function FindCity()
{
param = document.getElementById('query_str').value;
var jsonurl = "/data/2.1/find/name?q="+param;
$.get(jsonurl, getSearchData).error(errorHandler);
return false;
}
</script>
</body>
</html>
