Mapper

A Plot + Scatter React module for Leaflet maps.

Still in progress.

Version 0.1.0 has been tested with Leaflet 1.1.0.

Customization

The Map component takes in options, leafletOptions, and layers, allowing for customization.

options include:

• MAP_MIN_ZOOM: Specify minimum zoom level
• MAP_MAX_ZOOM: Specify maximum zoom level
• MAP_INITIAL_CENTER: Specify initial center point
• MAP_INITIAL_ZOOM: Specify initial zoom level
• MAP_BASE_LAYER_URL: Specify base layer url with your access token (this can be aquired through MapBox)
• MAP_BASE_LAYER_ATTRIBUTION: Specify layer attribution

leafletOptions allow you to specify any option available on the leaflet documentation.

layers allows you to specify any layer type that the Leaflet Layer Factory takes in.

• A Marker Layer is a layer that contains point-based data in latitude and longitude.
• A Boundary Layer is a layer that is related to the geographical polygons on the map (e.g. Census boundaries) or is a shapefile that contains polygons to be drawn on the map.

Example usage

To create a basic map:

function App(props) {

    const markerData = {
        metadata: {
            geographyType: 'latlon',
            icon: 'hospital-o',
            iconColor: 'red'
        },
        data: [
            { 'geography': [49.036672, -122.311695], 'value': 'A label' },
        ]
    };

    const boundaryData = {
        metadata: {
            geographyType: 'feature',
        },
        data: [
            { 'geography': { 'type': 'Feature', 'properties': { 'NAME': 'Burrard Brdg', 'TYPE': 'Separated Lanes' }, 'geometry': { 'type': 'LineString', 'coordinates': [[-123.132369126588415, 49.276970676801731], [-123.133132629957501, 49.276710161446417], [-123.13418609375482, 49.276358561696362], [-123.136775057525412, 49.275512668661612], [-123.145419516305878, 49.272754191354991]] } } },
        ]
    };

    const builtLayers = {
        layerA: new Mapper.LeafletLayerFactory.build(markerData),
        layerB: new Mapper.LeafletLayerFactory.build(boundaryData)
    };

    const customOptions = {
        MAP_INITIAL_CENTER: [49.2127, -122.5207],
        MAP_INITIAL_ZOOM: 10
    };

    const addLeafletOptions = {
        zoomControl: false
    };

    return (
        <div>
            <h1>Mapper</h1>
            <Mapper.Map
                layers={builtLayers}
                options={customOptions}
                leafletOptions={addLeafletOptions}
            />
        </div>
    );
}

Questions?

Create an issue on this repo: https://github.com/plot-and-scatter/mapper/issues.