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
17
votes
6 answers

MapBox markers Move on zooming

I'm working on MapBoxgl and I want to add several markers. Here is my index.html:
Mahdi
  • 664
  • 3
  • 15
  • 35
16
votes
2 answers

In a mapbox gl js layer of type 'fill': Can we control the stroke thickness?

According to https://www.mapbox.com/mapbox-gl-js/style-spec/ a layer with type='fill' draws "a filled polygon with an optional stroked border". type: 'fill', paint: { 'fill-color': 'orange', 'fill-opacity': 0.5, 'fill-outline-color':…
citykid
  • 9,916
  • 10
  • 55
  • 91
16
votes
8 answers

How to manipulate event bubbling when registering click event upon a layer in mapbox gl js

How can I stop event propagation on layer click events? mapBox.on('click', layerId, function (e) { console.log(e); // e.stopPropagation(); which is not working // e.originalEvent.stopPropagation(); which is not working var…
Amit Gore
  • 421
  • 4
  • 12
16
votes
0 answers

Showing Direction Arrow on Line in Mapboxgl

Trying to show a arrow as indication of direction in mapboxgl. The arrow is only visible at high zoom and is not visible at low zooms. Adding a image Layer with 'symbol-placement': 'line' Line Layer map.addLayer({ 'id': 'route', …
vito
  • 473
  • 1
  • 7
  • 17
16
votes
1 answer

Removing a source in mapbox gl js doesn't remove its layers

I'm trying to selectively remove a source in mapbox gl js, I'm using map.removeSource('') but nothing happens. The layers still remain on the map. I've created an example in Codepen.
Carpetfizz
  • 8,707
  • 22
  • 85
  • 146
15
votes
3 answers

Mapbox GL Js: adding and removing GeoJSON sources and layers

Im having a problems adding and removing layers in mapbox gl. I have this layer: map.addLayer({ "id": "route", "type": "line", "source": { "type": "geojson", "data": { "type":…
Pablo Estrada
  • 3,182
  • 4
  • 30
  • 74
15
votes
1 answer

What do minzoom and maxzoom do in Mapbox-GL-JS exactly?

What exactly do the minzoom and maxzoom properties on vector tile sources, and vector-based layers do in Mapbox-GL-JS styles? The documentation is a bit short.
Steve Bennett
  • 114,604
  • 39
  • 168
  • 219
15
votes
1 answer

Is it possible to query features that are not being displayed?

I would like to know if there is a way to query features that are not being displayed on a map. Both queryRenderedFeatures and querySourceFeatures only work when the features are being displayed on the map. I tried also to hide the features using…
thiagoxvo
  • 347
  • 2
  • 10
14
votes
1 answer

Raycast in Three.js with only a projection matrix

I'm rendering some custom layers using Three.js in a Mapbox GL JS page following this example. I'd like to add raycasting to determine which object a user has clicked on. The issue is that I only get a projection matrix from Mapbox, which I use to…
danvk
  • 15,863
  • 5
  • 72
  • 116
13
votes
4 answers

Missing MapBox CSS using React

I'm trying to work with MapBox using React. I've created the project with create-react-app, added mapbox-gl ("mapbox-gl": "^0.46.0-beta.1"), but I have a problem with css file. It shows me this warning: This page appears to be missing CSS…
Javier
  • 1,975
  • 3
  • 24
  • 46
13
votes
4 answers

Testing a react-mapbox-gl with jsodom and jest

Consider we have the following Map component. This is in TypeScript, but the same should apply for normal JavaScript. import * as React from 'react'; import ReactMapboxGl from 'react-mapbox-gl'; const MapBox = ReactMapboxGl({ accessToken:…
Rovanion
  • 4,382
  • 3
  • 29
  • 49
12
votes
1 answer

Scale marker size relative to the zoom level in Mapbox GL JS

I want to decrease the size of the markers when the zoom level of the map is increased. How can I achieve this?
dclipca
  • 1,739
  • 1
  • 16
  • 51
12
votes
3 answers

Can I add a GeoJSON line like they do in the (mapbox-gl-js documentation) using react-map-gl?

I'm trying to add a GeoJSON line to show car direction between a point A and a point B ( like they have in the official documentation of mapbox-gl-js (https://www.mapbox.com/mapbox-gl-js/example/geojson-line/) But the docs of react-map-gl doesn't…
AziCode
  • 2,510
  • 6
  • 27
  • 53
12
votes
2 answers

Remove all labels on Mapbox GL JS?

I'm using the Mapbox Dark v9 style and would like to remove all the labels. I found a list of labels here. And have tried the map.removeLayer function to remove some of them, e.g.: map.removeLayer("place_label"); As well…
cpd
  • 735
  • 2
  • 7
  • 16
12
votes
5 answers

Mapbox GL JS: zoom to filtered polygon?

I am using Mapbox GL JS to display a polygon layer. I would to allow the user to choose a name from a dropdown, and then highlight and zoom to the matching polygon. I already know how to highlight the matching polygon using map.setFilter, but I…
Richard
  • 62,943
  • 126
  • 334
  • 542
1
2
3
…
99 100