I'll make a page for viewing routes with openlayers, postgresql / postgis and pgrouting. The part of the seat is already ok, I'm using OSM data. The image below is to illustrate what I'm doing now: a page where the user enters origin and destination and I'll do the geocode these addresses to play the coordinates in my sql to obetr the route.
And the following error is occurring, I saw several posts on the subject but it is not clear how I can solve.
XMLHttpRequest cannot load http://www.openrouteservice.org/php/OpenLSLUS_Geocode.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. /C:/Desenv/FitTaxi/FitTaxi/index.html:1
Uncaught TypeError: Cannot read property 'documentElement' of null
My javascript code:
<script type='text/javascript'>
var map;
function init() {
map = new OpenLayers.Map('map_element',{
maxExtent: new OpenLayers.Bounds(
-128 * 156543.0339,
-128 * 156543.0339,
128 * 156543.0339,
128 * 156543.0339),
maxResolution: 156543.0339,
units: 'm',
projection: new OpenLayers.Projection('EPSG:900913'),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
});
var osm_layer = new OpenLayers.Layer.OSM(
'OpenStreetMap Layer'
);
map.addLayers([osm_layer]);
var point = new OpenLayers.LonLat(-51.22,-30.08);
point.transform(new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject());
map.setCenter(point, 12);
map.addControl(new OpenLayers.Control.LayerSwitcher({}));
if(!map.getCenter()){
map.zoomToMaxExtent();
}
}
function submitForm() {
var queryString = document.getElementById('origem').value;
OpenLayers.Request.POST({
url: "http://www.openrouteservice.org/php/OpenLSLUS_Geocode.php",
scope: this,
failure: this.requestFailure,
success: this.requestSuccess,
headers: {"Content-Type": "application/x-www-form-urlencoded"},
data: "FreeFormAdress=" + encodeURIComponent(queryString) + "&MaxResponse=1"
});
}
function requestSuccess(response) {
var format = new OpenLayers.Format.XLS();
var output = format.read(response.responseXML);
if (output.responseLists[0]) {
var geometry = output.responseLists[0].features[0].geometry;
var foundPosition = new OpenLayers.LonLat(geometry.x, geometry.y).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
map.setCenter(foundPosition, 16);
} else {
alert("Sorry, no address found");
}
}
function requestFailure(response) {
alert("An error occurred while communicating with the OpenLS service. Please try again.");
}
</script>
HTML code:
Call the map...
<body onload='init();'>
<div class="form-group">
<label for="inputOrigem" class="col-sm-2 control-label">Origem</label>
<input type="text" id="origem" class="form-control" placeholder="Origem">
<label for="inputDestino" class="col-sm-2 control-label">Destino:</label>
<input type="text" id="destino" class="form-control" placeholder="Destino">
<hr />
<button type="submit" value="submit" onclick="submitForm();" class="btn btn-default">Pesquisar</button>
</div>
</body>
