Add markers and modify polyline in location history

feature/appm-store/pbac
Jayasanka Weerasinghe 5 years ago
parent 0f5c62938a
commit cf7814c957

@ -37,6 +37,7 @@
"geoMap": { "geoMap": {
"url": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", "url": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
"attribution": "&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors", "attribution": "&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors",
"defaultZoomLevel": 16 "defaultZoomLevel": 16,
"timeout": 120
} }
} }

@ -25,8 +25,31 @@ import {
Popup, Popup,
Tooltip, Tooltip,
} from 'react-leaflet'; } from 'react-leaflet';
import L from 'leaflet';
import { withConfigContext } from '../../../../../../components/ConfigContext'; import { withConfigContext } from '../../../../../../components/ConfigContext';
// Icons for the location markers
const pinStart = new L.Icon({
iconUrl: require('./pin_start.svg'),
iconRetinaUrl: require('./pin_start.svg'),
shadowUrl: require('./pin_shadow.svg'),
shadowSize: new L.Point(51, 51),
shadowAnchor: [22, 22],
popupAnchor: [0, -22],
iconSize: new L.Point(50, 50),
tooltipAnchor: [0, -22],
});
const pinEnd = new L.Icon({
iconUrl: require('./pin_end.svg'),
iconRetinaUrl: require('./pin_end.svg'),
shadowUrl: require('./pin_shadow.svg'),
shadowSize: new L.Point(51, 51),
shadowAnchor: [22, 22],
popupAnchor: [0, -22],
iconSize: new L.Point(65, 65),
tooltipAnchor: [0, -28],
});
class CustomMap extends Component { class CustomMap extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -38,17 +61,65 @@ class CustomMap extends Component {
* @returns content * @returns content
*/ */
polylineMarker = locationData => { polylineMarker = locationData => {
const polyMarkers = locationData.map(locationPoint => { const locationPoints = [...locationData];
return [locationPoint.latitude, locationPoint.longitude]; const polyLines = [];
});
while (locationPoints.length > 0) {
// Array to store positions for next polyline
const positions = [];
// Make a copy of remaining location points
const cachedLocationPoints = [...locationPoints];
// Iterate the remaining cached locations
for (let i = 0; i < cachedLocationPoints.length; i++) {
positions.push([
cachedLocationPoints[i].latitude,
cachedLocationPoints[i].longitude,
]);
const currentPoint = cachedLocationPoints[i];
// Remove the current location from the locationPoints
locationPoints.shift();
if (i < cachedLocationPoints.length - 1) {
const nextPoint = cachedLocationPoints[i + 1];
// Draw a dashed line for long for location points with long interval
if (
nextPoint.timestamp - currentPoint.timestamp >
this.props.context.geoMap.timeout * 1000
) {
// Create a dashed line
polyLines.push(
<Polyline
key={polyLines.length}
color="#414042"
positions={[
[currentPoint.latitude, currentPoint.longitude],
[nextPoint.latitude, nextPoint.longitude],
]}
smoothFactor={10}
weight={5}
dashArray="7"
/>,
);
break;
}
}
}
// Create a polyline from provided positions
polyLines.push(
<Polyline
key={polyLines.length}
color="#414042"
positions={positions}
smoothFactor={10}
weight={5}
/>,
);
}
return ( return (
<div style={{ display: 'none' }}> <div style={{ display: 'none' }}>
{ {polyLines.map(polyLine => {
<Polyline color="green" positions={polyMarkers}> return polyLine;
<Popup>on the way</Popup> })}
</Polyline>
}
</div> </div>
); );
}; };
@ -59,6 +130,10 @@ class CustomMap extends Component {
const attribution = config.geoMap.attribution; const attribution = config.geoMap.attribution;
const url = config.geoMap.url; const url = config.geoMap.url;
const startingPoint = [locationData[0].latitude, locationData[0].longitude]; const startingPoint = [locationData[0].latitude, locationData[0].longitude];
const endPoint = [
locationData[locationData.length - 1].latitude,
locationData[locationData.length - 1].longitude,
];
const zoom = config.geoMap.defaultZoomLevel; const zoom = config.geoMap.defaultZoomLevel;
return ( return (
<div style={{ backgroundColor: '#ffffff', borderRadius: 5, padding: 5 }}> <div style={{ backgroundColor: '#ffffff', borderRadius: 5, padding: 5 }}>
@ -66,8 +141,16 @@ class CustomMap extends Component {
<TileLayer url={url} attribution={attribution} /> <TileLayer url={url} attribution={attribution} />
<Fragment> <Fragment>
{this.polylineMarker(locationData)} {this.polylineMarker(locationData)}
<Marker position={startingPoint}> <Marker icon={pinStart} position={startingPoint}>
<Tooltip>Starting Location</Tooltip> <Popup keepInView={true}>Start</Popup>
<Tooltip direction="top" permanent={true}>
Start
</Tooltip>
</Marker>
<Marker icon={pinEnd} position={endPoint}>
<Tooltip direction="top" permanent={true}>
End
</Tooltip>
</Marker> </Marker>
</Fragment> </Fragment>
</Map> </Map>

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.80151 122.80151"><defs><style>.a,.b{fill:#8dc63f;}.a{opacity:0.34;}.c{fill:#fff;}</style></defs><title>map</title><circle class="a" cx="61.40076" cy="61.40076" r="57.704"/><circle class="b" cx="61.40076" cy="61.40076" r="40.2134"/><circle class="c" cx="61.40076" cy="61.40076" r="18.64704"/></svg>

After

Width:  |  Height:  |  Size: 354 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 69 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.a{fill:#414042;}.b{fill:#fff;}</style></defs><title>map</title><circle class="a" cx="50" cy="50" r="40.2134"/><circle class="b" cx="50" cy="50" r="18.64704"/></svg>

After

Width:  |  Height:  |  Size: 240 B

Loading…
Cancel
Save