CODEWITHSUNDEEP
leafletlayer
Amdir
Amdir

Reputation: 1

Combine three maps with different zoom levels in Leaflet

I am currently building my own map in Illustrator for a community of roleplayers. I am planning to make three versions of the map. One with little details, ment to be the most "zoomed out" version, a middle version with more details on smaller towns and cities, and then the fursthest zoomed version with detailed maps of cities.

Is it possible to combine three different maps in this way in leaflet when they have been made into tiles?

Thank you!

Upvotes: 0

Views: 639

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19049

I assume that by "map" you mean "raster image", i.e. a .jpg or .png image. The word "map" has a different meaning when used in a technical context.

Is it possible to combine three different maps in this way in leaflet when they have been made into tiles?

You don't neccesarily need tiles. Sounds like your use case could be covered with three L.ImageOverlays, and making sure that they are dynamically added/removed to/from the map at different zoom levels.

This assumes that the three images have the same map projection, and that you know the bounding boxes for each of them, and that no image is larger than 16000 pixels wide or high. If they are larger than that, consider making map tiles instead.

If you choose tilelayers, you can either leverage the minZoom/maxZoom options of L.TileLayer or create a set of tiles which uses a different original image for different zoom levels (i.e. slice the images so that the zoom levels for the output tiles for each slice operation are different).

Upvotes: 1

Related Questions