FormMap.tsx

import * as React from 'react';
import {withStyles} from 'material-ui/styles';

import {error} from 'utilities/debug';
import {isNumeric} from 'utilities';

let Map;
let Marker;
let TileLayer;

interface IFormMapProps extends React.ClassAttributes<any> {
    classes: any;
    locations: [{
        decimalLatitude: any,
        decimalLongitude: any,
        mapCountry: any,
        userCountry: any,
        stateProvince: any,
        verbatimLocality: any,
    }];
    onMouseOut: () => any;
    checkGeonames: (lat, lng) => Promise<{userCountry: string, stateProvince: string, verbatimLocality?: string}>;
}

const styleSheet = {
    leafletContainer: {
        width: '100%',
        height: '300px',
    },
};

class FormMap extends React.Component<IFormMapProps, any> {

    public constructor(props: any) {
        super(props);

        this.state = {
            lat: 0,
            lng: 0,
        };
    }

    public componentDidMount() {
        // leaflet map doesn't work on server (ssr)
        Map = require('react-leaflet').Map;
        Marker = require('react-leaflet').Marker;
        TileLayer = require('react-leaflet').TileLayer;

        const {decimalLatitude, decimalLongitude} = this.props.locations.find((e) => !!e);

        if (decimalLatitude.input.value && decimalLongitude.input.value) {
            this.setState({lat: decimalLatitude.input.value, lng: decimalLongitude.input.value});
        } else {
            navigator.geolocation.getCurrentPosition((obj) => {
                this.setState({lat: obj.coords.latitude, lng: obj.coords.longitude});
            });
        }
    }

    protected getCurrentLocation = () => {
        return this.props.locations.find((e) => !!e);
    }

    protected onMapClick = (e) => {
        const {checkGeonames} = this.props;
        const {decimalLatitude, decimalLongitude, userCountry, stateProvince, verbatimLocality} = this.getCurrentLocation();

        const {lat, lng} = e.latlng;

        decimalLatitude.input.onChange(lat);
        decimalLongitude.input.onChange(lng);

        checkGeonames(lat, lng)
            .then((value) => {
                userCountry.input.onChange(value.userCountry);
                stateProvince.input.onChange(value.stateProvince);

                if (!verbatimLocality.input.value) {
                    verbatimLocality.input.onChange(value.verbatimLocality);
                }
            })
            .catch((e) => {
                error(e);
            });
    }

    protected onMarkerRightClick = () => {
        const {decimalLatitude, decimalLongitude} = this.getCurrentLocation();

        decimalLatitude.input.onChange(null);
        decimalLongitude.input.onChange(null);
    }

    public render() {
        if (!Map) {
            return null;
        }

        const {classes} = this.props;

        const {decimalLatitude, decimalLongitude} = this.getCurrentLocation();

        let position = null;
        if (isNumeric(decimalLatitude.input.value) && isNumeric(decimalLongitude.input.value)) {
            position = {
                lat: parseFloat(decimalLatitude.input.value),
                lng: parseFloat(decimalLongitude.input.value),
            };
        }

        return (
            <div className={ classes.leafletContainer }>
                <Map
                    center={ position || this.state }
                    onClick={ this.onMapClick }
                    onMouseout={ this.props.onMouseOut }
                    zoom={ 6 }
                >
                    <TileLayer
                        attribution={ '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }
                        url={ 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' }
                    />
                    { position && <Marker onContextmenu={ this.onMarkerRightClick } position={ position }/> }
                </Map>
            </div>
        );
    }
}

export default withStyles(styleSheet)(FormMap);