Questions tagged [mapbox-gl-js]

Introducing a cutting-edge JavaScript library empowered by WebGL, designed to seamlessly render the dynamic Mapbox Vector Tiles directly within your browser. It is crucial not to mistake this revolutionary toolkit for either Mapbox.js, an earlier Leaflet-based framework, or Mapbox-GL, an encompassing phrase denoting various SDKs such as Android and iOS specialized libraries.

Looking to increase the resolution of a 512x512 heightmap array of pixels in a png image to 2017x2017 using JavaScript for implementation as a heightmap in Unreal Engine 4?

I have a task of converting a 512 x 512 32-bit RGB PNG image with encoded height values into a 16-bit grayscale PNG representing height values for a height map. Below is the code used for this conversion: The image conversion process utilizes image-js li ...

Using Mapbox's geocoder with React

After creating my first React app, I decided to upgrade the d3 map to a more modern Mapbox version. The data being transmitted consists of country names and their respective percentages, with the goal of visualizing each country along with its percentage ...

Images showing Strava heat maps retrieved through API

Check out this amazing heatmap created by Strava! I'm curious about how they were able to achieve this - it seems like they are using the API to request overlay images based on the network tab. I have my own geo data, but I'm wondering how I can convert t ...

Implementing a Button Click Event Listener on a Separate Component in React

Currently, my React application incorporates MapBox in which the navbar is its parent component. Within the navbar component, there is a button that collapses the navbar when clicked by changing its CSS class. I also want to trigger the following code snip ...

When using both React's forwardRef and callback ref, the ref can sometimes become undefined

This issue is not related to Mapbox, and no map or geographical knowledge is required to assist. The problem at hand pertains to React refs. Currently, I am utilizing react-map-gl (Mapbox for React) in conjunction with @mapbox/mapbox-gl-draw to enable use ...

Navigating coordinates with mapbox

Is mapbox only able to support coordinates in the format of numbers such as [-58.5003038, -34.5741957]? In my database, I have coordinates stored in a format containing both numbers and directions like 1010N 09710W. When I try to directly place them on th ...

Ensure that the Map reference object is accessible when the first modal window is displayed or opened

My issue involves a table where selecting a row should display the item's location on a map using react-map-gl in a Dialog component. However, upon clicking the row, the mapref returns null during the initial render, even though it should provide mapref ob ...

Renewal of a personalized linestring layer in MapBox GL JS triggered by a Geocoder event

I am currently using MapBox GL JS and I have a requirement to redraw a linestring layer whenever a Geocoder.on event occurs. Upon examining my code, I noticed that the linestring only gets drawn on the first .on event, and nothing happens during subsequen ...

Ensure all coordinates are aligned within the boundaries of the map when using react in mapbox

Imagine a scenario where I have either one or two points on a map. Dealing with just one point is straightforward - I can zoom in and out as needed with that point as the center. However, when it comes to having two points on the screen, I'm unsure of ho ...

Utilize Mapbox-GL.JS to animate several points along designated routes

I'm encountering issues with the following example: Animate a point along a route My goal is to add another point and routes in the same map container. Here's what I've tried so far: mapboxgl.accessToken = 'pk.eyJ1IjoicGFwYWJ1Y2t0IiwiYSI6ImNqa2k3azQ ...

I'm having trouble getting Mapbox to function properly within my Next.js application

I've been struggling with implementing the react-map-gl library without success. I followed the instructions in the documentation at https://docs.mapbox.com/mapbox-gl-js/guides/, but unfortunately, it's not working for me. Here is the code I've been using: ...

What is the process for generating SDF-Icons (Mapbox's specialized icons) from PNG files?

I am currently working on changing the icon color of an icon image in Mapbox. According to Mapbox documentation, the only way to do this is by using sdf-icons (https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-symbol-icon-color). After hours o ...

TypeError thrown by Mapbox markers

Looking to incorporate markers into my map using Mapbox. Below is the Angular TypeScript code I am working with: export class MappViewComponent implements OnInit { map: mapboxgl.Map; lat = 41.1293; lng = -8.4464; style = "mapbox://styles/mapb ...

deleting the existing marker before placing a new marker on the Mapbox

Upon the map loading with GeoJson data, I have implemented code to display markers at specified locations. It works flawlessly, but I am seeking a way to remove previous markers when new ones are added. What adjustments should be made for this desired func ...

Generating a 3D model and integrating it with a 3D terrain display on Mapbox

My goal is to integrate a 3D model as a custom layer on Mapbox using Three.js, alongside adding a 3D terrain on the map. I have followed the documented examples for incorporating a 3D model and 3D terrain from Mapbox. The issue I'm encountering is that th ...