Loading CSV,GPX and KML using leaflet omnivore

So far in all previous posts, we have been adding data to the leaflet powered maps in geojson file format. In this post, we will demonstrate how to load in data in other formats without first converting to geojson format. We will use the leaflet omnivore plugin which can be downloaded as a zip file from GitHub.

https://codeload.github.com/mapbox/leaflet-omnivore/zip/master

Steps to note

– Place your files i.e. CSV, KML and GPX as in this example, into the downloaded folder. In other words, the files should share the same directory as the unzipped plugin file.

– Place the HTML file in the same location as the files.

HTML, CSV, GPX and KML files all in the same directory.

Capture-14

 

Add the csv file as markers on the leaflet map. We place these

code lines immediately under the L.tileLayer line.

 

omnivore.csv(‘Pointdata.csv’).addTo(map);

omnivore.gpx(‘road.gpx’, style).addTo(map);

omnivore.kml(‘poly.kml’).addTo(map);

 

On the screenshot below is our example showing the CSV(markers), GPX (line) and KML (polygon) files loaded.

Capture-18

 

 

See live map by clicking the link below:

http://mayotunde.github.io/omnivore3

Download plain text version of source code here:

https://www.dropbox.com/s/6swau4asvi8kkk1/Loading%20csv%2C%20gpx%20and%20kml%20files%20to%20leaflet%20map%20using%20leaflet%20omnivore%20plugin.txt?dl=0

See source code for the leaflet map in the screenshot above:

Document5-001

Using custom icons, Styling and Adding pop display to the features

– Create a variable object and load the custom icon from file

var icon = L.icon({
iconUrl: ‘file:///C:/Users/user/Desktop/New folder (3)/leaflet-omnivore-master/Picture13.png’,
iconSize: [25,25]
});

 

-Use the event function on the layer to replace default markers with custom icons

omnivore.csv(‘Pointdata.csv’)
.on(‘ready’, function(layer) {
this.eachLayer(function(marker){

marker.setIcon(icon);

 

– Create a variable object, convert the marker to geojson and load the attributes of the features in property field id

var popup =
marker.toGeoJSON().properties.id;
marker.bindPopup(popup);});
}).addTo(map);

 

– Create the style variable

var style = {color: ‘black’};

omnivore.gpx(‘road.gpx’)
.on(‘ready’, function(layer) {
this.eachLayer(function(layer){

 

//Set the style to the gpx layer

layer.setStyle(style);

 

var stylepoly = {fillColor:’green’, fillOpacity: 0.4, color: ‘black’};

omnivore.kml(‘poly.kml’).addTo(map)
.on(‘ready’, function(layer) {
this.eachLayer(function(layer){

//set the style to the kml layer

layer.setStyle(stylepoly);

 

Capture-1

 

See source code for the example in the screenshot above. Download plain text version here-https://www.dropbox.com/s/5jnyui3ujzprfkc/styling%20features%20and%20adding%20custom%20icons%20with%20leaflet%20omnivore.txt?dl=0

 

Document2-001

 

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