how to host geojson files on an external url

We have been bombarded with this question severally by viewers and we decided to post a demonstration of a simple way to host geojson files using some free web  tools.

For this demonstration, we will be using our QGIS Desktop to convert a shapefile to geojson, our Github account to do the hosting and Rawgit to convert the content headers. You can sign up for Github if you dont have any previous account to follow the demonstration.

1. We will use QGIS Desktop to convert a shapefile to geojson format. Launch QGIS and from the browser panel select a shapefile, double click the shapefile to add it to the Layer window.

image

2. Righ Click on the layer and select Save As from the dropdown menu.

image

3. In the Save vector layer as window, make sure you use the dropdown button to select Format as GeoJSON. Click Ok to save.

image

4. See the geojson file now added as a layer in the map window (Highlighted in blue on the screenshot below).

image

5. Now we have created our geojson file, Login into your Github account online and select New repository. Note we choose to use a new one for the purposes of this demonstration.

image

6. The Create a new repository page will open. Fill in the name and description (optional) and make sure you check the red boxed option on the screenshot below and then click Create repository.

image

7. Click on Upload file to upload the geojson file we created earlier.

image

8. Click on choose your files (A ) and navigate to where the geojson file was saved. Select it and it will be uploaded in the section numbered B. After the upload is complete, click on Commit changes tab (C ) to save the changes in the repository..

image

10. The file is now in the repository (red boxed section on the screenshot below). Click on it to view the contents.

image

11. The next page displays the geojson file open with openlayers plugin for github.

image

12. Go up to the address bar and copy the URL

image

13. Search and open the address https://rawgit.com. Paste the copied URL in the red boxed section. Then copy the resultant URL where there a red tick under ‘Use this URL for production’.

image

14.  Now we will deploy this URL to use in a source code using google map api to load a geojson file and draw it as a layer on a web page. See the red boxed section for the copied URL. The web page will load in the geojson file from its address online.

image

15. Save the text file as HTML and open with your prefferd modern browser. The web page with a web map with the geojson file drawn as a vector layer on it.

image

Thank you for following the blog.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s