CODEWITHSUNDEEP
leaflet
Roman Nazarkin
Roman Nazarkin

Reputation: 2229

How to draw map layer only inside FeatureGroup elements in Leaflet?

For example, I have two map layers: open street maps and our own one. Both can be defined this way:

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'
}).addTo(mapObject);

The question is in that I do not need to draw the second layer on a whole map, but only inside elements of L.FeatureGroup:

var drawnItems = new L.FeatureGroup().addTo(mapObject);

Especially inside polygons, rectangles, etc... Is that possible with leaflet? If yes, how this can be achieved?

Thanks.

Upvotes: 0

Views: 468

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19059

One approach would be to use the bounds option of your L.TileLayer, i.e.:

var drawnItems = new L.FeatureGroup( .... );

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: ...,
    bounds: drawnItems.getBounds()
}).addTo(mapObject);

Another approach would be to look at the list of plugins for tile display, and use either TileLayer.BoundaryCanvas or leaflet-tilelayer-mask (keep in mind that more plugins might be applicable, and more plugins might appear in the future).

Upvotes: 1

Related Questions