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.
Geocode
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>
1 Answer 1
This is a Cross Domain Issue as you are calling a different domain in your XMLHttpRequest than is used for the data.
I use a simple Proxy on our Server for the XMLHttpRequest from OpenLayers and the Proxy, in turn, forwards the request onto its true destination.
An Example of how to make your own Proxy can be seen here
This is also discussed here