Using Planet Labs API tile service with leaflet map

Question

I'm using Planet Labs API tile service with leaflet map. Need to add it as a tile layer/WMS layer. But the map stays the same when zoomed in or out.

My Map: https://drive.google.com/open?id=1jodnQB9exuxxt6trxirGmbdF3FkPX-nx

Here's my code.

var mymap = L.map('mapid').setView([51.505, -0.09], 13);
var wmsLink='https://tiles0.planet.com/basemaps/v1/planettiles/global_monthly_2016_05_mosaic/gmap/0/0/0.png?api_key={your_key}'
var wmsLayer4 =  L.tileLayer.wms(wmsLink , {layers: 'layer_name',format: 'image/png',transparent: true  }).addTo(mymap);


<div id="mapid"></div>

Referred from https://developers.planet.com/docs/api/tile-services/

Providing a working example would be great.

Answer 1

Looks like a couple of problems: planettiles rather than planet-tiles and using the fixed 0 rather than {x}, {y} and {z} so that Leaflet knows to replace those with the correct tile in the pyramid. Without the second change, at every zoom level, you will get the same zoomed out map since Leaflet only knows to request that single tile.

Here is the URL in the docs and it should work fine:

https://tiles.planet.com/basemaps/v1/planet-tiles/global_monthly_2016_05_mosaic/gmap/0/0/0.png?api_key=XYZ

Note that Planet's services use tiles not WMS, so you need to follow the Leaflet documentation for tilelayers: https://leafletjs.com/reference-1.3.4.html#tilelayer