8

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; 
    }   
}
  • Welcome to Geographic Information Systems, Alex! This probably is the right place for your question, so if you still have a copy posted on SO, then please delete it. If after a reasonable time (a day or two) you don't get good answers here, then just flag this question for moderator attention and we can migrate it back to SO (or wherever appropriate). This will keep your question together with any comments or partial answers it attracts in the meantime, rather than forcing you to start over with each different site. – whuber Nov 20 '13 at 14:01
12

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.

  • Hum... and for fill transparent, some clue? – Peter Krauss Dec 22 '18 at 22:49
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()

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.