import React from 'react';
import PropTypes from 'prop-types';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
/*JS module import (vs cdn or style link)*/
import 'leaflet/dist/leaflet.css'
/*set up the height of .leaflet-container
*/import '../../style.css';
/**/
import   { getRequiredSVGPinByCategory } from './pin-by-category';
/**/
import BoatMarker from './marker-boat';
/**/
import MarkerBFly from './marker-butterfly';
/**/
import MarkerBFlyBlack from './marker-butterfly-black';
/**/
import VehicleMarker from '../vehicleMarker';
const Map = ({ vehPos }) => {
    const position = [53.2206976, 7.7585528]
    const positionP = [51.504, -0.09]
    return (
	<>
	    <h2>
		vehPos.length: {vehPos.length}
	    </h2>
	    <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
		<TileLayer
		    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
		    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
		/>
		<Marker
		    position={positionP}
		    icon={getRequiredSVGPinByCategory('motorcycle',{fill:'orange'})}>
		    <Popup>
			Popup
		    </Popup>
		</Marker>
		<BoatMarker/>
		<MarkerBFly/>
		<MarkerBFlyBlack/>
		{vehPos.map(function(value,key) {
		    console.log(`key: ${key}, value: ${value}`);
                    return <VehicleMarker key={key} index={key} location={value}/>;
                })
            }
	    </MapContainer>
	</>
    );
}
export default Map

Map.propTypes = {
    vehPos: PropTypes.array
};