1
Answered

How do I mix raster *and* vector layers?

I am trying to replace Google Maps on my site.   I have a slightly unusual circumstance in that I use the map as a background, and I overlay a MBTiles-based boundary layer for things like ZIP codes, etc.  (example here).  

 
I had initial success using Leaflet and MapTiler.  However, when I turned this on, I basically used up a months' worth of requests in a day (almost 500k in less than 24h before I turned it off).  I know the MapTiler vector-based maps make far fewer requests, so I'd like to replace the background with this.
 
No matter what I try, I cannot get the two layers to draw at the same time.  I've tried Leaflet GL, MapBox GL, and Openlayers GL.  None work, so my guess is that the gl-render-based layer cannot co-exist with a raster layer due to the way GL accesses the draw buffer.
 
But before I give up entirely, I thought I'd ask the group is if anyone has had success drawing a vector background layer under a raster tile layer?  If so, can you point me somewhere showing the proper syntax and a working example?  Trust that I've searched exhaustively and have tried dozens of methods.  Simply adding layers doesn't work, nor could I get MapBox JS's styles-based approach to work.  This is my last stop before giving up and pulling the plug on my business, so I hope someone can help me out.

1 reply

Of course, you can draw raster overlays on top of the vector maps base maps from MapTiler.

 
In Mapbox GL JS - it just means to add into the GL JSON style a new source and a new layer which is using the source.
 
 
The source and layer could be also saved inside of your JSON style - hosted on your server or in our cloud.
 
Here is an example guide including hosting your MBTiles on our Cloud - but you can also link it from an external source. 
 
In Leaflet GL - it means only traditional replace of the background raster layer with a vector layer.
In OpenLayers exactly the same - displaying raster tile layer above vector layer basemap.
 
For code for raster tile overlays in different JavaScript libraries check http://tileserver.maptiler.com/.