Different coloured kml paths using Omnivore to load

[polla...@gmail.com]

Hello,

I'm very new to web-programming and am attempting to teach myself enough to be able to do what I want - currently make maps using Leaflet and show kml files.

I'd like to be able to show more than one path - but with different colours.

Currently I can add any number of kml paths to a map, but if I try to change their colour using css then it changes the colour of all the paths.

Is there a way to have different colours?

Thanks,

Matt

[Rowan Winsemius]

Hi matt,

The easiest thing for you to probably do is change your kml file to geojson using something like

http://mapbox.github.io/togeojson/

Once you've got it a geojson you should be able to symbolise your different paths based on some attribute of the data

http://leafletjs.com/examples/geojson.html

i hope that helps

Rowan

---

This message is intended for the addressee named and may contain confidential information. If you are not the intended recipient, please delete it and notify the sender. Views expressed in this message are those of the individual sender, and are not necessarily the views of their organisation.

[polla...@gmail.com]

Rowan,

Thanks for the reply - I've converted a couple of kmls to geojson formats and got leaflet reading them both in and colouring them differently.

This is much better than my old approach of reading in the kml file using php, splitting each element into an array and then picking out the coordinates into a javascript array for use in leaflet!

However, I have around 250 kml files and don't really want to convert each one - their traces of walks downloaded from runkeeper. Is it possible to read in the kml file, convert it to GeoJson and then disply it?

The ToGeoJson site on Github seems to suggest it is using toGeoJSON.kml(doc) but I don't understand how to get the kml file using JQuery - this bit in the text...

"Convert a KML document to GeoJSON. The first argument, doc, must be a KML document as an XML DOM - not as a string. You can get this using jQuery's default .ajax function or using a bare XMLHttpRequest with the .response property holding an XML DOM."

Would you (or anyone else) be able to offer assistance or point me in the right direction?

Thanks,

Matt

[Rowan Winsemius]

Hi Matt,

On second reading of the omnivore documentation you may well be able to achieve what you want using it, see

https://github.com/mapbox/leaflet-omnivore#custom-layers

You'll see in the example that the using omnivore and pass the results to a var called customLayer, they then treat the var customLayer like geojson which you should be able style...

So hopefully that gives you enough to go. Otheriwse perhaps if you could post one of your kml files and let me know what attribute you're trying to symbolise on I can take a more indepth look.

Cheer

[polla...@gmail.com]

Thanks for this - I'll give it a go and report back (though it probably won't be till next week now).

[Benedetto Dell'Ariccia]

Don't know how you load your paths but I use something like this, sorry if it doesn't help you but I'm quite new with leaflet, sorry.

var xxxx= L.geoJson(yyyy, {

    

     onEachFeature: function (feature, layer) {

         layer.bindPopup(feature.properties.Name);

     },

   style: function(feature) {

        switch (feature.geometry.type) {

            case 'LineString': return {color: "#00ff00"};

        }

    }

});    

[polla...@gmail.com]

I've tried directly assigning the Omnivore.kml(file) call to a variable 

var customLayer = omnivore.kml('RK_kml _2006-11-04_1000.kml');

and then using 

            L.geoJson(customLayer, {

                style: walk1Style

            }).addTo(map);

to add it to the map, with walk1Style defined as below...

            var walk1Style = {

                "color": "green",

                "weight": 5,

                "opacity": 0.65

            };

and am having no joy.

When I converted the kml file to a GeoJSON file and read it in the above code worked - and in additional I could define walk1 and walk2 (and their associated styles) and read them both in and display them both, with different colours.

I've attached my current code and an example kml file - this is just a download from my Runkeeper

What I'm aiming to do (in the end) is the following:

• I've got a database of all my walks, with a date and a kml filename. I've also got a folder of kml files.
• I'd like to be able to read in each kml file in turn and colour it based on how long ago it was - i.e. walks in 2014 are red, 2013 are orange and any before that are yellow.
• The date can come from the database, so I don't need anything from the kml file other than for it to be drawn to the map.

Thanks for your help.

Matt

[Rowan Winsemius]

Hi Matt,

I've tested this and it works

          

            customLayer = L.geoJson(null, {

                style: {

                "color": "green",

                "weight": 5,

                "opacity": 0.65}

            }).addTo(map);

     

            var myLayer = omnivore.kml('RK_kml _2006-11-04_1000.kml', null, customLayer).addTo(map);

And this approach also works

            var walk1Style = {

                "color": "green",

                "weight": 5,

                "opacity": 0.65

            };

            

            customLayer = L.geoJson(null, {

                style: walk1Style   

            }).addTo(map);

            

            var myLayer = omnivore.kml('RK_kml _2006-11-04_1000.kml', null, customLayer).addTo(map);

So there's a few options for you, you're almost there!

Cheers

Rowan

[polla...@gmail.com]

Thanks again - not had a chance to try it yet though as installing something yesterday seems to have shifted where my localhost is so none of my local pages work. Having uninstalled anything server like in an attempt to fix it by starting again I've now discovered that the free version of Zend has gone.

I'm sure this is all made deliberately hard work!

[Matthew Pollard]

Rowan,

Finally got there - though not without a lot of stress! On re-installing everything the Omnivore add in stopped working at all, but reading in *.js files via geojson format was fine. 

Not sure why, but it worked today so a couple of hours later I had my map!

Thanks for all your help.

Matt

--

---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/6zY9h-DGaTg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Rowan Winsemius]

Congratulations Matt! Yeah I get a bit confused about how omnivore works through the conversation processes, you need a brain the size of 2 footballs to fully understand it, Im sure it makes sense if you know what you're doing but Im an amateur hack too:)