react-places-map v3.2.1

React Places Map

Installation

Using npm

npm i react-places-map

Usage

import * as React from "react";
import * as Places from "react-places-map";

export class PlacesLayout extends React.Component {
    public render() {
        return (
            <Places.Controller
                apiKey="your api key"
                imagePath="/path/to/load/images"
                places={[
                    {
                        type: "placeType1",
                        getCoordinates: this.getCoordinates("placeType1"),
                    },
                    {
                        type: "placeType2",
                        getCoordinates: this.getCoordinates("placeType2"),
                    },
                ]}
            >
                <Places.SearchBox inputProps={{ placeholder: "Fill address" }} />
                <Places.Header type="placeType1">
                    Place type 1
                </Places.Header>
                <Places.Header type="placeType2">
                    Place type 2
                </Places.Header>
                <Places.Map />
            </Places.Controller>
        )
    }

    protected getCoordinates = (type: string) => () => {
        // You should return array of places (see Place interface)
        // You can load it asynchronously and return promise
        return {
            placeType1: [
                [50, 30],
                [50, 29],
                [51, 30],
            ],
            placeType2: [
                [61, 20],
                [51, 33],
                [53, 20]
            ],
        }[type];
    }
}

Places controller props

Search box props

Header props

Contributors

• Alexander Letnikow

License

MIT