Hi,

When I render more than 200 markers, I notice the map start moving very slow when dragging. I have no issue with mapbox-gl-js, even with more than 400 markers written in React.

I decided to switch to react-map-gl because I wrote all markers and popup in React. It becomes cumbersome when integrating mapbox-gl-js with these components.

I can't change those markers to layer as I need to render 'complex' content (with html, css, etc.) I have tried to improve the performance by adding conditions to shouldComponentUpdate to only update when zoom, lat long, width, height changes. Also using memo or PureComponent for markers, popup. The performance gets slightly better but still, dragging around the map is slow.

Can anyone advice if is there a solution for my issue please? Thank you.

Hello! As my title suggests, since mapbox-gl already supports supercluster internally with newly updated spiderfying and other cool jazz, I am wondering if there is a best practice or if anyone has had the experience implementing a clustering layer within react-map-gl wrapper. Or something similar to this?

Since https://github.com/uber/react-map-gl/pull/565 landed in 3.3.4, the original map layer doesn't capture clicks anymore

const map = this.mapRef.getMap();
map.on('click', e => {
  console.log(e);
  // nothing gets logged
});

This makes it impossible to use certain features, such as handling clicks on clusters for example.

Is there a way to get the clicks to be passed to the original map layer?

I realise that the title relates to another Uber project - viewport-mercator-project, however it looks rather quiet there and I'm using this package within my React app, I thought here might be a better option.

I've tried to render a Map within a Create React App project: react v: 16.5.2 react-map-gl v: 4.0.2

When navigating to the page with the Map component, it resulted in this error in the Chrome console

0efa13d7437878dc03536a9dedddbbf1a8d59712.js:1 Error: viewport-mercator-project: assertion failed.
    at C (0efa13d7437878dc03536a9dedddbbf1a8d59712.js:1)
    at 0efa13d7437878dc03536a9dedddbbf1a8d59712.js:1
    at t.value (0efa13d7437878dc03536a9dedddbbf1a8d59712.js:1)
    at t.value (0efa13d7437878dc03536a9dedddbbf1a8d59712.js:1)
    at 0efa13d7437878dc03536a9dedddbbf1a8d59712.js:1
    at eo (0efa13d7437878dc03536a9dedddbbf1a8d59712.js:1)
    at ko (0efa13d7437878dc03536a9dedddbbf1a8d59712.js:1)
    at Io (0efa13d7437878dc03536a9dedddbbf1a8d59712.js:1)
    at pa (0efa13d7437878dc03536a9dedddbbf1a8d59712.js:1)
    at la (0efa13d7437878dc03536a9dedddbbf1a8d59712.js:1)

The React Map component:

import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import { merge } from "ramda";
import MapGL, { Marker } from "react-map-gl";
import Pin from "./Pin";

class LocationMap extends PureComponent {
  static displayName = "LocationMap";
  static propTypes = {
    lat: PropTypes.number,
    lng: PropTypes.number,
    zoom: PropTypes.number,
    pinSize: PropTypes.number
  };
  static defaultProps = {
    pinSize: 20
  };

  state = {
    viewport: {
      width: "100%",
      height: 400,
      latitude: 53.795231,
      longitude: -1.54511300000001,
      zoom: 15
    }
  };

  render() {
    const { pinSize } = this.props;
    const propsData = { latitude: this.props.latitude, longitude: this.props.longitude };
    const mapConfig = merge(this.state.viewport, propsData);

    return (
      <MapGL
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        onViewportChange={viewport => this.setState({ ...viewport, width: "100%" })}
        {...mapConfig}
      >
        <Marker latitude={this.props.latitude} longitude={this.props.longitude}>
          <Pin size={pinSize} />
        </Marker>
      </MapGL>
    );
  }
}

export default LocationMap;

Does anyone have any ideas about how to resolve this? Perhaps fixing the version of react-map-gl to "^3.." ?

react-map-gl is only tested using browserify, and unfortunately it appears to be non trivial getting react-map-gl and mapbox-gl-js working with webpack.

While we are not ready to commit to formal support for webpack, it would be great to have an example that could serve as a starting point for webpack users.

Is there a way to add a mapbox-gl-draw control to <ReactMapGL>? I was able to get it to appear on the screen by using ref to get a reference to the react component, which allowed me to access the underlying mapbox with getMap(). On that reference was able to successfully call addControl and though it appears correctly, it does not seem to be functioning. Is there anyone who has done this before and can help me out? Even if it's not actually by linking mapbox-gl-draw, any way to allow the user to interactively draw polygons/linestrings in a way that emits events that can be subscribed to would solve my problem. Thanks in advance!

