New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

react-maplibre-gl

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-maplibre-gl

A React binding of mablibre-gl-js

1.0.8
latest
Source
npm

Version published: last year

Weekly downloads: 158; decreased by-17.71%

Maintainers: 1

Weekly downloads

Created: 2 years ago

Source

React-mapbox-gl | Documentation | Demos

React wrapper for mapbox-gl-js.

London cycle example gif

Components

Proxy components (proxy between React and Mapbox API)

ReactMapboxGL
Layer & Feature
- property symbol displays a mapbox symbol.
- property line displays a lineString.
- property fill displays a polygon.
- property circle displays a mapbox circle.
- property raster displays a mapbox raster tiles.
- property fill-extrusion displays a layer with extruded buildings.
- property background displays a mapbox background layer.
- property heatmap displays a mapbox heatmap layer.
Source
GeoJSONLayer

DOM components (normal React components)

ZoomControl
ScaleControl
RotationControl
Marker (Projected component)
Popup (Projected component)
Cluster

Getting Started

npm install react-mapbox-gl mapbox-gl --save

Example:

Adding the css in your index.html:

<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>;

Why are `zoom`, `bearing` and `pitch` Arrays ?

If those properties changed at the mapbox-gl-js level and you don't update the value kept in your state, it will be unsynced with the current viewport. At some point you might want to update the viewport value (zoom, pitch or bearing) with the ones in your state but using value equality is not enough. Taking zoom as example, you will still have the unsynced zoom value therefore we can't tell if you want to update the prop or not. In order to explicitly update the current viewport values you can instead break the references of those props and reliably update the current viewport with the one you have in your state to be synced again.

Current version documentation

Version 3.0 documentation

Version 2.0 documentation

Contributions

Please try to reproduce your problem with the boilerplate before posting an issue.

mapbox-gl-draw compatibility

Try react-mapbox-gl-draw

Looking for an Angular alternative?

Try ngx-mapbox-gl

Keywords

FAQs

What is react-maplibre-gl?

Is react-maplibre-gl popular?

Is react-maplibre-gl well maintained?

Package last updated on 18 Oct 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install