fix: avoid popup jumping between different markers on refresh by improving index and key props
This commit is contained in:
parent
cdc8b43663
commit
5910e7f8d5
|
|
@ -11,7 +11,7 @@ import MsgMarkerWithoutGtfs from './marker-msg';
|
|||
export default function Map({messages}) {
|
||||
/*lat and lon of Braunschweig,DE*/
|
||||
const position = [52.26594, 10.52673]
|
||||
//TODO make this switch available via configuration
|
||||
//TODO make this switch available via configuration!
|
||||
const hasGtfs = false;
|
||||
return (
|
||||
<>
|
||||
|
|
@ -27,11 +27,11 @@ export default function Map({messages}) {
|
|||
/>
|
||||
{
|
||||
messages.map(function(value,key) {
|
||||
//console.log(`key: ${key}, value: ${value}`);
|
||||
//console.log(`key: ${key}, value: ${value.vehicleId}`);
|
||||
if(hasGtfs){
|
||||
return <MsgMarkerWithGtfs key={key} index={key} message={value}/>;
|
||||
return <MsgMarkerWithGtfs key={value.vehicleId} index={value.vehicleId} message={value}/>;
|
||||
}else{
|
||||
return <MsgMarkerWithoutGtfs key={key} index={key} message={value}/>;
|
||||
return <MsgMarkerWithoutGtfs key={value.vehicleId} index={value.vehicleId} message={value}/>;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
|
|||
|
||||
import MarkerMsgPlus from './marker-msg-plus-gtfs';
|
||||
|
||||
const MarkerMsg = ({ index,message }) => {
|
||||
const MarkerMsg = ({ message }) => {
|
||||
/*store state*/
|
||||
const [ptByIfleet,setPtByIfleet]=useState({});
|
||||
const getPtByIfleet= async ()=>{
|
||||
|
|
@ -29,8 +29,6 @@ const MarkerMsg = ({ index,message }) => {
|
|||
return(
|
||||
<>
|
||||
<MarkerMsgPlus
|
||||
index={index}
|
||||
key={index}
|
||||
message={message}
|
||||
ptByIfleet={ptByIfleet}
|
||||
/>
|
||||
|
|
@ -42,6 +40,5 @@ export default MarkerMsg;
|
|||
|
||||
|
||||
MarkerMsg.propTypes = {
|
||||
index: PropTypes.number,
|
||||
message: PropTypes.object
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {Marker} from 'react-leaflet';
|
|||
import PopupMsg from './popup-msg-gtfs';
|
||||
import getIcon from './icon-gtfs';
|
||||
|
||||
const MarkerMsgPlusGtfs = ({ index,message,ptByIfleet }) => {
|
||||
const MarkerMsgPlusGtfs = ({ message,ptByIfleet }) => {
|
||||
|
||||
if(message===undefined || message===null
|
||||
|| Object.keys(ptByIfleet).length===0){
|
||||
|
|
@ -18,12 +18,10 @@ const MarkerMsgPlusGtfs = ({ index,message,ptByIfleet }) => {
|
|||
return(
|
||||
<>
|
||||
<Marker
|
||||
index={index}
|
||||
key={index}
|
||||
position={[message.lat,message.lon]}
|
||||
icon={markerIcon}
|
||||
>
|
||||
<PopupMsg index={index} message={message} ptByIfleet={ptByIfleet} />
|
||||
<PopupMsg message={message} ptByIfleet={ptByIfleet} />
|
||||
</Marker>
|
||||
</>
|
||||
);
|
||||
|
|
@ -34,7 +32,6 @@ export default MarkerMsgPlusGtfs;
|
|||
|
||||
|
||||
MarkerMsgPlusGtfs.propTypes = {
|
||||
index: PropTypes.number,
|
||||
message: PropTypes.object,
|
||||
ptByIfleet: PropTypes.object
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {Marker} from 'react-leaflet';
|
|||
import PopupMsg from './popup-msg';
|
||||
import getIcon from './icon';
|
||||
|
||||
const MarkerMsgPlus = ({ index,message }) => {
|
||||
const MarkerMsgPlus = ({ message }) => {
|
||||
|
||||
if(message===undefined || message===null){
|
||||
return null;
|
||||
|
|
@ -17,12 +17,10 @@ const MarkerMsgPlus = ({ index,message }) => {
|
|||
return(
|
||||
<>
|
||||
<Marker
|
||||
index={index}
|
||||
key={index}
|
||||
position={[message.lat,message.lon]}
|
||||
icon={markerIcon}
|
||||
>
|
||||
<PopupMsg index={index} message={message} />
|
||||
<PopupMsg message={message} />
|
||||
</Marker>
|
||||
</>
|
||||
);
|
||||
|
|
@ -33,6 +31,5 @@ export default MarkerMsgPlus;
|
|||
|
||||
|
||||
MarkerMsgPlus.propTypes = {
|
||||
index: PropTypes.number,
|
||||
message: PropTypes.object
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,15 +3,13 @@ import PropTypes from 'prop-types';
|
|||
|
||||
import MarkerMsgPlus from './marker-msg-plus';
|
||||
|
||||
const MarkerMsg = ({ index,message }) => {
|
||||
const MarkerMsg = ({ message }) => {
|
||||
if(message===undefined || message===null){
|
||||
return null;
|
||||
}else{
|
||||
return(
|
||||
<>
|
||||
<MarkerMsgPlus
|
||||
index={index}
|
||||
key={index}
|
||||
message={message}
|
||||
/>
|
||||
</>
|
||||
|
|
@ -22,6 +20,5 @@ export default MarkerMsg;
|
|||
|
||||
|
||||
MarkerMsg.propTypes = {
|
||||
index: PropTypes.number,
|
||||
message: PropTypes.object
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {Popup} from 'react-leaflet';
|
|||
import seconds2dmhs from '../../utils/seconds2dhms';
|
||||
import getRouteType from '../../utils/gtfs-route-type';
|
||||
|
||||
const PopupMsgGtfs = ({index,message,ptByIfleet}) => {
|
||||
const PopupMsgGtfs = ({message,ptByIfleet}) => {
|
||||
/*get number of ms since epoch*/
|
||||
const nowTsMs=Date.now();
|
||||
const nowTs=Math.round(nowTsMs/1000);
|
||||
|
|
@ -17,10 +17,7 @@ const PopupMsgGtfs = ({index,message,ptByIfleet}) => {
|
|||
const itcsString=itcsDate.toString()
|
||||
return (
|
||||
<>
|
||||
<Popup
|
||||
index={index}
|
||||
key={index}
|
||||
>
|
||||
<Popup>
|
||||
message id: {message.id} <br/>
|
||||
vehicle id: {message.vehicleId} <br/>
|
||||
trip id: {ptByIfleet.trip_id} <br/>
|
||||
|
|
@ -43,7 +40,6 @@ const PopupMsgGtfs = ({index,message,ptByIfleet}) => {
|
|||
export default PopupMsgGtfs;
|
||||
|
||||
PopupMsgGtfs.propTypes = {
|
||||
index: PropTypes.number,
|
||||
message: PropTypes.object,
|
||||
ptByIfleet: PropTypes.object
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {Popup} from 'react-leaflet';
|
|||
|
||||
import seconds2dmhs from '../../utils/seconds2dhms';
|
||||
|
||||
const PopupMsg = ({index,message}) => {
|
||||
const PopupMsg = ({message}) => {
|
||||
/*get number of ms since epoch*/
|
||||
const nowTsMs=Date.now();
|
||||
const nowTs=Math.round(nowTsMs/1000);
|
||||
|
|
@ -16,10 +16,7 @@ const PopupMsg = ({index,message}) => {
|
|||
const itcsString=itcsDate.toString()
|
||||
return (
|
||||
<>
|
||||
<Popup
|
||||
index={index}
|
||||
key={index}
|
||||
>
|
||||
<Popup>
|
||||
message id: {message.id} <br/>
|
||||
vehicle id: {message.vehicleId} <br/>
|
||||
lat: {message.lat} <br/>
|
||||
|
|
@ -33,6 +30,5 @@ const PopupMsg = ({index,message}) => {
|
|||
export default PopupMsg;
|
||||
|
||||
PopupMsg.propTypes = {
|
||||
index: PropTypes.number,
|
||||
message: PropTypes.object
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,15 +10,15 @@ export default function MapPage() {
|
|||
//console.log('getData() start...');
|
||||
try {
|
||||
/*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
|
||||
//TODO Make fields available via configuration!
|
||||
let url = 'https://api.entur.io/realtime/v1/gtfs-rt/vehicle-positions';
|
||||
//let url = 'http://localhost:8080/vehicle-positions';
|
||||
const res = await axios.get(url,
|
||||
{
|
||||
responseType: 'arraybuffer'
|
||||
//responseType: 'blob'
|
||||
});
|
||||
//TODO remove debugging
|
||||
if(res.data){
|
||||
//TODO remove debugging
|
||||
//console.log('getVehPos() res available');
|
||||
/*parse messages*/
|
||||
const messages = parseMessages(res.data);
|
||||
|
|
@ -42,7 +42,7 @@ export default function MapPage() {
|
|||
/*refresh data periodically*/
|
||||
const intervalCall=setInterval(()=>{
|
||||
getData();
|
||||
}, 10000);
|
||||
}, 5000);
|
||||
/*TODO adjust interval, make it available via config file*/
|
||||
return ()=>{
|
||||
/*clean up*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue