First of all, really like the plugin 👍 . Took a while to figure out how to get it to work with our PostgreSQL datasources, but finally managed to get this up and running. This might just be the thing for us when trying to visualise our data region by region. I did notice three things (also mentioned in some issues) that made it slightly unusable for us:
When a query doesn't yield any data for a specific feature / region, but this feature / region is present in the GeoJSON file, it's just drawn as a large black opaque block. That's obviously not very pretty/useful. So in this PR I've added an option to hide such features / regions from the resulting map. This is done by creating a copy of the geo variable, filtering out the features that have no data, and add the copied/filtered geo object as a source instead of the original. By not altering the original this.geo variable, you can remove and re-add data for features in your query without permanently filtering the feature/region out of the map.
When you do have data for a feature / region it's displayed in an opaque color. That's also not very useful as it hides the map (with city names, etc) underneath. In this PR I've added an option to manually specify the desired opacity of these features / regions. Note that in order to achieve this we have to get a little creative with parsing, and altering the css colors (hex, rgb, rgba, etc). To do this I've included a library which is able to parse the color as specfied by the d3-scale-chromatic library. This is then used to parse the color, adjust the opacity, and return a new color.
Sometimes, the features / regions don't show. It looks like the mapbox hasn't initialized yet, when the 1s timeout has elapsed in geoloop.js. In this PR I've altered this to use a setInterval instead, which basically checks if the mapbox loaded every second, for at most 10 seconds. This should make it a bit more robust against longer init and loading times.
Here's what this looks like:
Please note that in this case we have features / regions defined for the entire country, but only these 3 regions show up because that's what the query results return. If we disable the "Hide features with no data" option, the rest of the map will turn black.
Maybe in the future we would also like to add support for simpler gradients or fixed colors where the opacity is adjusted to the value, since that makes more sense for our data. But I figured that's for another PR sometime in the future.
Also note that javascript isn't really my thing, so I might have goofed somewhere without knowing. Please let me know if I need to make adjustments.
This is AWESOME! Great additions, and great feedback. I will review as soon as I get a few minutes. JS isn’t really my thing either, so we must tread lightly!
First of all, really like the plugin 👍 . Took a while to figure out how to get it to work with our PostgreSQL datasources, but finally managed to get this up and running. This might just be the thing for us when trying to visualise our data region by region. I did notice three things (also mentioned in some issues) that made it slightly unusable for us:
this.geo
variable, you can remove and re-add data for features in your query without permanently filtering the feature/region out of the map.d3-scale-chromatic
library. This is then used to parse the color, adjust the opacity, and return a new color.geoloop.js
. In this PR I've altered this to use asetInterval
instead, which basically checks if the mapbox loaded every second, for at most 10 seconds. This should make it a bit more robust against longer init and loading times.Here's what this looks like:
Please note that in this case we have features / regions defined for the entire country, but only these 3 regions show up because that's what the query results return. If we disable the "Hide features with no data" option, the rest of the map will turn black.
Maybe in the future we would also like to add support for simpler gradients or fixed colors where the opacity is adjusted to the value, since that makes more sense for our data. But I figured that's for another PR sometime in the future.
Also note that javascript isn't really my thing, so I might have goofed somewhere without knowing. Please let me know if I need to make adjustments.