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 online and loading the same geojson onto a web map as a vector layer .
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 do not 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.
2. Righ Click on the layer and select Save As from the dropdown menu.
3. In the Save vector layer as window, make sure you use the dropdown button to select Format as GeoJSON. Click Ok to save.
4. See the geojson file now added as a layer in the map window (Highlighted in blue on the screenshot below).
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.
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.
7. Click on Upload file to upload the geojson file we created earlier.
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..
10. The file is now in the repository (red boxed section on the screenshot below). Click on it to view the contents.
11. The next page displays the geojson file open with openlayers plugin for github.
12. Go up to the address bar and copy the URL
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’.
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.
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.
Thank you for following the blog.