React Mapbox Helper

Simple wrapper around Mapbox GL for adding additional sources and layers to pre-existing Mapbox style sheet.

Current helpers: ReactMap and getPointSource

Installation

yarn add react-mapbox-helper

Include css style sheet in index.html

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />

Add a custome css for the tooltip and mapbox viewport

.react-mapbox-tooltip {
    position: absolute;
    margin: 8px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    max-width: 300px;
    font-size: 10px;
    z-index: 7;
    pointer-events: none;
}
.react-mapbox {
    width: 100%;
    height: 100%;
}

ReactMap Component

Use the component or you can follow this example

import { ReactMap } from "react-mapbox-helper";

<ReactMap
    accessToken={'you_token'}
    mapStyle={MAP_STYLE}
    sources={POINT_SOURCE}
    sourceIds={SOURCE_IDs}
    layers={MAP_LAYER}
    hoverFeatureKey={"location"}
    onClick={this.onClick}
/>

| Key | Type | Description | | ----------------- | :----------------: | :-----------------------------------: | | accessToken | string | Mapbox token | | mapStyle | object | string | json or style sheet url | | sources | object[] | geojson objects array | | sourceIds | string[] | source IDs array | | layers | object[] | Mapbox style objects array | | hoverFeatureKey | string | string in properties | | onClick | (e:string) => void | event handler for clicking on feature |

Note: onClick sends back a property value using hoverFeatureKey. sources and sourceIds need to have the same length, where first item in both array represent the same geoJson object.

getPointSource helper

This helper normalizes an array of objects into a common geojson object that can be passed down to Mapbox, and persver its properties if needed.

It take two parameters: raw data and options params.

| Key | Type | Description | | --------- | :------: | :----------------------------: | | param_1 | object[] | objects from api or any source | | param_2 | IParam | key mapping |

where IParam is an object with type as following:

interface IParam {
    longitude: string;
    latitude: string;
    propertyKeys: string[];
}

For example, this is the data from api

[  
   {  
      "location":"Davis",
      "lat":38.544907,
      "lng":-121.740517,
      "__typename":"CCSiteType"
   },
   {  
      "location":"Dixon",
      "lat":38.445623,
      "lng":-121.826706,
      "__typename":"CCSiteType"
   }
]

and we want to transform the data to geojson object.

getPointSource(data, {
                        longitude: "lng",
                        latitude: "lat",
                        propertyKeys: ["location"],
                    })

This will produce an geojson object

{  
   "data":{  
      "type":"FeatureCollection",
      "features":[  
         {  
            "type":"Feature",
            "geometry":{  
               "type":"Point",
               "coordinates":[  
                  -121.740517,
                  38.544907
               ]
            },
            "properties":{  
               "location":"Davis"
            }
         },
         {  
            "type":"Feature",
            "geometry":{  
               "type":"Point",
               "coordinates":[  
                  -121.826706,
                  38.445623
               ]
            },
            "properties":{  
               "location":"Dixon"
            }
         }
      ]
   },
   "type":"geojson"
}

Example Props

mapStyle

Use the mapbox style sheet directly with mapbox://styles/mapbox/streets-v9. Or you can custome create your own style sheet and download it into JSON file, and import it.

sources

An array with a list of geoJson objects. For example:

[{  
   "data":{  
      "type":"FeatureCollection",
      "features":[  
         {  
            "type":"Feature",
            "geometry":{  
               "type":"Point",
               "coordinates":[  
                  -121.740517,
                  38.544907
               ]
            },
            "properties":{  
               "location":"Davis"
            }
         },
      ]
   },
   "type":"geojson"
},{  
   "data":{  
      "type":"FeatureCollection",
      "features":[  
         {  
            "type":"Feature",
            "geometry":{  
               "type":"Polygon",
                //
            },
            "properties":{  
               "location":"Yolo County"
            }
         },
      ]
   },
   "type":"geojson"
}]

sourceIds

An array matching with sources. Using previous example, it would need to have 2 elements. This will assign pointData to the first source and polygonData for the second source.

['pointData', 'polygonData']

layers

An array with Mapbox style objects. Mapbox will apply each layer based on source key.

[{
    id: "pointData",
    source: "pointData",
    type: "circle",
    interactive: true,
    minzoom: 5,
    layout: {
        visibility: "visible",
    },
    paint: {
        "circle-radius": {
            base: 3,
            stops: [[5, 3.5], [7, 5.5]],
        },
        "circle-stroke-color": "#fafafa",
        "circle-stroke-width": 1,
        "circle-color": "#03a9f4",
    },
},{
    id: "polygonData",
    source: "polygonData",
    type: "circle",
    interactive: true,
    minzoom: 5,
    layout: {
        visibility: "visible",
    },
    paint: {
        // your style
    },
}]

hoverFeatureKey

A string value that allows Mapbox to know when to show the Tooltip. In here, we can use location

onClick

An onClick event handler for when user click certain feature.