0

I generated a GeoJSON from a table in EPSG:WGS84 in postgis

SELECT ST_AsGeoJSON(geom) FROM "onibus"

I put this file into the www folder on my server. I'm running geoserver locally. My pages are also in the folder wwww.

I get three errors:

Uncaught TypeError: Cannot read property 'wrapDateLine' of null OpenLayers.js:197

XMLHttpRequest cannot load file:///C:/Program%20Files/GeoServer%202.4.5/data_dir/www/featureCollection.geojson. Received an invalid response. Origin 'null' is therefore not allowed access. mapGeoJson.html:1

Uncaught TypeError: Cannot read property 'projection' of null mapGeoJson.html:28

This is my code:

<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='utf-8' />
 <title>My OpenLayers Map</title>
 <script type='text/javascript' src='OpenLayers.js'></script>


 <script src="http://maps.google.com/maps/api/js?sensor=false"></script>

 <script type='text/javascript'>


 var map;


 function geraMapa() {

     map = new OpenLayers.Map('map_element', {}); 


    vectorLayer = new OpenLayers.Layer.Vector("GeoJsonLayer");
    map.addLayer(vectorLayer);

    function handler(request) {

        var geojson_format = new OpenLayers.Format.GeoJSON({
            'internalProjection': map.baseLayer.projection,
            'externalProjection': new OpenLayers.Projection("EPSG:4326")
        });

        vectorLayer.addFeatures(geojson_format.read(request.responseText));
    }

    var request = OpenLayers.Request.GET({
        url: "featureCollection.geojson",
        callback: handler
    });


    map.addControl(new OpenLayers.Control.LayerSwitcher({}));


    if(!map.getCenter()){
    map.zoomToMaxExtent();
    }
 }

 </script>
</head>

<body onload='geraMapa();'> 

 <div id='map_element' style='width: 1000px; height: 900px;'>
 </div>

</body>
</html>

Can anyone help me troubleshoot the errors?

Improve this question
3
  • Pay attention to capitalize projection to Projection in 'internalProjection': map.baseLayer.projection,
    – Magno C
    Apr 15, 2014 at 13:08
  • You should host the app in a server, and consume it from your Browser using the HTTP protocol, instead of the File Protocol.
    – Devdatta Tengshe
    Jun 21, 2016 at 4:09
  • is there any reason you're not publishing the postgis table as a layer then consuming the geojson that geoserver produces instead of creating a flat file?
    – DPSSpatial_BoycottingGISSE
    Jul 8, 2017 at 16:30

1 Answer 1

Reset to default
1

Here is my own Ajax + GeoJSON + jQuery get layer data:

GLOBAL VARS:

var map;
var unitsLayer;
var fromProjection = new OpenLayers.Projection("EPSG:4326");   
var toProjection   = new OpenLayers.Projection("EPSG:900913");

INIT MAP

function initMap() {
        map = new OpenLayers.Map( ... );
        createUnitsLayer();
        loadUnits();
}

INIT LAYER

function createUnitsLayer() {
    var def_style = new OpenLayers.Style({
        pointRadius : "${size}",
        label: "${name}",
        labelAlign: "ct",
        fontSize: 9,
        labelYOffset : 17,
        cursor: "pointer",
        rotation : 0,
        fillOpacity: 0.5,
    });
    var sel_style = new OpenLayers.Style({
        fillOpacity: 1
    });
    var styleMap = new OpenLayers.StyleMap({"default" : def_style, "select": sel_style});
    unitsLayer = new OpenLayers.Layer.Vector("Unidades",  {styleMap: styleMap} );
    map.addLayer(unitsLayer);
}

LOAD LAYER CONTENT BY USING AJAX+JQUERY

function loadUnits() {
    var mapbounds = map.getExtent();
    mapbounds.transform(toProjection, fromProjection );
    bbox = mapbounds.toArray();
    var bleft = bbox[0];
    var bbottom = bbox[1];
    var bright = bbox[2];
    var btop = bbox[3];
    showLoader();
    var origem = "getUnits?bleft=" + bleft + "&bbottom=" + bbottom + "&bright=" + bright + "&btop=" + btop;
    $.ajax({
        url: origem,
        dataType: "json"
    }).always(function() { hideLoader(); }).done(function(data) {
        data = eval( data );
        var geojson_format = new OpenLayers.Format.GeoJSON({
            'internalProjection': map.baseLayer.projection,
            'externalProjection': new OpenLayers.Projection("EPSG:4326")
        });
        unitsLayer.removeAllFeatures();
            unitsLayer.addFeatures(geojson_format.read(data));

    });     
}

Now you can call loadUnits() many times you want to update what you show in map.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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