Questions tagged [mapbox-gl-js]
A WebGL JavaScript interactive maps library that can render Mapbox Vector Tiles.
325 questions
1
vote
1
answer
98
views
How to style Mapbox heatmap
I have this GeoJSON (can be downloaded here). The data is distributed through a grid, thus the points are distributed regularly.
However, each point has a different "weight" via the prop ...
- 3,440
0
votes
1
answer
111
views
MapBox not working in qgis2web Plugin
I've imported customized basemap from Mapbox studio, and want to create a webpage for visualization using qgis2web plugin.
The QGIS imports and displays the base map from map box properly.
However, ...
1
vote
1
answer
192
views
Two MapLibre GL JS raster layers pointing to same Geoserver layer
Is it possible to use in MapLibre GL two raster layers on the same time that point to the same Geoserver layer?
I defined two raster layers in maplibreGL pointing to the same Geoserver layer. One are ...
- 419
0
votes
0
answers
98
views
Gradient fill polygons possible in web maps?
I need to be able to display polygons with uncertain boundaries in a web map I am building.
Here is an example:
I have styled this example in QGIS using a Gradient Fill.
I cannot find a way to style ...
- 326
1
vote
0
answers
54
views
How to render marker for each features gotten from vector tile API in Mapbox GL JS?
I am using Mapbox GL JS in my vuetify project. I have a vector tile API. This API will return points for each tile (xyz). I use addSource and addLayer to render the features gotten from the vector ...
- 105
1
vote
1
answer
83
views
How to get rid of status: 400 when using MapBox GL JS with GeoServer data?
I have uploaded the data to a local Geoserver and am connecting it to my map on MapBox GL JS. The data is displayed correctly on the map and does not cause any errors in the logs. But when I start ...
- 33
1
vote
1
answer
514
views
Adding WMS layer in Mapbox GL JS
I'm trying to layer data from Kartverket (Norwegian Mapping Authority) over my Mapbox map, but currently the only thing I'm getting returned is a transparent image. I'm wondering if there are anyone ...
- 13
1
vote
0
answers
181
views
maplibregl/mapboxgl color transitions get lost after setPaintProperty
I want my features to smoothly transition different to colors based on its data.
For this I apply a new map.setPaintProperty but then the 'fill-color-transition' property becomes lost, forever.. Some ...
- 419
2
votes
0
answers
144
views
Troubleshooting GeoServer Vector Tile TIME VIEWPARAMS Misinterpretation in Mapbox GL JS Integration
I am trying to deploy a spatial layer with data in PostgreSQL/PostGIS. The data has a temporal dimension and is configured as such in GeoServer.
The goal is to use the layer through Mapbox GL JS and ...
0
votes
3
answers
181
views
Missing line segment when serving a vector tile from PostGIS
I'm hosting a table of four points in PostGIS and querying it to create a vector tile layer of a line connecting the points.
The second and fourth points in the table are the same.
The resulting ...
- 191
1
vote
1
answer
185
views
Collapsible sidebar instead of popup message in Mapbox?
Trying to implement collapsible side bars instead of using Mapbox built in Popup boxes for messages.
Had a go and built upon this and this thread.
My attempt can be found here, JavaScript below:
// TO ...
- 13
1
vote
0
answers
127
views
Importing Lod2 Data into Threebox/ThreeJs as georeferenced
I have a project and I want to import my LoD2 data into threebox. I tried this in several way.
Original data in CityGML format that contains multiple buildings but since ThreeJS/Threebox does not ...
1
vote
1
answer
131
views
Collapse geocoder plugin search box in Mapbox
How do I make my MapboxGeocoder collapse when not on hover? I am trying to make it like this example (be sure to add your access token to the end), where the Geocoder search field expands when it's ...
- 113
2
votes
2
answers
266
views
Query mbtile vector at a higher zoom level while visualising in lower zoom in Mapbox GL JS?
I've created five GeoJSONs for H3 resolution cells from 3 to 7. Each GeoJSON was then converted into mbtile for different zoom level and joined together to form a single mbtile. Now, I can render ...
0
votes
1
answer
191
views
Using mapbox static image api as a raster layer is distorted
I'm trying to generate a static image of a map for use when the user's device is offline. I request the static image with a bounding box (that is calculated automatically to fit all my features in) ...
- 427
0
votes
0
answers
122
views
NASA's GIBS WMTS servers with Mapbox GLJS
I want to use WMTS Vector Tiles with Mapbox GL JS. The points on the map are displayed but slightly off as you can see are the points for Africa in the ocean.
The tiles URL is from the GIBS tutorial ...
- 11
0
votes
1
answer
2k
views
Mapbox GL JS custom symbol layer not visible when using external vector tiles
I've been using mapbox://styles/mapbox/satellite-v9 as the map style and adding a custom symbol layer for land parcel IDs. These show fine.
If I instead load with a different style https://api.os.uk/...
- 427
1
vote
2
answers
263
views
Distorted image overlay in Leafet and Mapbox
I have created some png images from a tiff using gdal_translate
It fits well in QGIS
Info from QGIS about the layer
Extent -63.0499992370605469,-11.0499992370605469 : 101.9500007629394531,71....
- 419
3
votes
2
answers
84
views
Slice circular linestring by shortest distance between 2 points
I have a polygon of a farming field. I am dropping 2 Points along the field borders in order to easily measure the distance between those points.
This works great most of the time, but in some ...
- 427
1
vote
0
answers
110
views
Y coordinate of mbtiles is in descending order (tippecanoe, ogr2ogr)
I want to convert a geojson to MVT and upload it to s3 to use it with Mapbox GLJS.
I tried this tutorial https://geovation.github.io/tippecanoe-directory-support.
With tippecanoe --no-feature-limit --...
- 11
0
votes
0
answers
251
views
Set boundries for Mapbox LineString to follow oceans
I've created a map where the user adds all blogposts as markers and I'm using LineString to connect all markers.
Is it possible to draw a line between two points in the ocean, where the line never ...
- 1
2
votes
0
answers
295
views
How would I display H3 hexagons on top of Mapbox GL React native
I want to make an interactive app where users can view crime rates in their area by pulling in geo-data from the met police website.
I have gotten the Mapbox map to display but I am trying to figure ...
- 31
1
vote
1
answer
1k
views
Detecting mouse move end event in Mapbox GL JS?
I need to detect when mouse over mapbox gl js ends movement in order to make a request to the server only when mouse has stopped the movement but it doesn't exist a "mouseStop" event or ...
- 327
0
votes
1
answer
488
views
Applying MBStyle from GeoServer to Mapbox GL JS Map
I'm adding a tile layer (Feature Collection?) from a Geoserver to a Mapbox GL JS map and all of the geometry appears to be coming across fine for me. What I can't for the life of me work out is how to ...
- 11
0
votes
2
answers
71
views
Mapbox GL JS relations
I have three layers as follows;
ski areas (polygons)
ski lifts (ways)
ski rund (ways)
There is a unique ID that makes it relate back to the ski area. This is an example:
ski areas (polygons) // id=...
- 181
0
votes
1
answer
1k
views
How to rotate custom marker in Mapbox
I'm using a custom marker with Mapbox-gl for web, and at the same time, I expect to rotate the cursor to follow the line created with the latitude and longitude.
this.mapa = new mapboxgl.Map({
...
0
votes
1
answer
1k
views
Implementing H3-JS in Mapbox based map to Openlayers based map
In the H3-JS example I have, it is implemented in mapbox. But I would like to integrate the H3-JS binning as part of Openlayers map instead.
This is the example I want to implement in OpenLayers. ...
- 21
0
votes
3
answers
1k
views
how to make Map ref object available on first modal window render/launch
I have a table where when I click on a row of the table, I get the content/objects of the row which I am passing to the Dialog component that uses
react-map-gl
to display the item's location based on ...
- 31
1
vote
1
answer
698
views
Project Mercator coordinates at a specified zoom level in Mapbox GL JS
I am struggling a bit moving from Leaflet to Mapbox. I have geojson with coordinates like [68100095, 100779149], which I am told are Mercator x/y coordinates at a zoom level of 20. This is how the ...
- 113
1
vote
1
answer
2k
views
Using "CASE WHEN" and "IN" condition in MapBox GL JS?
I would like to set data driven style for a layer in MapBox GL JS. I want to use two fields: "category" (string) and "status" (string) and display the points with custom SVG icons. ...
- 349
1
vote
1
answer
585
views
Generate bounding box from PNG image and World File
From this folder I can get two files:
PNG Image
World File (.wld)
From this page where they document how these files are to be used, they say that they are generated in the EPSG:4326 projection.
My ...
1
vote
1
answer
782
views
Mapbox GL JS Equivalent to Leaflet LayerGroup?
Does anybody know of an equivalent to the Leaflet L.layerGroup in Mapbox GL JS? I can do this in leaflet:
var layerGroup = L.layerGroup().addTo(map);
And then if I want to add, say, a marker to the ...
3
votes
1
answer
1k
views
Load WMS service into Mapbox map
I am able to add a WMS layer to a Leaflet map with very simple, readable code:
var wmsURL = 'https://opengeo.ncep.noaa.gov/geoserver/klwx/klwx_bref_raw/ows?';
var wdgProductLayer =
L.tileLayer.wms(...
2
votes
0
answers
265
views
Maputnik with custom tile server (auth)
I have a private vector tile server with authentication in place, at the moment I am trying to set up a solution to generate my own styles for mapbox-gl-js. While investigating options I found ...
- 23
0
votes
0
answers
205
views
Illustrate distance along path, like "measure distance" in Google Maps using Mapbox GL JS
In a map in a web application, I would like to illustrate distance along a path, like how it is done with the measure distance tool in Google Maps (see attached image).
Is there a way to do this in ...
- 131
3
votes
0
answers
603
views
How can I configure zoom extent in Mapbox when generating raster tilesets from GeoTIFF?
GOAL
I'm using Mapbox to generate raster tilesets from raw GeoTIFFs. The GeoTIFFs have a resolution such that a single pixel represents roughly a 5km x 5km square on the map. I hope to generate and ...
- 31
1
vote
2
answers
2k
views
Mapbox layer doesn't update on variable change | react-map-gl
I have a map with a custom layer. Right now I have a problem that when points state get updated the map doesn't rerender. How can I force a rerender of the map layer when points changes? Codesandbox: ...
- 161
0
votes
0
answers
166
views
How do I change the camera speed in MapBox GL JS?
When you press the "up" arrow on the keyword, the camera moves "forward" with the current angle and height, etc. This makes it look sort of like a helicopter or airplane looking ...
- 9
3
votes
2
answers
1k
views
How do I translate MapBox GL JS GPS coordinates into SWEREF 99 TM ones?
I have to deal with this: https://minkarta.lantmateriet.se/?e=493056&n=6795776&z=3&profile=karta&background=1&boundaries=false
This is a URL which uses "e" and "n&...
- 33
1
vote
0
answers
1k
views
How should we display GeoPackage on Mapbox GL JS?
We used wgrib2 to convert weather radar data into NetCDF format. We converted it to GeoPackage format using gdal_translate. We created a Color Map on QGIS 3.10 and the GeoPackage appeared as expected.
...
- 111
0
votes
1
answer
755
views
Using several sources layers from the same tileset in Mapbox
I have a tileset where I am adding several layers, I want to call them so i can organize the order I receive it. I want first to show source layer1 and then underlaying source layer2. I have tried ...
- 310
1
vote
0
answers
1k
views
Adding a new point at user click while modifying an existing line or polygon geometry using Mapbox-gl-draw?
I would like to have an edit option for my user to edit an existing line or polygon plotted in a map.
The edit option should allow user to add new vertices where user clicks.
I have tried using Mapbox-...
- 21
2
votes
1
answer
561
views
Mapbox - checkbox filters work in modal but not div
In my first map (https://codepen.io/flyinginsect2/pen/oNoQvNQ), the checkbox filters in the modal popup seem to work just fine. However, when I move the filters to a new div (https://codepen.io/...
- 165
0
votes
1
answer
1k
views
Mapbox - combining multiple checkbox filters
I am creating a Mapbox map in which I want multiple checkboxes to create an 'and' filter on one layer.
Here's the checkbox parts of my code so far:
<input type="checkbox" id="srBox&...
- 165
2
votes
0
answers
2k
views
Fit label text-size within the polygon Mapbox GL JS symbol-layer
I want to make the text-label in the symbol layer fit within the polygon. Change the position and size of the text-label according to zoom and polygon. It is required for Mapbox GL JS.
const map = new ...
3
votes
0
answers
1k
views
Projection XY with maplibre
I am using Leaflet with crs: L.CRS.Simple for a game map(XY coords) with "leaflet-rastercoords" https://github.com/commenthol/leaflet-rastercoords
and want to switch to maplibre (aka Mapbox)....
- 273
2
votes
1
answer
3k
views
Cropping specific area of map using Mapbox GL-JS
I am working on Mapbox. Is there any possible way to crop map image using Mapbox? Right now I am getting complete map as canvas but I just need to crop a specific area.
The thing which I want is to ...
- 47
0
votes
0
answers
2k
views
Updating cluster layers dynamically in Mapbox-gl-js
I use Mapbox GL JS to draw some points on the map. I also use a cluster to organize the points. My source code is almost the same as official example in their documentation. The only difference is I ...
- 101
0
votes
1
answer
1k
views
Converting long/lat coordinates for a selected feature in Mapbox tile GeoJSON such as a road to Unreal Engine x,y coordinates
The goal is to be able to download a real-world height map, import it into Unreal as a landscape, then draw roads on that landscape based off the GeoJSON file coordinates for that road.
I use this ...
- 103
0
votes
0
answers
80
views
OSM route inside campsite
I have a problem that I want router to route only inside campsite if starting point is inside campsite, not around campsite as the example in the image. Is there any way to do it? If it is important, ...
- 1