React friendly API wrapper around MapboxGL JS

Last update: Jun 26, 2022

version build downloads

react-map-gl | Docs

react-map-gl is a suite of React components designed to provide a React API for Mapbox GL JS-compatible libraries. More information in the online documentation.

See our Design Philosophy.

Installation

Using react-map-gl requires react >= 16.3.

npm install --save react-map-gl

Example

import * as React from 'react';
import ReactMapGL from 'react-map-gl';

function Map {
  const [viewport, setViewport] = React.useState({
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 8
  });

  return (
    <ReactMapGL
      {...viewport}
      width="100%"
      height="100%"
      onViewportChange={(viewport) => setViewport(viewport)}
    />
  );
}

Using Mapbox Tokens

Starting with v2.0, mapbox-gl requires a Mapbox token for any usage, with or without the Mapbox data service. See about Mapbox tokens for your options.

To show maps from a service such as Mapbox you will need to register on their website in order to retrieve an access token required by the map component, which will be used to identify you and start serving up map tiles. The service will be free until a certain level of traffic is exceeded.

There are several ways to provide a token to your app, as showcased in some of the example folders:

  • Provide a mapboxApiAccessToken prop to the map component
  • Set the MapboxAccessToken environment variable (or set REACT_APP_MAPBOX_ACCESS_TOKEN if you are using Create React App)
  • Provide it in the URL, e.g ?access_token=TOKEN
  • Provide mapboxApiUrl prop to the map component to override the default mapbox API URL

But we would recommend using something like dotenv and put your key in an untracked .env file, that will then expose it as a process.env variable, with much less leaking risks.

Limitations

This library provides convenient wrappers around initializing and (to some degree) tracking the state of a Mapbox WebGL map. Because most of the functionality of Mapbox's JS API depends on the use of HTML5 canvases and WebGL, which React is not built to manipulate, the React component does not mirror all the functionality of Mapbox GL JS's Map class. You may access the native Mapbox API exposed by the getMap() function in this library. However, proceed with caution as calling the native APIs may break the connection between the React layer props and the underlying map state.

Examples of replacing common native API calls with their React equivalents can be found on the FAQ page.

Contribute

See contribution guide.

GitHub

