CODEWITHSUNDEEP
javascriptleafletmapboxmapbox-glmapbox-gl-js
Gaurav Singh
Gaurav Singh

Reputation: 343

How to add tile layer to map using mapboxgl.js

Here m adding tile created using tiff 

mapboxgl.accessToken ='pk.eyJ1IjoiZ2F1cmF2Y2F0c3RlY2giLCJhIjoiY2l1cGo0MTl4MDAxajJ1bng5a2xieTY0diJ9.0fDXNulI91U85ngSc4jGCg';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  zoom: 13,
  center: [-122.447303, 37.753574]
});

map.on('load', function () {
  map.addSource('terrain-data', {
    type: 'raster',
    url:'mapbox://gaurav.2on6cgzq'
  });
  map.addLayer({
    "id": "terrain-data",
    "type": "line",
    "source": "terrain-data",
    "source-layer": "contour",
    "layout": {
      "line-join": "round",
      "line-cap": "round"
    },
    "paint": {
      "line-color": "#ff69b4",
      "line-width": 1
    }
  });
});

I am getting :

Error: Source layer "contour" does not exist on source "terrain-data" as specified by style layer "terrain-data"

Upvotes: 0

Views: 2143

Answers (2)

nsCode
nsCode

Reputation: 21

The simplest way is to simply edit the tile layer in Mapbox Studio, and then upload it to mapbox.js. This way all you have to do is provide the link to the style as a source (Mapbox has a TON of documentation for this).

Upvotes: 0

snkashis
snkashis

Reputation: 2991

I do not believe the "source-layer": "contour" is applicable for raster sources whatsoever. See https://www.mapbox.com/mapbox-gl-js/example/map-tiles/ So get rid of that line.Looks like you will need a "tileSize": 256 option included as well on the source.

Also your layout and paint options are going to be unneeded as well.Those are options for vector or geojson sources. Those types of controls are not available on raster.

Upvotes: 2

Related Questions