feat(leaflet): add vehicle positions to map
This commit is contained in:
parent
8914909972
commit
aaf767bd03
|
@ -1,4 +1,5 @@
|
|||
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'
|
||||
|
@ -12,12 +13,16 @@ import BoatMarker from './marker-boat';
|
|||
import MarkerBFly from './marker-butterfly';
|
||||
/**/
|
||||
import MarkerBFlyBlack from './marker-butterfly-black';
|
||||
const Map = () => {
|
||||
const position = [51.505, -0.09]
|
||||
/**/
|
||||
import VehicleMarker from '../vehicleMarker';
|
||||
const Map = ({ vehPos }) => {
|
||||
const position = [53.2206976, 7.7585528]
|
||||
const positionP = [51.504, -0.09]
|
||||
return (
|
||||
<>
|
||||
<h2>Map</h2>
|
||||
<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'
|
||||
|
@ -33,8 +38,17 @@ const Map = () => {
|
|||
<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
|
||||
};
|
||||
|
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {Marker,Popup} from 'react-leaflet';
|
||||
import bfly from '../assets/Logo_SIB_electricindigo.svg';
|
||||
const VehicleRealTimeMarker = ({ index,location }) => {
|
||||
const myIcon = new L.Icon({
|
||||
iconUrl: bfly,
|
||||
iconRetinaUrl: bfly,
|
||||
popupAnchor: [-0, -0],
|
||||
iconSize: [32,45],
|
||||
});
|
||||
return(
|
||||
<>
|
||||
<Marker
|
||||
index={index}
|
||||
position={[location.lat,location.lon]}
|
||||
icon={myIcon}
|
||||
>
|
||||
<Popup>
|
||||
Popup
|
||||
</Popup>
|
||||
</Marker>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default VehicleRealTimeMarker;
|
||||
|
||||
|
||||
VehicleRealTimeMarker.propTypes = {
|
||||
index: PropTypes.number,
|
||||
location: PropTypes.object
|
||||
};
|
|
@ -115,7 +115,7 @@ const Home = () => {
|
|||
<p>
|
||||
vehicle position count: {vehPos.length}
|
||||
</p>
|
||||
<Map />
|
||||
<Map vehPos={vehPos}/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue