I use react JS and socket.io to get data (coordinates of drones) from the server side.
Then, use Google API to display drones location as markers on the google Map.
The problem is that my animation is not smooth enough. (teleport)
My marker part code structure is something like
googlemap.js
componentDidMount(){
//setup Map
//setup initial Positions of the Markers
}
// every time it recerives new data from server, it will update the markers position
componentWillReceiveProps(nextProps){
//use setMap(null) to remove past markers on the map
//add the new markers
}
Is there any suggestion or 3rd party library to deal with this problem.
My idea now is to use RequestAnimationFrame?
interpolate some positions?
(I don't plan to use setInterval)
Thanks in advance
Related
I have a webpage with a Leaflet Map, I can add markers,filter markers and so on. My question is that how can I save it?
1.Load the Map
2.Add some Markers on the Map
3.(Optional) Filter the Markers on the Map
4.Save the map together with the Markers that put on the map in a database(any possible storage)
5.Opening the map in the browser and view same as what i just saved.
Ive search everything but its too hard to do it any possible suggestions?, TYIA
Depends on backend you are using.
For Database you can use Postgresql with PostGIS. You create table with geometry or geography column and save marker latlng there. In other columns you saves additional data that define marker (id, description, whatever).
You can also save current marker layer as geojson file. And load it on opening map.
But you need to write some backend that takes in markers data or geojson and do something with it server side.
You can also take a look at Leaflet.Storage (and django-leaflet-storage as an backend)
I'm trying to make a web page which displaying a google map with so many markers (can be up to millions of markers) that looked up from data like json.
I try to make it using "google.maps.Marker" but it went very slowly (can be hang) on map rendering when there are so many markers. Then I found that it can be solved by using WEB GL
to render those markers on map like colored points on map. For now, I can make it until that step.
But there are still some problem I got, like below:
Right now I draw markers on map using Web GL like colored points, you can see like this link http://psousa.net/demos/webgl/ (I learned from it). How to change that point shape into triangle shape or circle shape instead of point/rectangle shape like that?
When every point of markers is clicked, there must be a mouse down event that will show some informations about that point (like name, description, etc.). How to implement that mouse event on every single of marker using Web GL?
I use Google Maps v3 in my application and I noticed a strange behavior, When I refresh the web page, the map zoomed out to display the whole map then get back to the zoom level I specify in my code. This happen fast but every time I refresh the page. How can I fix it?
We once had this problem in our app but I just checked and it isn't happening any more. I can't remember what I did to fix it but here are some things to consider or try:
Set the maxExtent of your map to be the same as your base (Google) layer.
When we set up our google layer we set spherical mercator to true.
Check that your map's projection is "EPSG:900913", but this may have no effect.
// get max extent from base layer and set in map
map.maxExtent = map.getMaxExtent();
// create a Google layer
layer.params.sphericalMercator = true;
layer.params.maxExtent = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
var googleLayer = new OpenLayers.Layer.GoogleWfdss(layer.id, layer.params);
These might seem obvious but I thought I'd give you some other directions for debugging if you hadn't considered them.
I have a geolocation map where the user can select a location from a dropdown, this then adds the location to the map as a marker. However I have just implemented code to update the geolocation of the person if they are moving, on this function update it refreshes the entire map and removes the marker of the location.
Is there a way around this whole map refresh, something like updating just the marker postion without refreshing the whole map or is it simply a case of grabbing the location before refresh then adding it back in afterwards?
This seems wasteful on resources though as it updates every 3 seconds.
Example Google Maps API code would be great as I don't currently have mine to hand to show as example.
Summary: I wish to be able to update the user position marker without refreshing the whole map div as this then removes any previously added markers.
Thanks
I think there is a lot of different way to prevent that. check out the google.maps.Map class and its methods in the API documentation.
I am creating a page to show a list of locations(markers) on Google maps. The number of markers is dynamic and can be quite large. This will adversely affect user experience when the map (along with the markers) are taking too long to load.
Can anyone point me in the right direction to load the map first and then load the markers. Any help much appreciated.
Use a marker manager. I used one for Google Maps API v2 (for on-demand loading of ~2000 markers via AJAX) and I am sure there's one for API v3. A marker manager is class that allows you to selectively display markers on a Google Map. Instead of adding markers to map, you use add them to the marker manager and it takes care of when and how to display the markers. The markers that lie outside the "visible" region are removed hence its fairly memory efficient. A marker manager class may provide "clustering" option (or may be you need another class for this). A cluster manager displays one marker that encompasses multiple markers when markers are too close, specially at high zoom level. Hope this helps you in the right direction.