Map with Flows between shapes

[polla...@gmail.com]

Hello,

I was wondering if anyone has an example of a map using leaflet which has either polygons or points that when clicked show paths from that shape/point to other shapes on the map - ideally sized based on a variable too.

Kind of like this example showing passes in a football match but on a map...

Passes in football - http://bl.ocks.org/fhernand/9a9f93f2a6b0e83a9294

This example seems to have the lines, but not the interactivity.

Flights between points - http://humangeo.github.io/leaflet-dvf/examples/html/airports.html#

And this potentially has what I want, but doesn't seem to work...

Spatial Sankey - http://bl.ocks.org/yellowcap/03cd4a6c72f661377f7e

Any advice/example gratefully received.

Thanks,

Matt

[Scott Fairgrieve]

Matt,

As part of the recent efforts I've been putting into making the Leaflet DVF fully compatible with Leaflet 1.0, I've updated the Leaflet DVF airports example to be a little more interactive:  https://github.com/humangeo/leaflet-dvf/blob/1.0dev/examples/html/airports.html

You'll need to pull down the 1.0dev branch in order to see it (I'm in the process of updating the master/0.7.3 compatible branch with this change as well).  I think is more in line with your use case.  Essentially, clicking on an airport displays the airports to which it is connected, but you could also display the connections on hover if you wanted.  Hope this helps.

Thanks,

Scott

[Matthew Pollard]

Scott,

That seems to be exactly what I'm after - thank you.

I'll report back on my progress!

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/iaWkLx0ucw0/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.

[Matthew Pollard]

Scott,

It's taken me quite a while to get around to looking at this - pesky actual work getting in the way.

I think I've made sense of most of the code (I wouldn't go so far as to say understood - it's all very new to me!).

However, I'm struggling with one thing - potentially one of the most simple. How can I change the icons to not be planes? And how do I know what is available to change them to?

If I change the <i class="icon-plane"></i> in this line

            setIcon: function (record, options) {

                var html = '<div><i class="icon-plane"></i><span class="code">' + record.code + '</span></div>';

to be <i>X</i> then I get X's instead of planes. But is there a way to get other icons - blobs, squares, etc?

Thanks,

Matt

[Matthew Pollard]

Hi,

I've removed the class declaration entirely and just get the code showing, which I think I'm fairly happy with currently. However, if you had time to explain how I could change the plane for some other image that would be appreciated.

I have one further question - with the L.HTMLUtils.buildTable - is it possible to say with fields to include/exclude?

Thanks,

Matt

[Scott Fairgrieve]

Awesome.  The icons in this example come from the older versions of Bootstrap and FontAwesome (haven't updated the examples to use Bootstrap 3 yet).  You can use whatever existing icon libraries you want with the Leaflet DivIcon class (since it just uses whatever HTML snippet you give it) - in this example, I'm constructing a DivIcon and populating it with HTML that will display a FontAwesome plane (i element with class icon-plane) with text for the airport code.  You can also display the other Leaflet Marker types plus the new marker types in Leaflet DVF (e.g. RegularPolygonMarker, BarChartMarker, etc.) if you wanted to.  What are you trying to show at the various node locations in the graph?  

As far as buildTable goes, you can use the third parameter in the buildTable method to specify a list of fields to exclude.  L.HTMLUtils.buildTable({...}, null, ['field1', 'field2', ...]);  

--

Scott Fairgrieve

Technologist

HUMANgEO