How to implement a tile source to mapbox-gl

Question

I am switching over from react-leaflet to mapbox-gl and have a question about a propriety tile service I am using for spatial data. The api has little documentation. They offer 4 different ways of requesting the tiles.

DRAW MAP TILE - PNG map tiles with a transparent background are created according to image size in pixels, a lat lon bounding box in decimal degrees, selected layer(s) and default styling. See the individual feature for a full list of style names.

DRAW STATIC MAP TILE - PNG map tiles with a transparent background are created according to image size in pixels, lat lon coordinates in decimal degrees, zoom level, selected layer(s) and default styling. See the individual feature for a full list of style names.

BING NON CACHE - PNG map tiles with a transparent background are created according to the Bing Maps API Quadkey, selected layer(s) and default styling. See the individual feature for a full list of style names.

GOOGLE NON CACHE - PNG map tiles with a transparent background are created according to the Google Maps API X, Y, and Zoom values, selected layer(s) and default styling. See the individual feature for a full list of style names.

For leaflet I used the google endpoint with the plugin "react-leaflet-google"

   _coreLogic = () => {
    const {authKey} = this.props
    const baseUrl = 'http://sws.corelogic.com/api/v3.0.0/tile/gmap?'
    const zoom = this._map.getZoom()
    const type = 'layers=fass%3Aparcel&styles=parcelpolygonorange'
    this.setState({coreLogicUrl: `${baseUrl}x={x}&y={y}&zoom=${zoom}&${type}&authKey=${authKey}`})
  }

  <LayersControl.Overlay checked name='CoreLogic Parcel'>
     <LayerGroup>
        <TileLayer url={coreLogicUrl} />
     </LayerGroup>
  </LayersControl.Overlay>

Works great. Switching over to mapbox-gl is a bit confusing. I am not sure if it is a raster, vector or image layer. I blindly tried different ways with no luck what so ever. The api has a demo of using the apis.

Here is what the

DRAW MAP TILE

looks like.

http://sws.corelogic.com/api/v3.0.0/map?width=500&height=500&layers=fass%3Aparcel&styles=parcelpolygonorange&bbox=-74.025879%2C40.705628%2C-74.014893%2C40.713956&authKey=0x7Y0z3K8dnC79y0HwAAtXNUNHHit

And the second option

DRAW STATIC MAP TILE

looks like

http://sws.corelogic.com/api/v3.0.0/map?width=600&height=600&layers=fass%3Aparcel&styles=parcelpolygonorange&lat=40.709792&lon=-74.020386&zoom=15&authKey=0x7Y0z3K8dn

Steve Bennett Steve Bennett · Accepted Answer · 2017-04-24T01:05:07

You probably want a raster tile source. Mapbox only supports raster tiles given by x/y/z tile coordinates (not lat-longs or Bing quadkeys), so that rules out the first three options, leaving the Google NON CACHE PNG API endpoint only.

Your code will look something like:

map.addSource('tiles', {
  type: 'raster',
  tiles: ['BASEURL/x={x}&y={y}&zoom=${z}&TYPEANDAUTHKEYANDSTUFF']
});

The API you're using doesn't seem to be findable on the web, so I can't be more specific than that.

How to implement a tile source to mapbox-gl

1 Answers