Drawing Geojson line features onto leaflet map

This post will demonstrate drawing a geojson line feature as a vector layer on a leaflet map.Shapefiles, CSV, KML and other GIS data can be converted to geojson file format and loaded onto leaflet powered maps. In this demo, geojson files will be loaded into the script as plain text.

Within the script section of the source code, create a variable object to load the geojson line features. Geojson line features are defined as type-LineString.

In plain text:

var fault = [{"type": "LineString","coordinates": [[8.90, 9.00], [7.20, 8.11], [6.20, 6.44]]
	}, {"type": "LineString","coordinates": [[3.40, 7.50], [5.80, 6.60], [7.11, 9.45]]
	}];

Add CSS code to style the lines and create a variable object for the style
var myStyle = {
	"color": "#ff7800",
	"weight": 5,
	"opacity": 0.65
	};

Then draw the geojson line features as vector layer to the map
 using L.geojson function. Add the style (color, weight etc) to the lines as an 
option of the function.
 L.geoJson(fault, {style: myStyle}).addTo(map);

Below is a screenshot of the geojson line features drawn onto the leaflet map

Capture-5

Live map at:

http://htmlpreview.github.io/?https://github.com/mayotunde/line/blob/gh-pages/geojsonLine.html

Below is the source code of the screenshot shown above.


doctype html-001


Thank you for following the demonstration. Feel free to send your comments and feedback.

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