1

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

3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.