[GIS] How to set the fillcolor of polygons in Leaflet.js dynamically

geojsonjavascriptleafletPHPpolygon

I'm using the interactive chloropath example for leaflet.js

I figured out how to make each of my polygons add a running tally of values to the bottom of the page after each polygon is clicked.

Upon clicking a selected polygon a second time it removes it's value from the running tally.

I'd like to visually represent this as a fillcolor change of the polygons on the map.

Here's my code so far (javascript with PHP included): (I've included comments within my code to explain what I'm trying to do. Again any help would be greatly appreciated)

function addUp(num, x)
{  
    <?php 
    // begin php code

    $places = $db->query("SELECT boundary_id, boundary_name FROM boundaries WHERE               
    boundary_state= '$thatstate'");

    while($row = $places->fetch_object()) { 
       //end php code ?> 
       //begin javascript
       if (x == "List<?php echo $row->boundary_name ?>" && List<?php echo $row->boundary_name  ?> == 1) {

           temp = document.theForm.ttl.value;
           tempo = parseInt(temp);
           numo = parseInt(num);
           nwTemp = tempo + numo;
           document.theForm.ttl.value = nwTemp;
           geojson.setStyle({fillColor: 'blue'}); // I want to set color to blue to show  highlighted

           List<?php echo $row->boundary_name ?> = 0;

           return List<?php echo $row->boundary_name ?>;
    }


    if (x == "List<?php echo $row->boundary_name ?>" && List<?php echo $row->boundary_name  ?> == 0) {

        temp = document.theForm.ttl.value;
        tempo = parseInt(temp);
        numo = parseInt(num);
        nwTemp = tempo - numo;
        document.theForm.ttl.value = nwTemp;

        // I want to reset color of polygon if deselected (this would be   the default)
        geojson.resetStyle; 

        List<?php echo $row->boundary_name ?> = 1; 
    }   
}

Best Answer

You can change the fill color of a polygon with the setStyle method (inherited from Path).

polygon.setStyle({fillColor: '#0000FF'});

If you're having difficulty getting the geojson displayed properly you might take a look at the Leaflet GeoJSON docs.

Related Question