Stack Overflow
Stack Overflow

Questions tagged [mapbox-gl-js]

WebGL based Javascript library that renders Mapbox Vector Tiles in the browser. Not to be confused with Mapbox.js (older, Leaflet based library) or Mapbox-GL (collective term for several similar SDKs, including Android and iOS specific libraries).

A Javascript library that renders interactive maps, particularly using Mapbox Vector Tiles, using WebGL. It also supports GeoJSON, traditional raster tiles, static images and video. Mapbox-GL-JS is open source, and actively developed by Mapbox, as part of a suite of mapping APIs, including Android and iOS SDKs, and routing and geoocoding APIs.

Resources :

  1. The official documentation
  2. Mapbox Style Specification
  3. Visual Map Designer for Mapbox - [maputnik/editor]
  4. Map tile server for Mapbox GL JS - [klokantech/tileserver-gl]
  5. GitHub
2528 questions
12
votes
1 answer

How to specify Authorization Header for a source in mapbox-gl-js?

How do I set a request header for a wms source with mapbox-gl-js? I need all tile requests to add a header that looks like: Authorization: "Bearer base64-encoded-token" The WMS example, map#addSource and map#addLayer lead me to believe it is not…
Pete
  • 10,310
  • 7
  • 53
  • 59
12
votes
1 answer

how to add background color for layer text field in mapbox-gl

how to add a background color for layer text-field in mapbox-gl.. or how it can be done so that there's background box on the text-field map.addLayer({ "id": "markers", "type": "symbol", "source": "markers", "layout": { …
Zulhalimi Anuar Muhammad
  • 223
  • 1
  • 3
  • 8
12
votes
6 answers

How do I get the bounding box of a mapboxgl.GeoJSONSource object?

I'm setting up a Mapbox GL JS map like this: mapboxgl.accessToken = 'pk.my_token'; var cityBoundaries = new mapboxgl.GeoJSONSource({ data: 'http://domain.com/city_name.geojson' } ); var map = new mapboxgl.Map({ container: 'map', …
James Chevalier
  • 10,604
  • 5
  • 48
  • 74
11
votes
3 answers

How can I create SDF-Icon's (used in Mapbox) from PNG?

My task is to change the icon-color of an icon-image in Mapbox. The only way mapbox allow to do this is by using sdf-icons(https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-symbol-icon-color). By Hour's of searching i couldn't found the…
Dolly
  • 2,213
  • 16
  • 38
11
votes
1 answer

Mapbox GL JS some symbols missing on different zoom levels

I am using the mapBoxGL version 1.0 JS library and I am using the clustered map functionality. But I noticed that on certain zoom levels, some of the symbols in a layer would disappear and it will then reappear again on other zoom levels. I cannot…
dickyj
  • 1,830
  • 1
  • 24
  • 41
11
votes
3 answers

Mapbox gl : On mouse hover on layers change cursor pointer style

I have 10 to 15 different different layers for example car,bus,route etc etc.These layer i am adding dynamic on map when if needed because all the time all layers are does not exist on map. So i am showing info on single click about layers,but i…
cj devin
  • 1,045
  • 3
  • 13
  • 48
11
votes
0 answers

Uncaught Error: coordinates must only contain numbers(Turf and Mapbox)

It produces an error when i use turf on my mapbox specifically this line: var nearestBuilding = turf.nearest(currentLocation, geoJson);. I use mapbox-gl and the turf to get the nearest building. It works when i input the data manually without…
Merida
  • 368
  • 1
  • 3
  • 13
11
votes
3 answers

Convert coordinates to pixels on screen (and back again)

This is what I'm doing: Clicking a marker on the map to open a side panel and center the map on the marker. The side panel takes up 3/4 of the right side of the screen. This is what I need to happen: Center the marker according to the 1/4 of the…
Tomelower
  • 475
  • 3
  • 8
  • 17
11
votes
4 answers

mapbox gl js disable controls

Is there a way to hide/remove or disable controls such as the controls from mapbox-gl-draw? I add the draw control as follows draw = mapboxgl.Draw({ drawing: true, displayControlsDefault: false, controls: { polygon: true, …
user3061553
  • 111
  • 1
  • 4
11
votes
4 answers

MapBox GL JS marker offset

I'm using MapBox GL JS to create a map with a custom marker: var marker = new mapboxgl.Marker(container) .setLngLat([ datacenters[country][city].coordinates.lng, datacenters[country][city].coordinates.lat ]) …
Dani
  • 2,448
  • 8
  • 27
  • 44
11
votes
4 answers

Mapbox. Get list of points by click on cluster

I use Mapbox GL JS and get a trouble with cluster. I add some layers I want to get a list of clustered points by click on cluster. map.on('click', function(e) { var cluster = map.queryRenderedFeatures(e.point, { layers: ["cluster"] }); if…
Anatoliy Novoselov
  • 111
  • 1
  • 6
11
votes
3 answers

Mapbox GL using external maps

I want to use Mapbox GL in my Android application. This service is going to be released soon and I have a tricky question about using the renderer. I like the renderer itself, but I really want to use my own maps data in the application (not the…
Stepan Mazokha
  • 459
  • 1
  • 5
  • 22
10
votes
4 answers

Use MapBox GL JS without Access Token

Is there a way to use MapBox GL JS without access token? I cannot find any hint in the documentation of MapBox GL JS, however, Uber suggest that it is possible with their library, providing React Components for MapBox GL JS. From the documentation…
four-eyes
  • 10,740
  • 29
  • 111
  • 220
10
votes
5 answers

Mapbox GL JS Change the color from the default marker

I’m starting to loose my mind. According to Mapbox API I should be able to change the default marker color but I didn't find any exemple in the documentation that doesn't use custom markers and the most likely syntax doesn't work. I am using…
fdelaneau
  • 125
  • 1
  • 7
10
votes
3 answers

Mapbox: show only one country on base map?

I'm using Mapbox GL JS. Is there any way I can style my base layer to look like the Mapbox Light example, but showing only the UK? I assume I would use Mapbox Studio to build my own base layer, but I can't see any way in Studio to filter by…
Richard
  • 62,943
  • 126
  • 334
  • 542
1 2
3
…
99 100