react-mapboxgl
A Library to render mapboxgl mapview with power of parsimap services.
Install
yarn add @parsimap/react-mapbox-gl
Import Mapbox css file
import "mapbox-gl/dist/mapbox-gl.css";
Getting started with React Mapbox GL
- Changelog
- Components
- Type Definition
- Usage
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
andviewPort
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 asmapboxgl.LngLatLike
. - The
bounds
argument of the Map component is accepted notmapboxgl.LngLatBounds
ormapboxgl.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
andmaxBounds
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 thanocean 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
orfilter
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 useOnMoveEnd
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
andstyle.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
inMap
component props, officially can change the style of the map. - The
style
inMap
component props, can change the containerCSS
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
Map
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. |
Marker
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. |
GeoJSONSource
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. |
Layer
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 |
LineLayer
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 |
FillLayer
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 |
CircleLayer
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 |
SymbolLayer
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 |
HeatmapLayer
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
Style
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 |
LngLat
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. |
ViewPort
title | type | description |
---|---|---|
zoom |
number |
The zoom level. |
lngLat |
LngLat | Can determines the paint config of a layer |
Line Layer Layout
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 . |
Line Layer Paint
title | type | description |
---|---|---|
zoom |
number |
The zoom level. |
lngLat |
LngLat | Can determines the paint config of a layer |
LineLayout
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.
Render Map with features
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
.
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 (
<Map
onClick={handleClick}
token={"{PMI_TOKEN}"}
style={"parsimap-streets-v11"}
onViewPortChange={handleViewPortChange}
{...DEFAULT_VIEW_PORT}
>
<GeoJSONSource id={"streets"} data={sourceData}/>
<LineLayer type={"line"} source={"streets"}/>
<CircleLayer id={"point"} source={"streets"}/>
<Marker lngLat={[51.41, 35.7575]}/>
</Map>
);
};
export default Sample;
Using a created map instance
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.
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 (
<Map onLoad={handleLoad} token={"{PMI_TOKEN}"} {...DEFAULT_VIEW_PORT} />
);
};
export default Sample;
License
MIT © Parsimap