[GIS] Problem loading a GeoJSON file using Openlayers

geojsonopenlayers-2

I am setting up a website using Openlayers and GeoJSON files. When I get the GeoJSON file using the code below it work as expected.

url: "./file.geojson",

But if I try and use the full domain call, see below, it does not work. Why?

url: "http://www.domain.com/file.geojson",

I need to use the full domain call because I am trying to test it locally on my computer. Is there a way to get the file locally from my computer?

<!DOCTYPE html>

var lon = -80.233,
lat = 40.665,
zoom = 15,
epsg4326 = new OpenLayers.Projection('EPSG:4326'),
epsg900913 = new OpenLayers.Projection('EPSG:900913');
var arrayAerial;
var select;

    function init(){
        var map = new OpenLayers.Map('map', {
            units: 'm',
            numZoomLevels: 19,
            controls: [
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.ScaleLine(),
                new OpenLayers.Control.MousePosition(),
                new OpenLayers.Control.LayerSwitcher(),
                //new OpenLayers.Control.OverviewMap(),
                new OpenLayers.Control.PanZoomBar()
            ],
            projection: epsg900913,
            displayProjection: epsg4326 //Is used for displaying coordinates in appropriate CRS by MousePosition control
        });






        arrayOSM = ["http://otile1.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.jpg",
                "http://otile2.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.jpg",
                "http://otile3.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.jpg",
                "http://otile4.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.jpg"];


        arrayAerial = ["http://otile1.mqcdn.com/tiles/1.0.0/sat/${z}/${x}/${y}.jpg",
                    "http://otile2.mqcdn.com/tiles/1.0.0/sat/${z}/${x}/${y}.jpg",
                    "http://otile3.mqcdn.com/tiles/1.0.0/sat/${z}/${x}/${y}.jpg",
                    "http://otile4.mqcdn.com/tiles/1.0.0/sat/${z}/${x}/${y}.jpg"];

        baseOSM = new OpenLayers.Layer.OSM("MapQuest-OSM Tiles", arrayOSM);                        
        baseAerial = new OpenLayers.Layer.OSM("MapQuest Open Aerial Tiles", arrayAerial);

        var sanpipe_layer = new OpenLayers.Layer.Vector("San Sewer", {
            styleMap: new OpenLayers.StyleMap({
                    "default": new OpenLayers.Style({
                    pointRadius: 5,
                    fillColor: "#2da725",
                    fillOpacity: 0.8,
                    strokeColor: "#2da725",
                    strokeWidth: 3,
                    strokeOpacity: 0.8 } ),

                }),

            projection: epsg4326,
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "./sanpipe.geojson",
                format: new OpenLayers.Format.GeoJSON()
            })
        });

        var mh_layer = new OpenLayers.Layer.Vector("Manholes", {
            styleMap: new OpenLayers.StyleMap({
                    "default": new OpenLayers.Style({
                    pointRadius: 5,
                    fillColor: "#9de24f",
                    strokeColor: "#0d4cd6",
                    strokeWidth: 1,
                    strokeOpacity: 0.8 } ),

                }),

            projection: epsg4326,
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "./mh.geojson",
                format: new OpenLayers.Format.GeoJSON({
                    extractAttributes: true
                })
            })
        });

        var waterline_layer = new OpenLayers.Layer.Vector("waterline", {
            styleMap: new OpenLayers.StyleMap({
                    "default": new OpenLayers.Style({
                    pointRadius: 5,
                    fillColor: "#00FF01",
                    fillOpacity: 0.8,
                    strokeColor: "#0d4cd6",
                    strokeWidth: 3,
                    strokeOpacity: 0.8 } ),

                }),

            projection: epsg4326,
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "./waterline.geojson",
                format: new OpenLayers.Format.GeoJSON()
            })
        });

        var valves_layer = new OpenLayers.Layer.Vector("Valves", {
            styleMap: new OpenLayers.StyleMap({
                    "default": new OpenLayers.Style({
                    pointRadius: 3,
                    fillColor: "#fdf700",
                    strokeColor: "#0d4cd6",
                    strokeWidth: 1,
                    strokeOpacity: 0.8 } ),

                }),

            projection: epsg4326,
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "./valves.geojson",

                format: new OpenLayers.Format.GeoJSON()
            })
        });

        var hyd_layer = new OpenLayers.Layer.Vector("Hydrants", {
            styleMap: new OpenLayers.StyleMap({
                    "default": new OpenLayers.Style({
                    pointRadius: 5,
                    fillColor: "#d81417",
                    strokeColor: "#0d4cd6",
                    strokeWidth: 1,
                    strokeOpacity: 0.8 } ),

                }),

            projection: epsg4326,
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "./hyd.geojson",

                format: new OpenLayers.Format.GeoJSON()
            })
        });

        map.addLayer(baseOSM);
        map.addLayer(baseAerial);
        map.addLayer(sanpipe_layer);
        map.addLayer(mh_layer);
        map.addLayer(waterline_layer);
        map.addLayer(valves_layer);
        map.addLayer(hyd_layer);

        select = new OpenLayers.Control.SelectFeature(mh_layer);

        mh_layer.events.on({
            "featureselected": onFeatureSelect,
            "featureunselected": onFeatureUnselect
        });

        map.addControl(select);
        select.activate();  

        map.setCenter(new OpenLayers.LonLat(lon, lat).transform(epsg4326, epsg900913), zoom);
    }

    function onPopupClose(evt) {
        select.unselectAll();
    }
    function onFeatureSelect(event) {
        var feature = event.feature;
        popup = new OpenLayers.Popup.FramedCloud("chicken", 
            feature.geometry.getBounds().getCenterLonLat(),
            null,
            "<h2>"+feature.attributes.STRUCT_ID + "</h2>",
            null, true, onPopupClose);

        feature.popup = popup;
        map.addPopup(popup);
    }

    function onFeatureUnselect(event) {
        var feature = event.feature;
        if(feature.popup) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
            delete feature.popup;
        }
    }
