[GIS] Read GeoJSON with openlayers

geojsongeoserveropenlayers-2request

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?

Best Answer

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.

Related Question