import * as React from 'react'; import {useRef, useCallback} from 'react'; import Map from 'react-map-gl/mapbox'; import type {MapRef} from 'react-map-gl/mapbox'; function App() { const mapRef = useRef<MapRef>(null); const onMapLoad = useCallback(() => { mapRef.current.on('move', () => { // ...

Use a MapLibre GL JS or Mapbox GL JS map as a fully controlled reactive component.

mapRef · Object · Ref for react-map-gl map component. mapboxApiAccessToken · String · https://www.mapbox.com/ position · String · "top-right" Position on the map to which the directions plugin control will be added.

import 'mapbox-gl/dist/mapbox-gl.css' import 'react-map-gl-geocoder/dist/mapbox-gl-geocoder.css' import React, { useState, useRef, useCallback } from 'react' import MapGL from 'react-map-gl' import Geocoder from 'react-map-gl-geocoder' // Ways to set Mapbox token: https://uber.github.io/react-map-gl/#/Documentation/getting-started/about-mapbox-tokens const MAPBOX_TOKEN = 'REPLACE_WITH_YOUR_MAPBOX_TOKEN' const Example = () => { const [viewport, setViewport] = useState({ latitude: 37.7577, longitude: -122.4376, zoom: 8 }); const mapRef = useRef(); const handleViewportChange = useCallback( (newVi

March 2, 2022 - const DriverMap = ({ selectedDriver, setSelectedDriver }: DriverMapProps): JSX.Element => { ... const mapRef = React.useRef<MapRef | null>(null) React.useEffect(() => { mapRef.current.on('styleimagemissing', (e) => { const size = 100 const dotGreen = Dot(size, 'rgba(50, 205, 50, 1)') const dotRed = Dot(size, 'rgba(255, 0, 0, 1)') if (!mapRef.current!.hasImage('dot-green')) { mapRef.current!.addImage('dot-green', dotGreen, { pixelRatio: 2 }) } if (!mapRef.current!.hasImage('dot-red')) { mapRef.current!.addImage('dot-red', dotRed, { pixelRatio: 2 }) } }) }, []) return ( <ReactMapGL initialViewSt

react-map-gl is a suite of React components designed to provide a React API for mapbox-gl or maplibre-gl.

April 11, 2026 - npm i react-map-gl · github.com/visgl/react-map-gl · github.com/visgl/react-map-gl#readme · 2,008,609 · 8.1.1 · MIT · a month ago · pessimistress · ibgreen · chrisgervang · felixpalmer · usefulthink · donmccurdy · Analyze security with SocketCheck bundle sizeView package healthExplore dependencies ·

mapRef · Object · Ref for react-map-gl map component. mapboxApiAccessToken · String · https://www.mapbox.com/ position · String · "top-right" Position on the map to which the directions plugin control will be added.

There are some situations where you want to know if a point is currently visible on the map. Checking this is simple and can be done like so: const mapRef = useRef<MapRef>(); const checkIfPositionInViewport = (lat, lng) => { const bounds = mapRef.current.getBounds(); return bounds.contains([lng, ...

October 3, 2019 - Hi, Working on a project that is getting quite large and I was wondering if there is a simple solution to using the map outside of the component. At the moment I am using a ref in order to use getMap() within the map component, but I hav...

August 18, 2019 - import React, { Component } from 'react'; import ReactMapGL from 'react-map-gl'; class Map extends Component { mapRef = React.createRef(); componentDidMount() { console.log(this.mapRef); // => log includes getMap() function const map = this.mapRef.getMap() // => TypeError!!

Each library offer unique features that may not exist in another. ... react-map-gl was first created by Uber's Visualization team, where Mapbox was used as a component to build powerful web tools such as geospatial analytics and self-driving data visualization.

import { ThreeLayer } from 'mapbox-gl-threelayer'; const ReactMapGL = () => { const mapRef = useRef<mapboxgl.Map>(); const [viewport, setViewport] = useState<any>({ width: '100%', height: '100%', longitude: 127.04674407739593, latitude: 37.30012673302676, zoom: 16, pitch: 60, }); const handleLoad = (event: MapLoadEvent) => { const { target } = event; mapRef.current = target; addThreeLayer(mapRef.current); }; const addThreeLayer = (map: mapboxgl.Map) => { const threeLayer = new ThreeLayer(); map.addLayer(threeLayer); threeLayer.threebox ·

July 8, 2024 - Using a simple implementation inspired by @Pessimistress in #1983 (comment), I find that the mapRef is null at the time onLoad is called. ... onLoad={({ target }) => { const map = target as MapboxMap; console.log("current event", map); console.log("current", mapRef.current); setTimeout(() => console.log("current later", mapRef.current), 10); }}

useControl<T extends IControl>( onCreate: ({map: MapRef, mapLib: maplibregl}) => IControl, options?: { position?: ControlPosition; } ): T useControl<T extends IControl>( onCreate: ({map: MapRef, mapLib: maplibregl}) => IControl, onRemove: ({map: MapRef, mapLib: maplibregl}) => void, options?: { position?: ControlPosition; } ): T useControl<T extends IControl>( onCreate: ({map: MapRef, mapLib: maplibregl}) => IControl, onAdd: ({map: MapRef, mapLib: maplibregl}) => void, onRemove: ({map: MapRef, mapLib: maplibregl}) => void, options?: { position?: ControlPosition; } ): T

Using react-map-gl requires node >= 12 and react >= 16.3.

A React binding of mapbox-gl-js. Contribute to alex3165/react-mapbox-gl development by creating an account on GitHub.

mapRef · Optional · Reference to react-map-gl instance. minZoom · 0 · Minimum zoom level at which clusters are generated. maxZoom · 16 · Maximum zoom level at which clusters are generated. minPoints · 2 · Minimum number of points to ...

<html> <head> ... <link href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css" rel="stylesheet" /> </head> </html> // ES6 import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl'; import 'mapbox-gl/dist/mapbox-gl.css'; // ES5 var ReactMapboxGl = require('react-mapbox-gl'); var Layer = ReactMapboxGl.Layer; var Feature = ReactMapboxGl.Feature; require('mapbox-gl/dist/mapbox-gl.css'); const Map = ReactMapboxGl({ accessToken: 'pk.eyJ1IjoiZmFicmljOCIsImEiOiJjaWc5aTV1ZzUwMDJwdzJrb2w0dXRmc2d0In0.p6GGlfyV-WksaDV_KdN27A' }); // in render() <Map style="mapbox://styles/mapbox/streets-v9" containerStyle={{ height: '100vh', width: '100vw' }} > <Layer type="symbol" id="marker" layout={{ 'icon-image': 'marker-15' }}> <Feature coordinates={[-0.481747846041145, 51.3233379650232]} /> </Layer> </Map>;