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
- 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

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;

@parsimap/react-mapbox-gl

react-mapboxgl

Install

Import Mapbox css file

Getting started with React Mapbox GL

Changelog

Components

Map

Map Arguments

Map Optional Arguments

Marker

Marker Arguments

Marker Optional Arguments

GeoJSONSource

GeoJSONSource Arguments

Layer

Layer Arguments

Layer Optional Arguments

LineLayer

LineLayer Arguments

LineLayer Optional Arguments

FillLayer

FillLayer Arguments

FillLayer Optional Arguments

CircleLayer

CircleLayer Arguments

CircleLayer Optional Arguments

SymbolLayer

SymbolLayer Arguments

SymbolLayer Optional Arguments

HeatmapLayer

HeatmapLayer Arguments

HeatmapLayer Optional Arguments

Type Definitions

Style

LngLat

ViewPort

Line Layer Layout

Line Layer Paint

LineLayout

Usage

Render Map with features

Using a created map instance

License

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads