1

I have a Vuejs app containing a Leaflet map that displays GeoJSON files. Some of these files, such as the file containing polygons for all zip codes in a US state are very large and load too slowly. Our client code pulls this file from an external github repository. How can we achieve this more quickly? I am open to using a paid third party software, such as MapTiler. I see it is possible to create custom raster map tiles with MapTiler, but how can I create a custom map containing zip code polygons? We would like to color each zip code to match a statistic such as the average age in that zip code. We can do this already by fetching the age statistics from our database and mapping them to the zip code in the GeoJSON. How can we still achieve this chloropleth end result, but faster?

Update: I learned about the Leaflete.vectorGrid npm package at @TomazicM's suggestion. I am able to integrate the example into our app like this...

  var vectorGrid = L.vectorGrid
        .slicer(euCountries.euCountries, {
          rendererFactory: L.svg.tile,
          vectorTileLayerStyles: {
            sliced: function(properties, zoom) {
              var p = properties.mapcolor7 % 5;
              return {
                fillColor:
                  p === 0
                    ? "#800026"
                    : p === 1
                    ? "#E31A1C"
                    : p === 2
                    ? "#FEB24C"
                    : p === 3
                    ? "#B2FE4C"
                    : "#FFEDA0",
                // fillOpacity: 0.5,
                fillOpacity: 1,
                stroke: true,
                fill: true,
                color: "black",
                //opacity: 0.2,
                weight: 0
              };
            }
          },
          interactive: true,
          getFeatureId: function(f) {
            return f.properties.wb_a3;
          }
        })
        .on("mouseover", function(e) {
          var properties = e.layer.properties;
          L.popup()
            .setContent(properties.name || properties.type)
            .setLatLng(e.latlng)
            .openOn(myMap);

          clearHighlight();
          highlight = properties.wb_a3;

          var p = properties.mapcolor7 % 5;
          var style = {
            fillColor:
              p === 0
                ? "#800026"
                : p === 1
                ? "#E31A1C"
                : p === 2
                ? "#FEB24C"
                : p === 3
                ? "#B2FE4C"
                : "#FFEDA0",
            fillOpacity: 0.5,
            stroke: true,
            fill: true,
            color: "red",
            opacity: 1,
            weight: 2
          };

          vectorGrid.setFeatureStyle(properties.wb_a3, style);
        })
        .addTo(myMap);

However, when I try to add a different GeoJSON file (containing polygons of Illinois zip codes), I get the error:

`Leaflet.VectorGrid.js?45d4:1931 Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Worker': function (f) {
      return f;
    } could not be cloned.
    at NewClass.initialize at function L.vectorGrid.slicer...



      var IllinoisZips = L.vectorGrid
    .slicer(ILZipCodes, {
      rendererFactory: L.svg.tile,
      vectorTileLayerStyles: {
        sliced: function(properties, zoom) {
          // var p = properties;
          return {

          };
        }
      }
    })

    .addTo(myMap);

And this is how I'm getting the ILZipCodes GeoJSON layer...

   var ILZipCodes = new L.geoJson.ajax(
        "https://raw.githubusercontent.com/OpenDataDE/State-zip-code-GeoJSON/master/il_illinois_zip_codes_geo.min.json"
      );

Why might this be?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.