So far in all our previous posts on drawing geojson features to leaflet powered maps, we have been loading geojson file as plain text into the source code. This post will demonstrate using Jquery plugin- which has tools that enable easy loading of geojson files from external source.
The key advantage of using Jquery is that it saves the GI analyst space on the script when dealing with larger geojson files.
Download sample geojson data https://www.dropbox.com/s/8czgqxgvqwn6g3x/pointoccur.geojson?dl=0
Download jquery file from https://jquery.com/download/
or use the internet cdn http://code.jquery.com/jquery-(version).min.js
When loading from the local directory, store the html file, geojson file and jquery script file in the same location.
First demonstration shows an example loading a geojson file from the local directory on the pc. Download the files and save in a common folder.
Note: the html file, Jquery file and geojson file must be in the same file location.
Insert the Jquery link in the head section of the html page
Use the getJSON function of JQuery to fetch the file from the local directory and load into leaflet script.
Draw the feature on the map
An example of Source code for loading geojson points from local directory
Loading geojson file from external URL using Jquery
Here, we fetch the geojson file from external source located on a web server.
Geojson files on a web server can also be stored as JSON format.
Use the get function and insert the address of the url where the geojson file is stored.
Note that the jquery and html must be in the same domain.
Screenshot below illustrates the web map and the point features in the geojson file drawn as a vector layer on the base map.
Thank you for following the blog.