Leaflet: click feature to get external diagram

Question

I am working on a Leaflet webmap which receives a layer withs polygons from ESRI REST API.

I want to implement this: When the user clicks on a polygon a diagram shall pop up below the map. The diagram shall use the attributes of the polygon (in my case measurements of different years).

ID   year1990   year1991   year1992   year1993    ...
1    -0.3       +2.2       -0.2       +0.5        ...
2    -4.3       -5         +6.8       +0.4        ...

I thought about transferring the polygon's attributes into a JSON and the visualize it with D3.js .

Does this makes sense to you? How would you solve this?

Answer 1

if you are using Esri's plugins for Leaflet you already have an event listener to utilize and the feature's attributes are already available via the GeoJSON properties.

yourLayer = L.esri.featureLayer({
  url: 'http://yourserviceurl/arcgis/rest/services/.../MapServer/0'
}).addTo(map);

yourLayer.on('click', function (evt) {
  console.log(evt.layer.feature.properties);
});

Answer 2

You can take the feature attributes and hand them over to the charting library. If you don't need to change a lot at the chart-design you can also just use C3.js which makes it easyer to start ;)

here you can see an example:

http://jsfiddle.net/expedio/vtck4uzk/

and that's the js-part:

your_featureLayer.on('click', function (evt) {
     feature = evt.layer.feature;
     $("#chart").empty();

     var chart = c3.generate({
         data: {
             names: {
                 data1: 'Roof Elevation',
                 data2: 'SurfAdj',
                 data3: 'SURF_Elev',
                 data4: 'AVG Height',
                 data5: 'Area'
             },
             // just taken some RANDOM fields to demonstrate
             // how to draw the chart
             columns: [
                 ['data1',
                 feature.properties.ROOF_ELEV],
                 ['data2',
                 feature.properties.SURF_ADJ],
                 ['data3',
                 feature.properties.SURF_ELEV],
                 ['data4',
                 feature.properties.AVG_HEIGHT * 5],
                 ['data5',
                 feature.properties.SHAPE_AREA / 10]
             ],
             types: {
                 data1: 'bar',
                 data2: 'bar',
                 data3: 'bar',
                 data4: 'bar',
                 data5: 'bar'
             }
         },
         axis: {
             rotated: false,
             x: {
                 label: {
                     text: 'Your Topics',
                     position: 'outer-middle'

                 }
             },
             y: {
                 label: {
                     text: 'Your_Values',
                     position: 'outer-center'
                 }
             }

         }
     });

 });