socib / Leaflet.TimeDimension

Add time dimension capabilities on a Leaflet map.
MIT License
435 stars 139 forks source link

Using times in a geojson MultiPolygon #183

Open keul opened 4 years ago

keul commented 4 years ago

I'm trying to integrate Leaflet.TimeDimension in an application where we have geojson with european countries. The geojson use MultiPolygon shapes, but differently from example example 15 (Oil Spill) we don't have a single item, as a country can be composed by islands.

Also: I need to simply change shape's colors, I don't need to move anything on the map.

A quick simplified demo here:

https://codesandbox.io/s/leaflettimedimension-ch5ss

Let me say documentation is not much clear. It claims:

coordTimes, times or linestringTimestamps: array of times that can be associated with a geometry (datestrings or ms). In the case of a LineString, it must have as many items as coordinates in the LineString. (Note: coordTimes is the name of the property recently included at Mapbox toGeoJSON library)

Even if I'm using a MultiPolygon (and not a LineString), seems I'm forced to repeat the time value for every path inside the coordinated array:

        "nuts_id": "ES",
        "levl_code": 0,
        "cntr_code": "ES",
        "nuts_name": "ESPAÑA",
        "fid": "ES",
        "name": "ESPAÑA",
        "times": [
          1496314227000,
          1496314227000,
          1496314227000,
          1496314227000,
          1496314227000
        ]
      },

I'm wondering if a similar usecase is supported by the plugin in another way I did not understand, or if I have to hack this as above.

bielfrontera commented 4 years ago

Hi @keul, this could be a new type of TimeDimension.Layer, to be able to animate a Choropleth (in fact, @ctroupin had some ideas about this).

I've modified your demo and I think this is what you want: https://codesandbox.io/s/leaflettimedimensionchoropleth-r3edo

It implements the new type L.TimeDimension.Layer.Choropleth, that calls resetStyle when the layer has to be updated. And based on the choropleth example of the Leaflet documentation, it has a getColor method that depends on the time of the map.

We could evolve/improve this a bit more, so we can add this as an official example and also as a new type of layer included in TimeDimension. What do you think?

keul commented 4 years ago

Hi @bielfrontera,

That's a great example, this will move me in the right direction! I think that a similar example (with or without the new layer type) can improve your documentation a lot. In usecases I'm managing (climate change and weather) we are not dealing with geojson animation a lot, but it's more common to display color based on variables like (pressure, temperature, ...)

Many thanks! 🍻

ctroupin commented 4 years ago

Hi @bielfrontera, @keul,

indeed I was trying to do something really similar, i.e. animating a set of Polygons. Unfortunately I could not finish my example due to other commitments 🙃, so this issue and the example you prepared come perfectly for me.

mwithi commented 4 years ago

@bielfrontera thanks for this great plugin!

In the example you provided above, you moved the time information outside of the feature.properties, and also the related values upon to select the color in a separated object, in other words the country.json contains only the shapes.

Personally I'm having the same initial approach of @keul - I have a set of "Point" features with 'time' property, and now I want to add other "Polygon" features to be shown on the same map, controlled by the same controller, and using the just discovered leaflet.timedimension.choropleth plugin (thanks @ctroupin as well!) - but I'm wondering if the "suggested" approach is the one in your example.

Also, can the time controller control two different GeoJSON at the same time (one with "Points" and one with "Polygons") or all the features must be part of the same object passed to the constructor L.timeDimension.layer.geoJson(geoJson, {})?

Thanks!