Search code examples
jquerydatamaps

datamaps updateChloropleth with custom maps

This is a weird one.

I can do the following with a standard world map and it works on click of the change button:

    $("#change").on("click", function() {
        map.updateChoropleth({
          "USA": "#ff0f00",
          "IRQ": "#0fa0fa",
          "FRA": "blue",
          "UKR": "orange",
          "MEX": "#00ffaf"
        });
   });

If I use my custom topojson file I can do this and the change is implemented when the map loads:

map.updateChoropleth({
  "Choptank River": {fillKey: "Poor"}
});

But as soon as I try to wrap it in a click event handler (exactly as I have it for the world map example), it doesn't work:

$("#change").on("click", function() {
    console.log("test");
    map.updateChoropleth({
      "Choptank River": {fillKey: "Poor"}
    });
});

The test alert is triggered fine, but the map chloropleth is not updated.

Thanks for any ideas!

Solution

  • Turns out it was due to the spaces in the id: "Choptank River".

    https://github.com/markmarkoh/datamaps/issues/124#issuecomment-53314378

    "DataMaps relies on class selectors to apply colors when data is loaded asynchronously. Since the id fields in your file have spaces in them, the class selectors are failing to find anything."

    Thanks @markmarkoh