2

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
  );
0

Replace your "fooLayer" with something like this:

var fooLayer=L.vectorGrid.protobuf(FOO_TILES_PBF_URL, FooTileOptions).on('click', function (e) { 
    L.popup()
    .setContent(e.layer.properties.foo_variable)
    .setLatLng(e.latlng)
    .openOn(map)
});

Your Answer

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

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