ERROR in ./~/glify/index.js
Module not found: Error: Cannot resolve module 'fs' in /root/RelateRocket/webapp/node_modules/glify
 @ ./~/glify/index.js 5:9-22

Background

react-map-gl was originally created by Uber's visualization team to work with deck.gl. Aside from providing a React-friendly wrapper for Mapbox GL JS, it currently also addresses use cases including:

• Provide a base map layer for other visualization overlays, most extensively used in deck.gl and kepler.gl.
• A source of React map components without mapbox-gl dependency, including Marker, Popup and NavigationControl

The project was transferred to the Urban Computing Foundation in April 2020.

Issues with the current code base

Diverged dependencies

react-map-gl currently have two releases in production:

• v5.3 supports mapbox-gl v1 and maplibre-gl
• v6.1 supports mapbox-gl v2

The divergence happened when Mapbox changed its license, see https://github.com/visgl/react-map-gl/discussions/1380. It has become increasingly difficult to maintain as Maplibre and Mapbox start making more aggressive breaking changes.

Override of the native event handling

react-map-gl disables mapbox-gl's native event handling and implements its own. This is arguably the one most controversial design decision of this project, dated back to before the current maintainers were involved. Lengthy discussions have been had (e.g. #569, https://github.com/mapbox/mapbox-gl-js/issues/3746, #725) and continues to generate hard-to-resolve feature requests (#574, #1640, #1353, #775) and performance issues (#1151, #909).

Despite major efforts to improve the usability of the custom controller, it still has many open issues. The code base is quite complex already, with few developers able to navigate and contribute. Considering the complexity of the task, it is unlikely for the current release to support Mapbox's non-WebMercator projection feature in its current state.

Proposal

This RFC is gathering feedback for the following major breaking changes proposed for react-map-gl v7.

• Make mapbox-gl a peer dependency so that the library is impartial about the version/fork used.
• Drop the usage of mjolnir.js' EventManager and subsequently MapController altogether. Instead, we will pursue exposing mapbox-gl's native event system and attempt to hijack the camera change under the hood.
• This will allow users to use the latest rendering and interactive options when they are released by Mapbox.
• 3rd-party Mapbox addons will be supported by default.
• We can add a stateful version of MapGL that renders fully asynchronously without any performance impact.
• Remove transition interpolator classes and use native methods such as Map.flyTo and Map.easeTo.
• Custom MapController classes will stop working.
• Remove the overlay classes.
• Components such as Marker, Popup etc. will no longer be mapbox-independent. We will use React portal to render them into mapbox-gl's control container, instead of floating outside of the map container. deck.gl applications that render these components as children of DeckGL will stop working. I propose we move some of the current code to a new React component library that is independent from mapbox-gl.
• Rewrite the code base in TypeScript.

The goal is to have a code base that is less demanding to maintain, and more focused on the most common use cases. To achieve this, we have to drop some niche use cases and/or move their support to other projects.

Did someone manage to make it work in create-react-app ?

I got this error:

index.js:9Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at new module.exports (index.js:9)
    at Object.<anonymous> (web_worker.js:5)
    at __webpack_require__ (bootstrap 6c4040e…:555)
    at fn (bootstrap 6c4040e…:86)
    at Object.<anonymous> (worker_pool.js:4)
    at __webpack_require__ (bootstrap 6c4040e…:555)
    at fn (bootstrap 6c4040e…:86)
    at Object.<anonymous> (global_worker_pool.js:2)
    at __webpack_require__ (bootstrap 6c4040e…:555)

My component is quite simple

import React from 'react';
import MapGL from 'react-map-gl';
#
const MAPBOX_TOKEN = 'xxxx';

export function Map() {
  return (
    <div>
      <MapGL
        width={400}
        height={400}
        latitude={37.7577}
        longitude={-122.4376}
        zoom={8}
        mapboxApiAccessToken={MAPBOX_TOKEN}
        onChangeViewport={ (viewport) => {
          const { latitude, longitude, zoom } = viewport;
          // Optionally call `setState` and use the state to update the map.
        }}
      />
    </div>
  );
}

Thank you in advance for taking interest in this issue.

when i try to add the same code to a component and then call it within my react app i keep getting the following error,

mapbox-gl.js:33 Uncaught TypeError: Cannot read property 'getMaxBounds' of undefined
    at o._isOutOfMapMaxBounds (mapbox-gl.js:33)
    at o._onSuccess (mapbox-gl.js:33)

Map settings are the same as in the example.

In general all other (that i am using) features are working.

