CODEWITHSUNDEEP
angularleafletmbtiles
David Sackstein
David Sackstein

Reputation: 570

How can I use Leaflet with an mbtiles server specifying bounding boxes instead of zoom level and x, y tile coordinates in the url

Background

I am using the following client and server technologies:

  1. The map server as a container from https://github.com/consbio/mbtileserver/
  2. The Leaflet's library for Angular 7

As documented here: https://leafletjs.com/reference-0.7.7.html#tilelayer the TileLayer control uses the url template: 'http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png'

Requirement

My customer has requested that I replace the above map server, with another that is deployed on his network.
I would like to support the new server while making minimum changes to the client (in particular I would like to continue using the Leaflet map control).

What I have tried

I have an example of a client that uses the new server. The example is written in React and also uses the Leaflet map control.

However, I noticed that the URL that it sends to the server does not use the above template. Rather, it includes a query string and includes parameters of type BBox which I assume refers to bounding boxes.

Unfortunately, I do not have source code of the client, nor the full URL as an example.

Question

Can someone help me understand:

  1. Is there indeed a URL template supported by consbio/mbtileserver that uses bounding boxes instead of z,x,y?
  2. Assuming the Leaflet Angular library can do the same as the Leaflet React library in the example, what changes do I need to make to the map control configuration to support it?

Upvotes: 0

Views: 759

Answers (1)

Falke Design
Falke Design

Reputation: 11378

I have not found the 100% correct answer but I have a few steps that can help you. But I have no idea how the mbtileserver part can work.

If you want to get the bounds of the tile you can use the private method L.GridLayer._tileCoordsToBounds(coordsOfTile)

Now you have to change the url creation of tile, for this create a new Tile Class and overwrite the getTileUrl function:

L.CustomTile = L.TileLayer.extend({
    getTileUrl: function (coords) {
      var bbox = this._tileCoordsToBounds(coords).toBBoxString();
      console.log(bbox);
      var url = L.TileLayer.prototype.getTileUrl.call(this, coords);
      return url + '&bbox='+ bbox;
    },
  });

Then add the tiles to the map:

new L.CustomTile('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
  }).addTo(map);

And this will then request the tiles like:

https://a.tile.openstreetmap.org/6/31/23.png?bbox=-5.625,40.979898069620155,0,45.089035564831036

You can simply remove the templates if they are not needed {s}, {z}, ...

If you don't know how the url should be look like it will be really hard to implement a custom request ...

Also I don't think that you have to use this but I know that are WMS Layers adding bbox string to the url: Leaflet-Src

And please check your Version of leaflet, the newest version is 1.7.1, because you linked the documentation of 0.7.7

Upvotes: 0

Related Questions