eurostat / eurostat-map

Thematic web maps based on D3.
https://github.com/eurostat/eurostat-map.js
Other
61 stars 4 forks source link

Custom geometries #137

Open joewdavies opened 1 month ago

joewdavies commented 1 month ago

Allow users to define custom geometries, along with the property that links them to the statistics.

e.g. map.addGeometry(myGeoJson).commonIDField('NUTS_ID')

This might also require function setters for CSS classes to allow custom styling to align with https://github.com/eurostat/eurostat-map/issues/20.

E.g.

addGeometry({
   source: myGeoJSON, 
   cssClass: (feature) => {
     if (feature.properties.level == 1) return 'nuts_1'
   }
})

then

.nuts_1 {
   stroke-width: 1
}
joewdavies commented 4 days ago

Usage would look like this:

                        .geometries([
                            {
                                id: 'regions',
                                class: 'regions',
                                regions: true, // this is currently the flag that lets eurostat-map know that the statistical data ids/keys correspond to the ids of these features.
                                features: geoJSON.features,
                                onEach: (elements) => {
                                    // Add any D3 custom styling or behavior here
                                    // e.g. elements.style('stroke-width', (feature) => feature.properties.stroke)
                                },
                            },
                            {
                                id: 'borders',
                                features: bordersGeoJSON.features,
                                class: 'borders',
                            },
                        ])

Example can be found here: https://github.com/eurostat/eurostat-map/blob/v4/test/test_custom_geometries.html