Read Local GeoJSON File in OpenLayers – Detailed Guide

geojsonopenlayers

I am kinda new to OpenLayers and not (yet) very experienced in JavaScript.

I have a WordPress blog and I want to replicate and adjust the following script to my needs: http://jsfiddle.net/eqsrnjos/1/

With one big exception: I need to load the GeoJSON file from the server instead of defining it in the top (so replace the var geoJson).

However the most straight forward way does not seem to work for me:

function getData() {
return jQuery.getJSON("/json/studyCentroids.json");
}

var features = new ol.format.GeoJSON().readFeatures( getData() );

In Firebug I can see that the GeoJSON file is properly loaded, but it does not seem to appear for some reason?

Best Answer

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: 'http://yourserver.com/yourgeojsonfile.js'
    }),
    style: new ol.style.Style({
        image: new ol.style.Circle( /** @type {olx.style.IconOptions} */ ({
            radius: 20,
            fill: new ol.style.Fill({
                color: '#ffff00'
            })
        }))
    })
});

http://jsfiddle.net/expedio/9hnjok8n/

Related Solutions

[GIS] Problem loading a GeoJSON file using Openlayers

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.

[GIS] D3.js cannot render the geoJSON file

UPDATE:

Your problem seems to be with your data. Here is a snippet of your file:

      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              585951.8,
              181704.9
            ],
            [
              576293.9,
              181299.8
            ],

If I'm not mistaken, those coordinates use the Ordnance Survey National Grid reference system. By default, geoJSON expects the coordinates to be WGS84(longitude, latitude). You can try converting the shape files again and making sure that the output reference system is WGS84. You can do this in QGIS by saving the file as geoJSON and selecting WGS84 as the output coordinate reference system.

The resulting geoJSON should work fine. So to answer your question, the format is correct. It's the coordinates that aren't right.

Here is the geoJSON spec for your reference next time.

I think the problem is that your code expects some attributes to be present in the geoJSON. The code has some specific assumptions about the contents of the geoJSON file. You can't just expect to replace the geoJSON in the exercise with your own file and expect it to work. It is highly unlikely that the attributes in your files would be the same, especially when they're from different sources. ~~You wouldn't expect code written for visualizing data from one CSV to automatically work with a different CSV file without some tweaks, would you? The data has changed and so must the code.~~ You can start by comparing the contents of the geoJSON files and checking the differences. You can do this by loading them in a text editor and comparing the contents. See what the code expects in the file and tweak it accordingly. You can also load them into QGIS and see what attributes are different. The geoJSON format only specifies how you can encode geographic data structures. The contents of the file are up to you. In much the same way that CSVs only tell you how to encode tabular data. What the column names and other content are up to the data producer.

Best Answer

Related Solutions

[GIS] Problem loading a GeoJSON file using Openlayers

[GIS] D3.js cannot render the geoJSON file

Related Question