A Library to render mapboxgl mapview with power of parsimap services.
npm install @parsimap/react-mapbox-gl> A Library to render mapboxgl mapview with power of parsimap services.
 
``bash`
yarn add @parsimap/react-mapbox-gl
`js`
import "mapbox-gl/dist/mapbox-gl.css";
- 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
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.onViewPortChange
- Emitting with state doesn't cause any problem.color
- Marker is now stable and the problem with update 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.color
- The which added to Marker as an argument is seperated to optional arguments.[number, number]
- The type of lngLat for Marker was added, and there is no need to enforce a typemapboxgl.LngLatLike
as .bounds
- The argument of the Map component is accepted not mapboxgl.LngLatBoundsmapboxgl.LngLatBoundsLike
or as input which means the input can also [number, number, number, number] and there isbounds
no need to define
a type of input as a standard type.
- 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 ratherocean blue
than
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 toOnMoveEnd
use 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.onViewPortChange
- The problem with 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.style
- The 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.documentation
- The problem while the map was destroyed was resolved.
- Some improvement are applied.
- The is updated in a new release version.Sample.aspx
- The 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.
The Map is a main component to parenting another components itself, also itViewPort
controls or lets a developer know get and set current of the map.load
Furthermore, this component has a verity of events such as , style.loadPMI_TOKEN
and other mapbox-gl-js
events.
It must be mentioned that, to use map tile server, there is a need to replace
the 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. |
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. |
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. |
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 |
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 |
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 |
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 |
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 |
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 |
| 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 |
| 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. |
| title | type | description |
|----------|-------------------|--------------------------------------------|
| zoom | number | The zoom level. |lngLat
| | LngLat | Can determines the paint config of a layer |
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. |
| title | type | description |
|----------|-------------------|--------------------------------------------|
| zoom | number | The zoom level. |lngLat
| | LngLat | Can determines the paint config of a layer |
| title | type | description |
|----------|-------------------|--------------------------------------------|
| zoom | number | The zoom level. |lngLat
| | LngLat | Can determines the paint config of a layer |
Samples for use the map are placed at here.
There is a line layer which is created by streets source and a circle for eachlngLat
coordinate of that and a marker which is added to the map in the
defined .
`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;
`
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;
``
MIT © Parsimap