Nkm-mapbox-map NPM

nkm Mapbox Map

Map component using mapbox gl js library.

Parameters

option	Required	Type	Default	Description
accessToken	required	string	none	mapbox accessToken (talk to Keino)
styleUrl	required	string	none	mapbox style url (talk to Keino for norkarts own style)
centerCoords	x	obj	`{lat: 65.2, lng: 15.4 }`	center coordinates for the map
zoomLevel	x	number	`3.6`	zoom level for map
shouldFly	x	boolean	true	If map should have a smooth fly to effect when center coords are changed
pitch	x	number	0	Pitch (tilt) for map in degrees
bearing	x	number	0	Bearing (rotation) for map in degrees
fireMapResize	x	boolean	false	Fires a resize of the map that is necessary after changing size of container. Useful for implementing for example full screen.
layers	x	array of objects	none	List of valid mapbox geojson layers. See example below
interactive	x	boolean	true	If map should be interactive or static
controls	x	array of objects with fields `control` and `options`	none	a list of controls that should be added to the map, for example: {'control': this.draw, 'option': 'top-left'}
events	x	array of objects with fields `type` and `callback`	none	a list of events that should be added to the map, for example: {'type': 'draw.create', 'callback': this._handleDrawUpdate};
onMapLoaded	x	function	none	callback that is called once map is completed loading
onMoveend	x	function	none	callback for when moveend event is fired, that returns a mapview object containing the new: center, zoom, pitch, bearing and bbox
onLayerDragged	x	function	none	callback for when map is unmounting that sends latlng on draggable layer so that you know the final position of the draggable point.
wmsLayers	x	array	none	wms layers to draw, with extra options as explained in example
fitBounds	x	object	none	option for fitting mapview to a bbox. Exp: fitBounds: {bounds:11.1422228114504, 60.2830018178217, 11.1676969648912, 60.2979382905685, padding: 20 }. Padding is optional, and default 0. NB! This will ignore other props concering mapview (i.e. centerCoords).

Valid mapbox geojson layer

'id': 'maine',
'type': 'fill',
'source': {
    'type': 'geojson',
    'data': {
        'type': 'Feature',
        'geometry': {
            'type': 'Polygon',
            'coordinates':
                [[[-67.13734351262877, 45.137451890638886],
                [-66.96466, 44.8097],
                [-68.03252, 44.3252]]]
        }
    }
},
'layout': {},
'paint': {
    'fill-color': '#088',
    'fill-opacity': 0.8
}

Draggable layer

If you want one of your layers to be draggable add draggable: true to properties in the geojson layer. NB! Only works on point layers

'id': 'maine',
'type': 'fill',
'source': {
    'type': 'geojson',
    'data': {
       ...
    }
},
'layout': {},
'properties' {
    draggable: true
}

If you want another layer to follow the draggable layer (i.e a polygon following a draggable point) add followDraggable: true to properties in the geojson layer

'id': 'maine',
'type': 'fill',
'source': {
    'type': 'geojson',
    'data': {
        ...
    }
},
'layout': {},
'properties' {
   followDraggable: true
}

wmsLayer

These are example options, but you can read more on mapbox docs.

option	Required	Type	Default	Description
id	x	string	none	unique identifier
url	x	string	none	url for wms. Exp: https://openwms.statkart.no/skwms1/wms.vegnett?LAYERS=all&TRANSPARENT=TRUE&FORMAT=image%2Fpng&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:3857&BBOX={bbox-epsg-3857}&WIDTH=256&HEIGHT=256
minZoom	x	number	none	minimale zoom for displaying the layer
maxZoom	x	number	none	maximum zoom for displaying the layer (NB! Hidden on giben maxZoom)

minZoom: PropTypes.number,
maxZoom: PropTypes.number,
url: PropTypes.string

Developing:

- run ```npm start```
- edit code in ```src/```

Deploying:

Update version number in package.json
npm publish

Testing

npm test

@mapbox/sphericalmercator mapbox-gl react

@infinitebrahmanuniverse/nolb-nk @everything-registry/sub-chunk-2294 @zalastax/nolb-nk

0.1.6

6 years ago

0.1.5

6 years ago