</script>

Best Answer

To get the file properly, you need to follow these steps:

Always use a webserver to host your own files. These kinds of calls will not be made if your browser is opening the html using the file protocol.
If in your url (http://www.domain.com/file.geojson) the domain is not the same as the domain of your webserver, JavaScript cannot directly access the data. Due to Javascript security rules, you are not allowed to make an XMLHttpRequest to another server. For example, if you have your openlayers application running off your webserver, and you are accessing it as http://localhost/map.html, the JavaScript won't be able to access an location such as http://www.example.com/file.geojson.

In this case you will be required to use a proxy. The OpenLayers FAQ has a section on setting up your own ProxyHost. Here's the relevant excerpt:

How do I set up a ProxyHost?

An example proxy host script is available here: trunk/openlayers/examples/proxy.cgi

For the standard Apache configuration, you would place proxy.cgi into your /usr/lib/cgi-bin/ directory.

Once a proxy host script has been installed, you must then edit the OpenLayers.ProxyHost variable to match that URL.

Given the above standard Apache configuration:

OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";

If you have done something like this, you should be able to visit:

http://YourDomain.example.com/cgi-bin/proxy.cgi

The resulting content at that page should be the openlayers.org website.

If you get a 404 error instead, either the proxy script is not in the right location, or your webserver is not configured correctly.

Related Solutions

[GIS] Trouble displaying GeoJSON file in OpenLayers

DSaeger,

I've used the book too, but it looks like you're attempting to switch to the Spherical Meractor projection for your GeoJSON layer (as described in the one section of the book). So, I first would define your map as such:

map = new OpenLayers.Map("map", {

    projection: new OpenLayers.Projection("EPSG:3857"),
    units: "m",
    maxResolution: 156543.0339,
    maxExtent: new OpenLayers.Bounds(
        -20037508, -20037508, 20037508, 20037508.34),
    displayProjection: new OpenLayers.Projection("EPSG:4326"),
    controls: [
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.KeyboardDefaults(),
        new OpenLayers.Control.PanZoomBar(),
        new OpenLayers.Control.Scale(),
        new OpenLayers.Control.Attribution()
    ]

});

This will define your map for spherical mercator so that you can display map backgrounds from Google Maps as well. The controls are just what I include as well as the maxResolution. BTW, with OL 2.11, the latest Spherical Mercator EPSG 3857 is coded into OL. So, no need to use a Proj4js defs statement if that's the projection of the map you wish to display your data in. After that, you can add a baselayer from OpenStreetMap:

var osm = new OpenLayers.Layer.OSM("OpenStreetMap");

Then, as I was testing this at one time after reading the book, I defined the vector Style and StyleMap:

var vector_style = new OpenLayers.Style({
          strokeWidth:2, fillOpacity:0, strokeColor: '#008000'});


var vector_style_map = new OpenLayers.StyleMap({
         'default': vector_style,
         'select': {strokeColor: '#0000FF'}
});

So, this will plot my GeoJSON vector layer in green and if it's a polygon, won't fill it. If I had a selectfeature function defined, it would highlight it in blue.

Next comes your vector layer with your GeoJSON file and transformed from 4326 to 3857:

var vectorlyr = new OpenLayers.Layer.Vector(
                  "test",{
                   protocol: new OpenLayers.Protocol.HTTP({
                      url: 'myfile.geojson',
                      format: new OpenLayers.Format.GeoJSON({
                          internalProjection: new OpenLayers.Projection("EPSG:3857"),
                          externalProjection: new OpenLayers.Projection("EPSG:4326")})
                  }),
                  strategies: [new OpenLayers.Strategy.Fixed()],
                  styleMap: vector_style_map


                 });

Note that the GeoJSON file should be on your server. For my test page, it's in the same location on the server as the page.

Finally, add the layers to the map, center it, and set the zoom level. As the map is defined for spherical mercator, you have to transform the map.setCenter from lon/lat to the coordinates in map units. Now, this code was taken from one of my test pages for GeoJSON vectors and I probably could add the LayerSwitcher control when I define the map controls above.

// add layers to the map

map.addLayers([osm, vectorlyr]);

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

// transform coordinates for centering the map and set zoom level

map.setCenter(new OpenLayers.LonLat(-120, 40).transform(
    new OpenLayers.Projection("EPSG:4326"),
    map.getProjectionObject()
), 4);

If you've followed what's necessary for the rest of the page (i.e. HTML, OL, etc), then hopefully, this should help get you going.

[GIS] Problems with features, popups and strategy with OpenLayers

you can catch your opened(active) popup with this way:

map.popups[a]

you can change so update its content:

map.popups[a].contentHTML = 'Test Content';
map.popups[a].redraw();

or

map.popups[a].setContentHTML = 'Test Content'

you can show or hide your popup:

map.popups[a].show();
map.popups[a].hide();

you can update position of your popup:

map.popups[a].lonlat.lon = 10;
map.popups[a].lonlat.lat = 10;
map.popups[a].updatePosition();

for openlayers cluster you should check out Cluster Strategy Example here. Only one thing you should do is that define fillColor or externalGraphic for your cluster.

          var style = new OpenLayers.Style({
                pointRadius: "${radius}",
                fillColor: "${getColor}",
                fillOpacity: 0.8,
                strokeColor: "#cc6633",
                strokeWidth: 2,
                strokeOpacity: 0.8
            }, {
                context: {
                    radius: function(feature) {
                        return Math.min(feature.attributes.count, 7) + 3;
                    },
                    getColor: function(feature) {
                        return // Your color selection logic;
                    }
                }
            });

As the last question, i dont understand very well what you want? but try to use removeFeatures instead of destroyFeatures....

i hope it helps you...

Best Answer

Related Solutions

[GIS] Trouble displaying GeoJSON file in OpenLayers

[GIS] Problems with features, popups and strategy with OpenLayers

Related Question