I have a leaflet project where I am delivering a continuous stream of 'coordinates' via WebSockets to the client browser. I need to be able to display markers corresponding to those locations for a set period of time (something like 1 or 2 seconds) and then remove them (to make room for more locations).
Can anyone help me out or point me in the direction of resources wherein I could find some help?
Thanks!
Edit : Why the downvote? Its a legitimate and common question and one without a lot of solutions online.
Here is some code from the documentation (http://leafletjs.com/reference-1.0.3.html#layer):
var layer = L.Marker(latLng).addTo(map);
layer.addTo(map);
layer.remove();
So in order to remove it after 2 seconds, I think you could try this one:
var layer = L.Marker(latLng).addTo(map);
layer.addTo(map);
setTimeout(function() {
layer.remove();
}, 2000);
Example
Related
Good day,
I have a map with markers that move every 3 seconds to a new location, using ReactLeafletDriftMarker. I cannot, unfortunately, share my code since it is confidential.
My issue is that the markers do not drift, they just jump/appear in the next location.
Does anyone know what causes this to happen?
I can share this snippet:
{Object.entries(latlng).map(([key, value]) => {
return (
<ReactLeafletDriftMarker
position={value}
duration={4000}
keepAtCenter={false}
icon={markerIcon}
>
</ReactLeafletDriftMarker>
);
})}
It shows how (around) 400 points move on a map.
All help is appreciated, thanks.
It was a simple mistake. I assigned a key to the container, so it re-rendered every time the markers changed position values.
im trying to create a route that follows a gps trace i provide.
The gps trace is cleaned up and it has no loops in it and is in correct order.
I checked it with other services.
It has 1920 points.
You can find the trace here GPX Files
Sadly if i create a route based on provided sdk example (github) i get loops in my path.
I was hoping you could help me to solve following problems:
how do i avoid loops while creating route by using HERE ios Swift SDK
how do i set route options is such way to follow provided point array and not create a fastest or balanced route.
Since i could not find those functions in Ios sdk i used additional REST API to filter the route a bit to remove all points that were not matched correctly according to here maps... before drawing the route.. ie everything with low probability, warnings, big distance to the road... yet the result is still not good. Here is a cleaned up file.. the file is being created after the original was maped / run once through HERE Maps. In this file all points that have low confidence or produce warnings or have big distance to original points .. are removed. This is the one i use to create a route and it still have the same issues like loops and weird turns.
Thank you very much in advance!
BR.
So far i have this code:
private lazy var router = NMACoreRouter()
#objc func do_routing_stuff( gps_trace :[NMAWaypoint]) {
var stops = [Any]()
stops = gps_trace
let routingMode = NMARoutingMode(routingType: .fastest,
transportMode: .car,
routingOptions: .avoidHighway)
// Trigger the route calculation
router.calculateRoute(withStops: stops ,
routingMode: routingMode)
{ [weak self] routeResult, error in
guard error == .none else {
self?.showMessage("Error:route calculation returned error code \(error.rawValue)")
return
}
guard let result = routeResult, let routes = result.routes, routes.count > 0 else {
self?.showMessage("Error:route result returned is not valid")
return
}
// Let's add the 1st result onto the map
self?.route = routes[0]
self?.updateMapRoute(with: self?.route)
// self?.startNavigation()
}
}
private func updateMapRoute(with route: NMARoute?) {
// remove previously created map route from map
if let previousMapRoute = mapRoute {
mapView.remove(mapObject:previousMapRoute)
}
guard let unwrappedRoute = route else {
return
}
mapRoute = NMAMapRoute(unwrappedRoute)
mapRoute?.traveledColor = .clear
_ = mapRoute.map{ mapView?.add(mapObject: $0) }
// In order to see the entire route, we orientate the
// map view accordingly
if let boundingBox = unwrappedRoute.boundingBox {
geoBoundingBox = boundingBox
mapView.set(boundingBox: boundingBox, animation: .linear)
}
}
in comparison same route presented with leaflet maps.
I believe the problem you have is that you are feeding the Routing API a large number of waypoints, all of which are in close proximity to each other.
You have almost 2000 waypoints in your GPX file (and ~1300 in your cleaned one). Each of these waypoints is less than 10 meters distance from their closest neighbors. This is not the type of data that the Routing API is really designed to work with.
I've experimented with your GPX Trace and I have come up with the following solution: simply skip a bunch of coordinates in your trace.
First, clean up your trace using the Route Matching API (which I believe you have been doing).
Second, pick the first trkpt in the GPX file as your first waypoint for the Routing call. Then skip the next 20 points. Pick the following trkpoint as the second waypoint. Repeat this until you are at the end of the file. Then add the last trkpt in the trace as the final waypoint.
Then call the Routing API and you should get a good match between your trace and your route, without any loops or other weird routing artefacts.
Some notes:
I have picked 20 as the number of traces to skip, because this would put about 200m in between each waypoint. That should be close enough to ensure that the Routing API does not deviate too much from the traced route. For larger traces you may wish to increase that number. For traces in urban environments with lots alternate routes, you may want to use a smaller number.
It's important to clean the data with the Route Matching API first, to avoid picking outliers as waypoints.
Also, you may not wish to use the "avoidHighways" option. Given your use case, there doesn't seem to be a benefit and I could see it causing additional problems.
By now you probably worked it out, but your waypoints are likely landing on bridges or tunnels that are along your route but not on the road you want. I.e. the waypoint is intended to be on the road under the bridge but the routing engine perceives that you want to drive on the bridge.
The routing engine is looping around those roads to drive you on that waypoint on the bridge or in the tunnel.
There is no simple solution to this that I have found.
I am using this plugin : https://github.com/perliedman/leaflet-routing-machine.
My code looks like this:
for(let i=0; i<markers.length; i++){
points.push(L.latLng(markers[i].latitude, markers[i].longitude))
}
this.routingControl = L.Routing.control({
waypoints: points
}).addTo(this.map);
When I pass points filled with different latitude/longitude, it draws the route fine. But let's imagine the following scenario. let's say that points array contains 3 items. each item contains latitude/longitude and let's say that those latitude/longitude are the same. So something like this:
34.72581233927868 -80.71105957031251
34.72581233927868 -80.71105957031251
34.72581233927868 -80.71105957031251
Now what Routing control does is as it can't draw the route, it automatically zooms in in the maximum way and in the console, it shows the errors. {"message":"Zoom level must be between 0-20."}
Workaround 1: after drawing routes, i decided to use settimeout after 1 second and there I zoom at 11 by myseslf. this way it zooms out, but in the console, errors still stay. How do I fix this?
If you know your input can be invalid, then the cleanest way would be to filter it on the way in to remove duplicates. If that's not possible for some reason and you want to let LRM determine if there's an error, then you can catch the error event with:
L.Routing.control({
...
})
.addTo(this.map)
.on('routingerror', function(e) {
// do your error action here - e.g. zoom out
})
For more information on handling errors in LRM, see https://www.liedman.net/leaflet-routing-machine/api/#eventobjects
I am using MapQuest map with leaflet. The routes are being injected dynamically. When we add routes to the map, it takes time to finish the rendering.
I want to block the screen while the map is being rendered.
Is there any way(mapquest API or leaflet event) to know the map is ready or finished rendering so that I can stop the blocking of the screen.
I'm using Leaflet to add the routes. Something like this:
function (locations) {
const dir = MQ.routing.directions();
dir.route({ locations: locations });
comp.mqroute = MQ.routing.routeLayer({
directions: dir,
fitBounds: true,
draggable: false,
});
comp.map.addLayer(comp.mqroute);
}
This is a case of RTFM.
The fact that you're using MQ.routing.directions in your code tells me that you're using the Mapquest routing plugin for Leaflet, which has complete API documentation.
By reading that API documentation, one can notice a success event, I quote:
success
Fired when route data has been retrieved from the server and shapePoints have been decompressed. [...]
I have a heavy suspicion that you don't need to know when the route is rendered (meaning: when the lines have been displayed on the screen) but rather when then network requests for the route are finished (which is what takes most time). The time to actually render lines on the screen is usually negligible unless one is working with thousands of segments (after the automatic douglas-peucker simplification).
I also have a heavy suspicion that this is a XY problem, and that the root problem you're trying to solve is race conditions when the user is (re-)requesting routes too fast, to which the solution is just throttling the requests rather than blocking the UI.
How to use this success event is illustrated in MapQuest's Route Narrative example:
dir = MQ.routing.directions();
dir.on('success', function(data) {
// ...
// the code here will run once the route is ready
// ...
}
I'm totally new to highcharts so excuse any mistake in advance.
I have one chart which illustrates amount of bandwidth used according to datetime. (somehow like this example.) I need to show more data to the user whenever the chart is zoomed on xAxis; means new data should be popped up when we are seeing a period of time in detail. fortunately, I have access to that new data, but the main problem is that I don't know how to combine this new data with my old chart.
To make my question more vivid, lets imagine this scenario: assume that I have bandwidth usage for last 2 years in scale of month (for every month on xAxis, I have one value on yAxis), then I zoom in some part of my chart and the chart gets wider and new points pop up on xAxis (what automatically happens in highcharts when we set zoomtype: 'x'), for some of these points, I have some values corresponded to them on yAxis, which I want these new points to be considered in my chart. what shall I do to do this for large scale of data? (e.g. when I have the data for 2 years and I wanna zoom by accuracy of one minute, it is not feasible to include new points manually in between of old series.)
since my code is too large and makes it more complicated to put it here, I try to illustrate my desired result via pictures:
1) this is my chart before zoom:
2) after zoom:
3) and the final result which I do not know how to make it:
Any help would be very appreciated.
Take a look at this live demo: http://jsfiddle.net/kkulig/6gyfx6n7/
I used afterSetExtremes event to check the currently displayed time span and set the appropriate data. If it's shorter than 30 days then I add additional points. Otherwise I restore the default data. pointsAdded helps me to to control whether these operations are actually needed or not.
events: {
afterSetExtremes: function(e) {
var series = this.series[0];
if (pointsAdded && e.max - e.min > 30 * day) {
console.log('Set default data');
series.setData(data.slice());
pointsAdded = false;
} else if (!pointsAdded) {
console.log('Add points');
additionalData.forEach(function(p) {
series.addPoint(p, false);
series.chart.redraw();
pointsAdded = true;
});
}
}
}
To see it working select the last 20 days or so. Then return to the default view by clicking All button.
API references:
https://api.highcharts.com/highstock/xAxis.events.afterSetExtremes
https://api.highcharts.com/class-reference/Highcharts.Series