Check if a point or a click landed on a specific layer

[LamprosPitsillos]

I have been doing some experiments and i tried to limit clicks/points from landing on "ocean/water" layers and i tried this method.

// vuejs

  map.value = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [0, 0],
    zoom: 1
  })

const addPointIfNotWater = (lngLat) => {
  const point = map.value.project(lngLat)
  const waterFeatures = map.value.queryRenderedFeatures(point, { layers: ['crimea-fill'] })
// debugger
  if (waterFeatures.length > 0) {
    alert("Cannot place fire on water!")
    return
  }

  features.value.push({
    type: 'Feature',
    geometry: { type: 'Point', coordinates: [lngLat.lng, lngLat.lat] }
  })

  map.value.getSource('points').setData({ type: 'FeatureCollection', features: features.value })
}

But it seems after reading some documentations that this will never work , unless at each possible point of the layer there was a feature to "fire" this if statement .

Is there really no way to simply check if a point belongs to a specific layer ?

The simplest use-case is to limit points from being created on top of bodies of water.

[HarelM]

I'm not sure I fully follow, but you can queryRenderedFeatures without specifying a layer and make sure that the features you are looking to find have a specific property, like "isBodyOfWater" and if you find one of those in the returned features you know that it can't be placed at this point.
Does that solve the issue or am I misunderstanding it?

[LamprosPitsillos]

Not what am looking for sadly. I am not looking for a feature but ,
if a point lands on a specific layer.

Example:

I want that when i click on the map , to get a console log of IF the point on the map is on top of water. How i was i looking to achieve this ?

If i do

$ curl https://demotiles.maplibre.org/style.json -o style.json

$ jq '.layers[] | {id, type, fill_color: .paint["fill-color"]}' style.json
 

I see that the layer with "id": "crimea-fill" is the layer that has the water bodies in it in blue.
So i thought if there was a way to determine if a point was on top of this layer i could successfully know if a point was on water.

So the question is if there is a way to make this possible, even if my initial thought on how to achieve this was wrong

[HarelM]

Sorry, I'm not following... layers are ways to express how to render things.
Once rendered there are features, each feature can be connected to multiple layers, and you can't ask to which layer a feature belongs to.

Here's an example similar to what you might have - this assumes that the oceans are basically "transparent" and the color is coming from the background layer.
And if there are other lake features in the tiles, they should have some property to indicate that they are lakes...

const map = new maplibregl.Map({
  container: 'map',
  style:
  'https://demotiles.maplibre.org/style.json',
  center: [10, 50],
  zoom: 5
});

map.on("click", (e) => {
  console.log(e.lngLat);
  var f = map.queryRenderedFeatures(map.project(e.lngLat));
  if (f.length === 0) {
    console.log("Clicked on 'no-land'");
  }
  if (f[0].properties.i_am_a_small_lake) {
    console.log("Clicked on a lake");
  }
})

[sruenwg]

I feel the best way to accomplish this might depend on the map's data/style.

For instance, in https://demotiles.maplibre.org/style.json used above, there is no explicit style layer for water — note how the water's colour #D8F2FF comes from the style layer with ID background. (It does not come from crimea-fill; you can play around with the style at https://maputnik.github.io/editor/?style=https://demotiles.maplibre.org/style.json to confirm this.)
This means that when passing the click event coords to Map.queryRenderedFeatures, it will:

• not return any feature if the click was on bare water, since you are essentially clicking on an area with no associated data (hence @HarelM's solution above would usually work), but it will
• still return other non-land features which may be displayed on the water, e.g. labels and lines.

I would thus suggest examining the map style to come up with a more explicit condition which matches your need. E.g. in this case we have a countries source layer being used to draw all the countries' land areas, so one way to implement this might be to say 'if no feature at the click event coords is from the countries source layer':

const featuresAtPoint = map.queryRenderedFeatures(point);
const isPointOnWater = featuresAtPoint.every((feature) => feature.sourceLayer !== 'countries');

On the contrary, if the style does contain an explicit style layer for water (e.g. https://tiles.openfreemap.org/styles/liberty), then your initial approach should work just fine:

const featuresAtPoint = map.queryRenderedFeatures(point, { layers: ['water'] });
const isPointOnWater = featuresAtPoint.length > 0;

Quick demo here: https://jsbin.com/xemepufuwe/edit?html,output

[LamprosPitsillos]

Thank you so much for your detailed answer , works just as you explained