react-mapboxgl

> A Library to render mapboxgl mapview with power of parsimap services.

 

Install

``bash
yarn add @parsimap/react-mapbox-gl
`

Import Mapbox css file

`js
import "mapbox-gl/dist/mapbox-gl.css";
`

Getting started with React Mapbox GL

- Changelog
- Components
- Map
- Map Arguments
- Map Optional Arguments
- Marker
- Marker Arguments
- Marker Optional Arguments
- Layer
- Layer Arguments
- Layer Optional Arguments
- SymbolLayer
- SymbolLayer Arguments
- SymbolLayer Optional Arguments
- HeatmapLayer
- SymbolLayer Arguments
- SymbolLayer Optional Arguments
- LineLayer
- LineLayer Arguments
- LineLayer Optional Arguments
- FillLayer
- FillLayer Arguments
- FillLayer Optional Arguments
- CircleLayer
- CircleLayer Arguments
- CircleLayer Optional Arguments
- Type Definition
- Style
- LngLat
- ViewPort
- Usage
- Render Map with features
- Using a created map instance

Changelog

version 1.4.7

- The freezing problem while updating bounds was fixed.

version 1.4.6

- The problem with global css while implementing in Next.Js with _page routing strategy_ was resolved.
- Documentations were updated and some part was changed due to the adding css file manually instead import immediately.

version 1.4.3

- The onSourceData event was added.

version 1.4.2

- The working on stability and update layer property have been finished.
- Some problem was resolved in case of keeping performance in a good state.
- The First preview of the image currently has been started.

version 1.4.0

- The problem with change bounds and viewPort was resolved.
- Emitting onViewPortChange with state doesn't cause any problem.
- Marker is now stable and the problem with update color and lngLat doesn't cause any flickering on the
HTMLDivElement.

version 1.3.5

- The problem with layer change by source is currently resolved.

version 1.3.2

- SymbolLayer and HeatmapLayer were added.
- The cluster were added to GeoJSONSource as an optional argument.
- The color which added to Marker as an argument is seperated to optional arguments.
- The [number, number] type of lngLat for Marker was added, and there is no need to enforce a type
as mapboxgl.LngLatLike.
- The bounds argument of the Map component is accepted not mapboxgl.LngLatBounds
or mapboxgl.LngLatBoundsLike as input which means the input can also [number, number, number, number] and there is
no need to define
a type of input as a standard type.
- bounds and maxBounds were added to the Map Optional Arguments section.
- Some problems were found while update source which is started working on it and fixed in upcoming versions.

version 1.2.9

- The problem with adding multiple Markers was resolved.
- The color property was added to Marker which able marker to have a specific color rather
than ocean blue
color.

version 1.2.8

- LineLayer, FillLayer, and CircleLayer are provided a new way of define
layer for each type.
- Some problem was fixed.

version 1.2.6

- Layer can be changed by passed props such as layout, paint or filter in anytime.
- Source and Layer is recreated after Style is reloaded
- Style is added to the type definitions section of the documentation.

version 1.2.4

- An incorrect onClick for the Layer component type definition was fixed.
- The problem with defined layer twice in some scenario was resolved.

version 1.2.2

* OnViewPortChange was added to Map officially, and you can get the latest center and zoom without a need to
use OnMoveEnd to retrieve data.
* Some improvements in performance were applied.
* Type Definition and added to documentation.

version 1.2.1-beta.2

* The events to determine to load the map and its style were implemented and worked in tree branches of components which
control by convenient state management.
* The main code was reviewed.

version 1.2.1

- A Problem with update new viewPort was resolved.

version 1.1.8

- The problem with the definition of Layer or Marker and GeoJSONSource were resolved.
- load and style.load events are worked.
- The problem with onViewPortChange was resolved.
- The map component is now stable and can be used.
- The documentation was updated and provided a list for navigation easy to sections.

version 1.1.7-beta.1

- Some minor error was resolved.

version 1.1.7

- Some minor error was resolved.

version 1.1.6

- The mapStyle in Map component props, officially can change the style of the map.
- The style in Map component props, can change the container CSS style.

version 1.1.5

- This version can support all options are used in mapbox-gl module.
- The problem while the map was destroyed was resolved.
- Some improvement are applied.
- The documentation is updated in a new release version.
- The Sample.aspx in the demo is updated.

version 1.1.4-beta.5

- The duplication problem of maps is resolved and destroy was applied.
- Some reason found for unpredictable behavior for a map view.

version 1.1.4-beta.4

- Second phase review and investigation to find the problem.

version 1.1.4-beta.3

- First phase of review and investigation to find the problem.

version 1.1.4-beta.2

- This version including the better event handling and fully support load event.

version 1.1.4-beta.1

- This version just released and events correctly work.

version 1.1.4

- The problem with not-working _map-events_ was resolved.

version 1.1.3

- The marker was added.
- The layer and source can be added.
- Some problems were resolved.

Components

$3

The Map is a main component to parenting another components itself, also it
controls or lets a developer know get and set current ViewPort of the map.
Furthermore, this component has a verity of events such as load, style.load
and other mapbox-gl-js
events.
It must be mentioned that, to use map tile server, there is a need to replace
the
PMI_TOKEN to a
valid access-token.

#### Map Arguments

| title | type | default | description |
|---------|----------|-------------|---------------------------------------------------------------------------------|
| lng | number | undefined | Define the longitude of center of map. |
| lat | number | undefined | Define the latitude of center of map. |
| token | string | undefined | Define an valid access token. |

#### Map Optional Arguments

| title | type | default | description |
|--------------------|------------------------------------------------------------------------------------------------------------------------|------------------------|----------------------------------------------------------------------------------------------------------------------------------------|
| mapStyle | Style | parsimap-streets-v11 | The style of the map. |
| onLoad | (map: event: mapboxgl.MapboxEvent) => void | undefined | Detect the map element is defined and fully loaded. |
| onStyleLoad | (map: event: mapboxgl.MapboxEvent) => void | undefined | Trigger when style only loaded. |
| onViewPortChange | (viewPort: ViewPort) => void | undefined | Trigger when style only loaded. |
| zoom | number | undefined | Change zoom level of the map. |
| bounds | [number, number, number, number]\| LngLatBounds | undefined | Determine the current bounds of the map. |
| maxBounds | [number, number, number, number]\| LngLatBounds | undefined | Determine the maximum bounds of the map which is can provided moving the map by a boundary for example a country or specific province. |

$3

The marker can add a _map-marker_ into the map-view.

#### Marker Arguments

| title | type | default | description |
|----------|------------------------------------------------------------------------------------------|-------------|---------------------------------------------------------------------------------------------|
| lngLat | [number, number] \| LngLat | undefined | The longitude and latitude of a point such as, [number, number] or {lng:number, lat:number} |

#### Marker Optional Arguments

| title | type | default | description |
|---------|----------|--------------|----------------------------------------------|
| color | string | ocean blue | A color which determines the fill of marker. |

$3

This component provided an interface for adding geoJSON format file to the map.

#### GeoJSONSource Arguments

| title | type | default | description |
|-----------|--------------------------------------------------|-------------|------------------------------------------------------------------|
| id | string | undefined | An unique id determine for identify the source by that. |
| data | GeoJSON | undefined | A GeoJSON format data |
| cluster | boolean | undefined | This property could convert the source to a cluster-able source. |

$3

This component allows adding a feature on the map to describe the feature type
and which type of data that was added by resource could be used, for instance to
illustrate a point feature the symbol or circle could be suitable.
To see more about layers, you can read mapbox-gl-js layers.

#### Layer Arguments

| title | type | default | description |
|----------|---------------------------------------------------------------------------|-------------|----------------------------------------------------------------|
| id | string | undefined | An unique id to determine for identify the layer |
| type | LayerType | undefined | The type for a layer which is specifying the shape of feature. |
| source | string | undefined | The source should be existed |

#### Layer Optional Arguments

| title | type | default | description |
|----------|----------|-------------|---------------------------------------------|
| layout | object | undefined | Can determines the layout config of a layer |
| paint | object | undefined | Can determines the paint config of a layer |
| filter | object | undefined | Can determines the filter for a layer |

$3

This component allows
adding a line layer to the map
which data should be type of LineString in GeoJSONSource.

#### LineLayer Arguments

| title | type | default | description |
|----------|----------|-------------|--------------------------------------------------|
| id | string | undefined | An unique id to determine for identify the layer |
| source | string | undefined | The source should be existed |

#### LineLayer Optional Arguments

| title | type | default | description |
|----------|-------------------------------|-------------|---------------------------------------------|
| layout | LineLayerLayout | undefined | Can determines the layout config of a layer |
| paint | object | undefined | Can determines the paint config of a layer |
| filter | object | undefined | Can determines the filter for a layer |

$3

This component allows
adding a fill layer to the map
which data should be type of Polygon in GeoJSONSource.

#### FillLayer Arguments

| title | type | default | description |
|----------|----------|-------------|--------------------------------------------------|
| id | string | undefined | An unique id to determine for identify the layer |
| source | string | undefined | The source should be existed |

#### FillLayer Optional Arguments

| title | type | default | description |
|----------|----------|-------------|---------------------------------------------|
| layout | object | undefined | Can determines the layout config of a layer |
| paint | object | undefined | Can determines the paint config of a layer |
| filter | object | undefined | Can determines the filter for a layer |

$3

This component allows
adding a circle layer to the map
which data should be type of Point in GeoJSONSource.

#### CircleLayer Arguments

| title | type | default | description |
|----------|----------|-------------|--------------------------------------------------|
| id | string | undefined | An unique id to determine for identify the layer |
| source | string | undefined | The source should be existed |

#### CircleLayer Optional Arguments

| title | type | default | description |
|----------|----------|-------------|---------------------------------------------|
| layout | object | undefined | Can determines the layout config of a layer |
| paint | object | undefined | Can determines the paint config of a layer |
| filter | object | undefined | Can determines the filter for a layer |

$3

This component allows
adding a circle layer to the map
which data should be type of Point in GeoJSONSource.

#### SymbolLayer Arguments

| title | type | default | description |
|----------|----------|-------------|--------------------------------------------------|
| id | string | undefined | An unique id to determine for identify the layer |
| source | string | undefined | The source should be existed |

#### SymbolLayer Optional Arguments

| title | type | default | description |
|----------|----------|-------------|---------------------------------------------|
| layout | object | undefined | Can determines the layout config of a layer |
| paint | object | undefined | Can determines the paint config of a layer |
| filter | object | undefined | Can determines the filter for a layer |

$3

This component allows
adding a circle layer to the map
which data should be type of Point in GeoJSONSource.

#### HeatmapLayer Arguments

| title | type | default | description |
|----------|----------|-------------|--------------------------------------------------|
| id | string | undefined | An unique id to determine for identify the layer |
| source | string | undefined | The source should be existed |

#### HeatmapLayer Optional Arguments

| title | type | default | description |
|----------|----------|-------------|---------------------------------------------|
| layout | object | undefined | Can determines the layout config of a layer |
| paint | object | undefined | Can determines the paint config of a layer |
| filter | object | undefined | Can determines the filter for a layer |

Type Definitions

$3

| Name | Description |
|------------------------|-------------------------------------------|
| parsimap-streets-v11 | A simple open-streets map style friendly. |
| satellite-raster | A Raster tile as a satellite images |
| map-raster | A Raster tile as a map images |

$3

| title | type | description |
|-------|----------|-----------------------------------------------------------|
| lng | number | The longitude, usually is determined by a decimal number. |
| lat | number | The latitude, usually is determined by a decimal number. |

$3

| title | type | description |
|----------|-------------------|--------------------------------------------|
| zoom | number | The zoom level. |
| lngLat | LngLat | Can determines the paint config of a layer |

$3

To get more details, follow the line layer part of the
mapbox documentation.
At here, only some most common attributes are included.

| title | type | default | description |
|----------------|------------------------------------------------------------------------------------------------|-----------|-------------------------------------------------|
| line-color | LineColor | #000000 | Determines the color of the line. |
| line-width | LineWidth | 1 | Defines the width of line. |
| line-opacity | LineOpacity | 1 | Defines the opacity of line between 0 to 1. |

$3

| title | type | description |
|----------|-------------------|--------------------------------------------|
| zoom | number | The zoom level. |
| lngLat | LngLat | Can determines the paint config of a layer |

$3

| title | type | description |
|----------|-------------------|--------------------------------------------|
| zoom | number | The zoom level. |
| lngLat | LngLat | Can determines the paint config of a layer |

Usage

Samples for use the map are placed at here.

$3

There is a line layer which is created by streets source and a circle for each
coordinate of that and a marker which is added to the map in the
defined lngLat.

`tsx
import {CircleLayer, GeoJSONSource, LineLayer, Map, Marker, ViewPort} from "@parsimap/react-mapbox-gl";
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

