I am trying to build a chloropleth map in Javascript with zoom functionality. Map will need to have a chloropleth layer of all countries. On zooming in it will need to show a chloropleth of the next adminstrative areas across all countries. Can you please give me pointers around how do to this. How long does loading all-states GeoJSON take and how do we go about doing this.

1 Answer 1


Changing layer on zoom:

Since you did not mention what tool you will use (Google Maps, Leaflet, ...) I will try to answer your question with pseudo-code. The principle of changing the layer when zooming is easy. You have different possibilities how to solve this. The simplest way of doing this is by "assigning" layers to zoom levels. This could look as follows:

// Load geoJson
var country = geoJsonA;
var state = geoJsonB;
var city = geoJsonC;

// define on which zoom level
// which layer should be displayed

map.on(zoom, function() {
    if (zoomlevel < 15) {
        map.removeLayer(the other two);
    } else if (zoomlevel >= 15 && < 17) {
        map.removeLayer(the other two);
    } else {
        map.removeLayer(the other two);

An other approach on this would be defining bounding boxes. You would then use this bounding boxes similarly to zoom levels, e.g. if bounding box bb is outside of the viewport of the map, then show layer xy.

Loading times

I guess this strongly depends on the amount and size of the geoJsons you have. If you are planning to load all geoJson right away, then the page will need a bit of time till its ready. An approach to this might be AJAX.

Your Answer

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

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