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?

  • 1
    I am not familiar with the ESRI API, but in general this should not represent any technical difficulty. You could simply add an on "click" listener on your layer (if it is of type FeatureGroup). The callback receives an event which layer property is the layer that has been clicked on. If the attributes you are looking for are available in the layer data, you can directly access them that way, and build your diagram.
    – ghybs
    Nov 4, 2015 at 13:10

2 Answers 2


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'

yourLayer.on('click', function (evt) {

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:


and that's the js-part:

your_featureLayer.on('click', function (evt) {
     feature = evt.layer.feature;

     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: [
                 feature.properties.AVG_HEIGHT * 5],
                 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'



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.