Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-mapbox-gl

Package Overview
Dependencies
Maintainers
1
Versions
142
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-mapbox-gl

A React binding of mapbox-gl-js

  • 0.1.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
51K
increased by6.69%
Maintainers
1
Weekly downloads
 
Created
Source

react-mapbox-gl

London cycle example gif

Based on mapbox-gl-js this library aim to bring the api to a React friendly way with some additional extra behavior. The library include the following elements :

  • ReactMapboxGl
  • Layer
  • Feature
    • Layer type properties symbol display a mapbox point
    • Layer type properties line display a lineString
    • Layer type properties fill display a polygon
  • ZoomControl

It will include as well:

  • Popup

How to start

npm install react-mapbox-gl --save

Import the component :

// ES6 way
import ReactMapboxGl, { Layer, Feature } from "react-mapbox-gl";

// ES5
var ReactMapboxGl = require("react-mapbox-gl");
var Layer = ReactMapboxGl.Layer;
var Feature = ReactMapboxGl.Feature;

Examples

Run the examples

  • Clone the repository
  • Install the dependencies: npm install
  • Run the example : npm run example
    • Default port: 8080

Change the example by replacing the example component in example/main.js file.

Notes

Mapbox throw a warning because react-mapbox-gl is using a compiled version of mapbox-gl which is necessary when using webpack for now as long as the sources files requires the node package fs to read the shaders.

API

ReactMapboxGl: React.Component

Display a mapbox webgl map

Render the children elements only when the style of the map is loaded

To use original mapbox API use onStyleLoad property, the callback will receive the map object as a first arguments, then you can add your own logic using mapbox gl API.

Properties
  • style : String || Object (required) Mapbox map style
  • accessToken : String (required) Mapbox access token.
  • center : Array<Number> Center the map at the position at initialisation
    • Re-center the map if the value change regarding the prev value or the actual center position flyTo
  • zoom : Number Zoom level of the map at initialisation
    • Check the previous value and the new one, if the value changed update the zoom value flyTo
  • scrollZoom: See mapbox scrollZoom
  • containerStyle : Object The style of the container of the map
  • hash : Boolean, Default : false See mapbox doc
  • preserveDrawingBuffer: Boolean, Default : false See mapbox doc
  • onClick: Function : Triggered whenever user click on the map
  • onStyleLoad: Function : Listener of mapbox event : map.on("style.load")
    • Function : (map: Object, event: Object)
  • onMouseMove: Function : Listen the mouse moving on the map
  • onMove: Function : Executed whenever the center of the map change
    • Function : (center: Object, event: Object)
  • onMoveEnd: Function : Executed when the move of the map end
    • Function : (center: Object, event: Object)
  • onMouseUp : Simple binding of mapbox mouseup event
  • onDrag : Simple binding of mapbox ondrag event

Layer: React.Component

Create a new mapbox layer and create all the sources depending on the children components. All the childrens of a Layer object have to be a Feature component.

Properties
  • id : String The id of the layer or generate an incremented number as id
  • type : String The type of the features childs element
    • symbol for mapbox Point
    • line for mapbox LineString
    • fill for mapbox Polygon
  • layout: Mapbox layout object passed down to mapbox addLayer method mapbox layout api
  • paint: Mapbox paint object passed down to mapbox addLayer method mapbox paint api
  • sourceOptions: Options object merged to the object used when calling GeoJSONSource method

Feature: React.Component

Display a feature on the map, can only be used when wrapped in a Layer component. The type of the feature is defined at the Layer level. If you want to create a new type, create an associated new layer.

Properties
  • coordinates : Array<Number> (required) Display the feature at the given position
  • onClick : Function Triggered when user click on the feature

ZoomControl: React.Component

A custom react zoom control component (This component is new and not tested yet, we advise to create your own component)

Properties
  • onControlClick : Function triggered when user click on minus or plus button
  • zoomDiff : Number The shift number passed to the callback onControlClick

Keywords

FAQs

Package last updated on 01 May 2016

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc