export class OrderMap extends Component {
    componentDidMount() {

        const {markers} = this.props;
        const markerCount = markers.length;
        const centralMarker = Math.round(markerCount / 2);

        let map = this.map = L.map(ReactDOM.findDOMNode(this), {
            minZoom: 2,
            maxZoom: 20,
            layers: [
                L.tileLayer(
                    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    {
                        attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
                    })
            ],
            attributionControl: false,
        }).setView([markers[centralMarker].lat, markers[centralMarker].lng], 4);

        for (var i in markers) {
            const alphabet = ['A', 'B', 'C', 'D', 'E', 'F'];

            let markerIcon = L.icon.glyph({prefix: '', cssClass: 'sans-serif', glyph: alphabet[i]});
            // getColor(i, markerCount)

            var marker = L.marker([markers[i].lat, markers[i].lng], {icon: markerIcon}).addTo(map);
        }

        map.on('click', this.onMapClick);
        //map.fitWorld();
    }

    componentWillUnmount() {
        this.map.off('click', this.onMapClick);
        this.map = null;
    }

    onMapClick() {
        // Do some wonderful map things...
    }

    render() {
        return (
            <div className='ordermap'></div>
        );
    }
}