[GIS] Problem loading GeoJSON file on geojson.io

geojsonjson

I am newbie in GeoJSON file. I am having difficulty to load my GeoJSON file on geojson.io. Here is my GeoJSON file:

https://gist.github.com/anonymous/0abb8f926977d577b52d.

The source file is from:

http://data.gov.sg/common/search.aspx?cs=1&q=Region+Census2010&a=AVA,HPB,IDA,IPOS,IE,MINDEF,SCDF,SPF,NHB,PUB,SLA,SSC,STB,WDA,URA&da=CPF,CAAS,EDB,EMA,HSA,IRAS,LTA,MPA,MCCY,MOE,SING,MFA,MOH,ICA,SPS,MSF,DOS,MOT,MAS,NYP,NAC,NLB,NPAR,RP,SP,SPIB&c=12,03,02,07,09,04,08,05&dc=01,10,06,11&f=SHP&df=CSV,KML,PGDB,TXT,OTHERS,XLS,XML&page=1

named RegionalCensus2010.

It is a shapefile. I convert the shapefile to GeoJSON using QGIS. I don't have any issue when I am using GeoJSON file from other resources like US government file, but somehow I just can't load my GeoJSON file. I have checked the structure of the file which seems to be correct but I am not sure why I can't load map layer on geojson.io.

Best Answer

Your data seems to be in a CRS which is not WGS84 (i.e. EPSG:4326). Thus, it can not be properly displayed by github gists nor on geojson.io.

Try to re-export the original shapefile from QGIS to geojson , and choose WGS84 EPSG:4326 in the CRS field of the dialog that opens when you right-click the layer in QGIS and choose "save as.."

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.

Leaflet GeoJSON – How to Load External GeoJSON File into Leaflet Map

Look into Leaflet-Ajax. It streamlines everything. Will give up-vote for Neogeomat for mentioning it.

Get the script here (github repo) and add it to your header:

<script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script>

Then it's a matter of uploading with the file name.

var geojsonLayer = new L.GeoJSON.AJAX("foo.geojson");       
geojsonLayer.addTo(map);

Really straight forward fix and it works. So yay.

Best Answer

Related Solutions

[GIS] Problem loading a GeoJSON file using Openlayers

Leaflet GeoJSON – How to Load External GeoJSON File into Leaflet Map

Related Question