@project-one/map-library

@project-one/map-library

Вспомогательная библиотека Digimap для инициализации и работы со слоями карты Mapbox

О работе с Mapbox можно почитать на Вики

Installation

npm install @project-one/map-library --save

Usage

• Init the map

import MapController from '@project-one/map-library';

// ACCESS_TOKEN: https://docs.mapbox.com/help/how-mapbox-works/access-tokens/
const mapController = new MapController({ token: ACCESS_TOKEN, id: 'map', lang: 'ru' });
const map = mapController.render().getJSMap();

• Add MapboxDraw to map

import MapboxDraw from '@mapbox/mapbox-gl-draw';
import { MAPBOX_DRAW_STYLES } from '@project-one/map-library';

const drawControl = new MapboxDraw({
    displayControlsDefault: false,
    styles: MAPBOX_DRAW_STYLES,
});
map.addControl(drawControl);

MapController methods

• render - Render the map canvas. Optionnally get mapboxgl.LngLatBoundsLike param as initial map view bounds
• getJSMap - Get mapboxgl map instance

Symbol layers

Start layer id with "digimap_" for symbol layer to prevent hiding the text.

Bad:

map.addLayer({
    id: 'drones',
    type: 'symbol',
    ...
}

Good:

map.addLayer({
    id: 'digimap_drones',
    type: 'symbol',
    ...
}

map.addLayer({
    id: 'flight',
    type: 'line',
    ...
}

Helpers

Layer

• hideLayer - Hide the layer by layerId
• paintZonesLayer - Show the layer. add layer to map unless map includes layer
• addLayer - Add layer to map
• removeLayerIfExist - Remove layer from map if map includes this
• showMyPosition - Add map marker at my current position
• jumpToBounds - Focus map to bounds
• getLayerOptById - Get layer options by layerId (exclude source data).
• addSource - Add source as @turf/turf.FeatureCollection on map
• drawZoneLayers - Toggle layer visibility by drawCondition. Adding layer and this source unless map include this
• updateLayerHeight - Update layer source features height

MapboxDraw Layer

• addCircleLayer - Add circle layer to map
• addPolygonLayer - Add polygon layer to map
• addCorridorLayer - Add corridor (linestring) layer to map

Map helpers

• getCurrentMPP - Function that return meters per pixel at current map zoom level
• waitMapIsLoaded - Function that return promise. Resolved when map is loaded all styles

Feature helpers

• convertInputFeatureToPolygon - Convert MapboxDraw figure into geojson.Feature (turf Polygon)

Constants

• maxZoom - Map max zoom value
• minZoom - Map min zoom value
• zoneLayerIds - Available zone layers IDs
• layersOrder - Order of map layers