Any help would be appreciated

The mapbox API provides setLayoutProperty method for developers to change the layout property of a map instance, such as the language:

According to mapbox API, I can use it in this way:

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [16.05, 48],
    zoom: 2.9
});

// and the new property value.
map.setLayoutProperty('country-label-lg', 'text-field', ['get', 'name_zh']);

I am developing project with react-map-gl and deck.gl, I use StaticMap exactly in my project and need to change the display language of maps.

But after looking through the docs of react-map-gl and StaticMap file, I couldn't find a method to achieve that.

I found that StaticMap provides a method called getMap():

https://github.com/uber/react-map-gl/blob/cb173b0ac405c42200ddfdaad5a6bed96d665fbf/src/components/static-map.js#L174-L176

But when I use this method to make changes to map instance, there's nothing happened.

const map = this.refMap.current.getMap();

map.on(
	'load', 
	() => map.setLayoutProperty('country-label-lg', 'text-field', ['get', 'name_zh-Hans'])
);
...

render() {
	return (
		<StaticMap ref={e => {this.refMap = e;}} >
	);
}

Target Use Case

I want to be able to use the draw polygon example in my Projects but I don't know what is a good way to store it in a database, I would request for a feature and data encoding for these polygons in such a way that I can easily add it to a db table.

Proposal

We can think of some sort of encoding or representation of the Polygons and then sending that as a callback after one polygon is created or deleted, and also some sort of a unique ID or standard encoding might help. Not sure about the computational geometry that we can use in this, But This might be pretty useful for people.

In this PR I have solved issue #2071 I've tried and created a temporary release in the meantime, you can check out the results here, this forked from issue report.

Please review and review it, many thanks. ^^

cc @Pessimistress @theRuslan

Description

Unexpected behaviour when projection is globe - polygon is not closed by clicking on vertex or same issue after flyTo animation

Expected Behavior

No response

Steps to Reproduce

https://visgl.github.io/react-map-gl/examples/draw-polygon with projection "globe"

Environment

• Framework version: latest
• Map library: mabox-gl 2
• Browser: chrome
• OS: macos 13

Logs

No response

Description

When I add Markers to a Map and have 3D Terrain enabled, I noticed that changing state in React causes the markers to render in their original location on the map, rather than their modified 3D Terrain location. I'm not sure the technical words to use for this.

I've created a Code Sandbox as basic as possible to show this behavior. It sounds like this is the preferred way of sharing/showing potential bugs.

I couldn't find any issues that were related to this, but perhaps this closed issue is along the same vein?

I'd be happy to help in however I can, but I'll wait to hear back! Thank you!

Expected Behavior

Changing state in React will still keep Markers in their existing position on the 3D Terrain.

Steps to Reproduce

react-map-gl | 3D Terrain with Locations as Markers

You can click the Second of the the two buttons in that Code Sandbox demo, which reads "Change State," to see the behavior. Then, if you click and drag to change the map's view state, you can see the Markers render to the correct location on what I assume is the next React state change.

I didn't use the boiler plate template, because it's configured for a very old version of React. I just used the most up-to-date Create React App template.

Edit: I created this nearly identical demo, react-map-gl | 3D Terrain with Locations as Layer (Symbols), but with the differences indicated in its name. It uses a layer of symbols instead of markers. This is what I would hope that the Markers would do, but I'm guessing it has something to do with rendering on top of the canvas rather than inside of it? Just a little more investigating by me.

Environment

• Framework version: [email protected]
• Map library: [email protected]
• Browser: Version 108.0.5359.125 (Official Build) (64-bit)
• OS: Windows 10 Pro

Logs

No response

Target Use Case

Mapbox throws a warning when you try to load an image that hasn't been added.

Image [...] could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.

They have a new map event, styleimagemissing, that I think should be exposed by this React Wrapper. Unless this is already an event type that's supported with another callback handler that I've been overlooking.

Proposal

The usage might look something like this. I'm happy to help contribute in this feature if it's something that folks think would be good to add. I'll wait to hear back from a maintainer first though 😄

<Map
   {...initialViewState}
   mapboxAccessToken={MAPBOX_TOKEN}
   projection={'globe'}
   style={{ position: 'absolute', top: '0', bottom: '0', left: '0', right: '0' }}

   onStyleImageMissing={evt => {
      evt.target.loadImage(
         "./icons/mapbox-marker-icon-20px-red.png",
         (error, image) => {
            if (error)
               throw error;
            evt.target.addImage(mapImages.Default, image);
         }
      );
   }}
/>

Bumps express from 4.17.2 to 4.18.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.