8

I'm using the interactive choropleth 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. )

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; 
    }   
}
0

2 Answers 2

16

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.

0
1

There's also this jsfiddle I stumbled upon. I can't claim it as my own but you can sort through the options objects via event.target.options or even set the color attribute for a target event via event.target.setAttribute()

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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