@parsimap/react-mapbox-gl
v1.4.7
Published
A Library to render mapboxgl mapview with power of parsimap services.
Downloads
102
Maintainers
Readme
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