/**
* A geoJSON source as a sample data which has a LineString feature.
*/
const sourceData: mapboxgl.GeoJSONSourceRaw["data"] = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[51.41, 35.7575],
[51.413, 35.7573],
[51.414, 35.7571],
],
},
properties: {},
},
],
};

/**
* A view port can change current view and zoom of the map.
*/
const DEFAULT_VIEW_PORT: ViewPort = {
zoom: 16,
lng: 51.41,
lat: 35.7575,
};

const Sample = () => {
function handleClick(event: mapboxgl.MapMouseEvent) {
console.log("current lng:", event.lngLat.lng);
console.log("current lat:", event.lngLat.lat);
}

function handleViewPortChange(viewPort: Viewport) {
// Doing something with updated viewPort
}

return (
onClick={handleClick}
token={"{PMI_TOKEN}"}
style={"parsimap-streets-v11"}
onViewPortChange={handleViewPortChange}
{...DEFAULT_VIEW_PORT}
>





);
};

export default Sample;
`

$3

There is a sample to access the map instance which was created,
with using this the ability to interact with a map can be performed.
For more interacted with a map, you can follow the method section
of mapbox-gl-js docs.
In this example, the 'setCenter' method is changing the current center of the map to new value, to access the map
instance there is a need to use load event on the other hand onLoad prop of the Map component.

`tsx
import {Map, ViewPort} from "@parsimap/react-mapbox-gl";
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

/**
* A view port can change current view and zoom of the map.
*/
const DEFAULT_VIEW_PORT: ViewPort = {
zoom: 16,
lng: 51.41,
lat: 35.7575,
};

const Sample = () => {
function handleLoad(event: mapboxgl.MapboxEvent) {
// the map instance can be accessed from here to interact with map.
const map = event.target;
const newCenter = new mapboxgl.LngLat(51, 41);
map.setCenter(newCenter);
}

return (


export default Sample;
``

License

MIT © Parsimap