https://github.com/uber/react-map-gl
Comments
  • 1. > 200 markers cause map slow when dragging

    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.

    Reviewed by thanhphuong612 at 2019-03-08 19:21
  • 2. Integrating Mapbox's Supercluster with react-map-gl

    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?

    Reviewed by winston-bosan at 2018-04-26 15:37
  • 3. Click event isn't fired on the original map

    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?

    Reviewed by vkammerer at 2018-08-08 20:31
  • 4. viewport-mercator-project assertion failed

    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.." ?

    Reviewed by tmhn at 2018-12-05 22:55
  • 5. Create example that bundles react-map-gl using webpack

    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.

    Reviewed by ibgreen at 2016-08-22 18:00
  • 6. DrawControl

    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!

    Reviewed by DeMol-EE at 2018-01-30 16:26
  • 7. Building in webpack throws error

    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
    
    Reviewed by KyleAMathews at 2015-11-13 03:33
  • 8. RFC: react-map-gl v7.0

    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.

    Reviewed by Pessimistress at 2021-12-23 01:22
  • 9. Unable to use react-map-gl in create-react-app

    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.

    Reviewed by gauthierrodaro at 2017-01-10 15:22
  • 10. Locate User example not working when used in CRA

    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

    Reviewed by woss at 2019-10-28 12:56
  • 11. Is there an API I can use for calling setLayoutProperty method on the map instance?

    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;}} >
    	);
    }
    
    Reviewed by hijiangtao at 2018-12-27 13:25
  • 12. Bump jpeg-js from 0.4.3 to 0.4.4 in /website

    Bumps jpeg-js from 0.4.3 to 0.4.4.

    Release notes

    Sourced from jpeg-js's releases.

    v0.4.4

    v0.4.4 (2022-06-07)

    • feat: add comment tag encoding (#87) (13e1ffa), closes #87
    • fix: validate sampling factors (#106) (9ccd35f), closes #106
    • fix(decoder): rethrow a more helpful error if Buffer is undefined (#93) (b58cc11), closes #93
    • chore(ci): migrate to github actions (#86) (417e8e2), closes #86
    • chore(deps): bump y18n from 4.0.0 to 4.0.3 (#98) (2c90858), closes #98
    • chore(deps): bump ws from 7.2.3 to 7.4.6 (#91) (fd73289), closes #91
    • chore(deps): bump hosted-git-info from 2.8.8 to 2.8.9 (#90) (9449a8b), closes #90
    • chore(deps): bump lodash from 4.17.15 to 4.17.21 (#89) (ffdc4a4), closes #89
    Commits
    • 9ccd35f fix: validate sampling factors (#106)
    • b58cc11 fix(decoder): rethrow a more helpful error if Buffer is undefined (#93)
    • 2c90858 chore(deps): bump y18n from 4.0.0 to 4.0.3 (#98)
    • fd73289 chore(deps): bump ws from 7.2.3 to 7.4.6 (#91)
    • 9449a8b chore(deps): bump hosted-git-info from 2.8.8 to 2.8.9 (#90)
    • ffdc4a4 chore(deps): bump lodash from 4.17.15 to 4.17.21 (#89)
    • 13e1ffa feat: add comment tag encoding (#87)
    • 417e8e2 chore(ci): migrate to github actions (#86)
    • See full diff in compare view

    Dependabot compatibility score

    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.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-17 03:32
  • 13. Bump devcert from 1.1.3 to 1.2.2 in /website

    Bumps devcert from 1.1.3 to 1.2.2.

    Commits
    Maintainer changes

    This version was pushed to npm by jzetlen, a new releaser for devcert since your current version.


    Dependabot compatibility score

    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.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-14 01:53
  • 14. Bump eventsource from 1.1.0 to 1.1.2

    Bumps eventsource from 1.1.0 to 1.1.2.

    Changelog

    Sourced from eventsource's changelog.

    1.1.2

    • Inline origin resolution, drops original dependency (#281 Espen Hovlandsdal)

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)
    Commits

    Dependabot compatibility score

    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.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-14 01:53
  • 15. [Bug] error e.originalEvent not found in nextJS

    Description

    when i use e.originalEvent.stopPropagation(); in popup/marker example it gives me error " originalEvent " not found and i solved it just by removing "originalEvent" function and it worked well

    Expected Behavior

    No response

    Steps to Reproduce

    null

    Environment

    • Framework version: nextJs
    • Map library:
    • Browser: firefox
    • OS: linux

    Logs

    No response

    Reviewed by AlirezaNikkhah1375 at 2022-06-11 16:58
  • 16. [Feat] Ability to change tiles of raster

    Target Use Case

    I have a <Source> of type raster in which I would like to change the tiles dynamically.

    My use case is that my source is a WMS satellite pictures API of an area in which I can select the date (when it's not too cloudy), or the visualisation type (natural colours, temperature, reflection…).

    Updating tiles of raster source is unsupported as it throws an exception Unable to update <Source> prop: tiles in source.ts.

    I tried to create many sources at first and switch them using the source attribute of <Layer> but it doesn't seem to be updated.

    Proposal

    Source of type raster could support updating their tiles.

    Reviewed by fungiboletus at 2022-05-27 06:58
  • 17. feat: Support for custom mapbox layer

    Sometimes it can be handy to insert a visualisation layer under another layer from mapbox (for example under the labels).

    To do that, we can use DeckGL's custom mapbox layer that we insert between mapbox own layers.

    Since DeckGL's custom layer need methods on the prototype (onAdd, onRemove, render), we cannot copy the layer props with spreading, otherwise we lose the methods. This is why the layer prop is added on the Layer so that we can pass the custom layer without any copying. This is also why there is some rework around beforeId so that it is external to the layer and only part of the Layer component props, not of the layer options props.

    I'd like to have your opinion on this way of doing before continuing the work on this PR (maybe improving the documentation or the example).

    Reviewed by ptbrowne at 2022-05-02 08:55
React wrapper for goong-geocoder for use with goong-map-react
React wrapper for goong-geocoder for use with goong-map-react

@goongmaps/goong-geocoder-reat React wrapper for @goongmaps/goong-geocoder for use with @goongmaps/goong-map-react Demo https://codesandbox.io/s/goong

Jul 20, 2020
A React autosuggest for the Google Maps Places API.

React Geosuggest A React autosuggest for the Google Maps Places API. You can also define your own suggests as defaults. Works with Preact, too. Demo L

Jun 14, 2022
React components for using kakao map api
React components for using kakao map api

react-kakao-maps-sdk Kakao Maps API를 react에 맞게 포팅한 라이브러리 입니다. Usage 이 라이브러리를 사용하기 위해서는 필수적으로 Kakao 지도 API를 불러와야 합니다. Kakao 지도 Javscript API <script

Jun 20, 2022
React component Maps API 2GIS

React component Maps API 2GIS

Mar 9, 2022
Yandex Maps API bindings for React

Yandex.Maps JS API bindings for React

Jun 23, 2022
Yandex.Maps JS API bindings for React

Yandex.Maps JS API bindings for React

Jun 18, 2022
Rocketsearch.io - A beautiful and clean search engine built using the Google API frame work
Rocketsearch.io - A beautiful and clean search engine built using the Google API frame work

Rocketsearch.io A beautifull and clean psuedo search engine built using the Goog

Mar 28, 2022
react-maps - A map component for React

Maps for React A map component for React, the declarative UI library. Allow your React sites to use Google Maps easily. Example In the render-function

Feb 17, 2022
A declarative React interface to Google Maps

React Google Maps A declarative React interface to Google Maps. Check it out: Example usage API docs What's new Important Notes This is an alpha relea

Apr 17, 2022
React.js Google Maps integration component

react-google-maps React.js Google Maps integration component Introduction Installation Usage & Configuration Changelog The changelog is automatically

Jun 22, 2022
A Google Maps component for React.js

React Gmaps A Google Maps component for React.js Features Lazy Google Maps loading Easy to use Installation $ npm install react-gmaps --save Demo http

Apr 22, 2022
Google map library for react that allows rendering components as markers :tada:

Google Map React · google-map-react is a component written over a small set of the Google Maps API. It allows you to render any React component on the

Jun 23, 2022
A React binding of mapbox-gl-js
A React binding of mapbox-gl-js

React-mapbox-gl | Documentation | Demos React wrapper for mapbox-gl-js. Components Proxy components (proxy between React and Mapbox API) ReactMapboxGL

Jun 21, 2022
Companion code to the "How to Write a Google Maps React Component" Tutorial
Companion code to the

Google Map React Component Tutorial A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a tes

Jun 22, 2022
A set of geo related modules to use in combination with React, Ant Design and OpenLayers.

react-geo A set of geo related components to use in combination with react, antd and ol. Examples and API documentation Visit https://terrestris.githu

Jun 24, 2022
React components for Leaflet maps

React Leaflet React components for Leaflet maps. Documentation Getting started API reference Changes See the CHANGELOG file. Contributing See the CONT

Jun 25, 2022
A set of React.js components to display an interactive SVG map

react-svg-map A set of React.js components to display an interactive SVG map. Demo Take a look at the live demo! Installation npm npm install --save r

Jun 14, 2022
Open-source, high-resolution Mars explorer built using ArcGIS and React.

Open-source, high-resolution Mars explorer built using ArcGIS and React.

Dec 3, 2021
rlayers is an opinionated set of React components for OpenLayers.
rlayers is an opinionated set of React components for OpenLayers.

rlayers is an opinionated set of React components for OpenLayers.

Jun 5, 2022