Using JQuery to load GeoJson file from local directory and external URL

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

script src=”http://code.jquery.com/jquery-2.1.0.min.js”

Use the getJSON function of JQuery to fetch the file from the local directory and load into leaflet script.

$.getJSON(“pointoccur.geojson”, function(data){

Draw the feature on the map

L.geoJson(data).addTo(map);

});

An example of Source code for loading geojson points from local directory

gem-001

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.

 

$.getJSON(“https://cdn.rawgit.com/mayotunde/search/gh-pages/Cities.geojson”, function(data){

L.geoJson(data).addTo(map);

});

Screenshot below illustrates the web map and the point features in the geojson file drawn as a vector layer on the base map.

Capture-29

 

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