55 lines
1.5 KiB
JavaScript
55 lines
1.5 KiB
JavaScript
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='© <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
|
|
};
|