1

I am loading a tile set from MapTiler to my leaflet map. I have no trouble styling each feature in the tile set. I can set each feature to the appropriate color.

I would like to also add a popup to each of the features. Is this possible? How? Where is the documentation that explains this?

const FOO_TILES_PBF_URL =  "https://api.maptiler.com/tiles/<tileset_identifier>/{z}/{x}/{y}.pbf?key=<my_maptiler_key>";

  function getColorFromRedBlueRange(d) {
    return d == 8
      ? {
          fillColor: "yellow",
          fillOpacity: 0.7,
          color: "yellow",
          fill: true,
          weight: 1.5
        }
      : d == 7
      ? {
          fillColor: "red",
          fillOpacity: 0.7,
          color: "red",
          fill: true,
          weight: 1.5
        }
      : {
          fillColor: "black",
          fillOpacity: 0.7,
          color: "black",
          fill: true,
          weight: 1.5
        };

var FooTileOptions= {
    interactive: true,
    vectorTileLayerStyles: {
      LayerName: properties => {
        return getColorFromRedBlueRange(
          properties.foo_variable]
        );
      }
    }
  };

  var fooLayer= L.vectorGrid.protobuf(
    FOO_TILES_PBF_URL,
    FooTileOptions
  );

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.