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
71
votes
9 answers

Drawing a circle with the radius in miles/meters with Mapbox GL JS

I'm in the process of converting a map from using mapbox.js to mapbox-gl.js, and am having trouble drawing a circle that uses miles or meters for its radius instead of pixels. This particular circle is used to show the area for distance in any…
jrrdnx
  • 1,565
  • 3
  • 15
  • 23
70
votes
8 answers

Mapbox GL JS vs. Mapbox.js

From the Mapbox glossary, Mapbox.js Mapbox.js is a JavaScript library that allows you to add an your interactive map to your website. It is a plugin for Leaflet, and it is an open source library that’s free to use. and Mapbox GL JS Mapbox GL JS…
raphael
  • 2,762
  • 5
  • 26
  • 55
37
votes
3 answers

Mapbox-GL setStyle removes layers

I'm building a mapping web application using Mapbox-GL. It has a lot of cool features. I've set up the buttons to switch base maps (ie. satellite, terrain, etc) following the example on the Mapbox website. The problem that I am having is that when…
Gold Masta
  • 695
  • 1
  • 10
  • 22
32
votes
1 answer

Style is not done loading: Mapbox GL JS

My goal is to create a before and after map that shows a series of coordinate markers on the after map. When the code is executed, I see this error message in the console: Style is not done loading The end goal is to see a cursor that would allow…
Johnny G.
  • 447
  • 3
  • 7
  • 12
28
votes
3 answers

How to find all layers in Mapboxgl ? Ultimately I want to show custom layer only on water and not on land

I created a custom circle layer. I want to show this layer only on water and not on land. I managed to do the opposite (ie: showing the layer on land and not on water) using below command. Refer this image for better understanding…
Prasanna Elangovan
  • 291
  • 1
  • 3
  • 6
28
votes
5 answers

How to add "click" listener on marker in mapbox-gl-js

I added few markers on the map using folowing this example: https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/ Now I want to show popup when user clicks on marker image, but i can not find elegant solution. Any help?
Zarko
  • 446
  • 1
  • 5
  • 9
27
votes
3 answers

Mapbox GL JS: Export map to PNG or PDF?

I'm using Mapbox GL JS version 0.32. Is there a way to export the map to a high-res PNG or PDF? Obviously, I can just screenshot, but it would be nice if there was a more formal way. I found this repo, but it looks old and isn't clear how it…
Richard
  • 62,943
  • 126
  • 334
  • 542
25
votes
6 answers

MapBox clear all current markers

I've created a MapBox instance with: var map = new mapboxgl.Map({ container : 'map', style : 'mapbox://styles/mapbox/streets-v9' }); I need to clear all markers, and have tried things like map.remove(marker) on each one, and a few other…
HomerPlata
  • 1,687
  • 5
  • 22
  • 39
23
votes
3 answers

mapbox-gl-js: Adjust visible area & bearing to a given line, for a given pitch

I'm trying to optimize a Mapbox view for long-distance hiking trails, like the Appalachian Trail or the Pacific Crest Trail. Here's an example, which I've oriented by hand, showing the Senda Pirenáica in Spain: The area of interest, the viewport,…
Herb Caudill
  • 50,043
  • 39
  • 124
  • 173
21
votes
9 answers

Mapbox-gl height 100%

Mapbox doesn't fit to it's container. whay not? This is the rendered html:
KSPR
  • 2,212
  • 4
  • 29
  • 46
21
votes
8 answers

How to fix canvas size in Mapbox GL?

I'm using Mapbox GL to show a map and crop a fixed size image from the center of it. It works great for a particular resolution I designed it (1920x1080) but when I started to make the page responsive where the map styles width and height changes,…
Andres
  • 6,080
  • 13
  • 60
  • 110
20
votes
6 answers

How to close all popups programmatically in mapbox gl?

So, I know that we have Marker.togglePopup() in Mapbox GL API. But can we close all popups programmatically?
Yahor Vaziyanau
  • 345
  • 1
  • 4
  • 12
20
votes
4 answers

mapbox gl change icon color

Is there a way to change a mapbox-gl-js icon-image color? This code taken from https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/ won't change the marker color to red map.addLayer({ "id": "markers", "type": "symbol", "source":…
jordi
  • 3,391
  • 2
  • 14
  • 14
20
votes
4 answers

Using Mapbox GL Offline

Is there a way to use Mapbox GL (asking about both JS and native) in an offline setting? With MBTiles, you could use either the MBTiles file or extract the raster images. I'm wondering if there's anything similar that would allow Mapbox GL to load…
Trevor
  • 301
  • 1
  • 2
  • 4
18
votes
2 answers

Mapbox GL js available icons

I am rewriting a web application from Mapbox.js to Mapbox GL js. Using the standard 'mapbox://styles/mapbox/streets-v8' style, where can I find a list of all working marker icons? Here is my code: m.map.addSource("markers", { "type":…
the_web
  • 406
  • 1
  • 4
  • 11
1
2 3
…
99 100