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:

1. Update version number in package.json
2. npm publish

Testing

npm test