I have a leaflet map with five geojson layers (baseMaps) and i control them by a L.control. My third layer contains many points to visualize so when i click on it, it takes a lot of time to load.
Is there a way to preload this layer specifically, even if the entire page takes a litlle bit more time to load ?
Thanks
Leaflet.markercluster computes the clustering only once it is added to a map (it needs to know the map configuration in order to process the clustering).
As said in the question comments, the first step is to use the latest version of that plugin, as it benefits from a major performance upgrade compared to version 0.4.0.
If you still want the plugin to process the clustering in advance, so that the user does not have to wait the first time he/she clicks on the Layers Control, a workaround would be to add your clustered layered to map and to remove it immediately: that way, the clustering is processed at initialization, and the layer is ready for display once the user wants to see it.
Related
I am using custom markers to show a semi-live view of the location and orientation (heading) of certain vehicles of interest overlayed on Google Maps. (In my case, I'm depicting aircraft, the same way Uber does for cars, or how FlightAware does for commercial flights).
The coordinates for the markers are being broadcast in JSON format to participating browsers from a server that I control. The JSON data is processed by a JavaScript function at the browser to create / update the markers on the Google map. The refresh (broadcast) rate can sometimes be as fast as once every 2-seconds, or as slow as once every 30 seconds, depending on the particular user's needs of the moment.
Sometimes, it is possible (and valid) for two markers to be thousands of miles apart from each other. For example, one marker could be in Montana, and the other could be somewhere in Africa, and this is a valid condition.
However, sometimes, when I am zoomed into a region of the world so I can look more closely at one marker, a "ghost" marker appears nearby that "isn't really located there". The ghost marker is labeled as one of the other markers that may be hundreds or thousands of miles away, but it's showing up in my zoomed in view for some strange reason. If I momentarily zoom in our out, the ghost disappears, but it may re-appear again.
Interestingly, the ghost image has the proper orientation for the vehicle it represents, but it's just located in the wrong part of the world.
Are there any special things I should be doing when I'm updating multiple markers separated by large distances so they don't show up like this in the wrong place?
I have traced this as far as putting console messages in the browser so I can see the lat/lon of each marker being depicted. I output the latLng object just before it's applied to each marker, and the lat/lon I see in the console log is correct, even when the actual marker shows up in the wrong place.
I don't know if this is a contributor to the problem, but the marker images I'm using are custom PNG files, not standard Google makers. Has anybody run into this before?
As I can see there are a couple of issues reported in the Google issue tracker very similar to the one you described here.
Have a look at them:
https://issuetracker.google.com/issues/74225068
https://issuetracker.google.com/issues/73864685
Feel free to add your comments and star the issues to subscribe to further notifications from Google.
Please note that these issues were reported for the experimental version of Google Maps JavaScript API. Double check which version of the API you are using. Probably loading the release or frozen version will work as a temporary workaround for you.
For more details about versioning model of Google Maps JavaScript API please refer to the documentation:
https://developers.google.com/maps/documentation/javascript/versions
I hope this helps!
Adding many markers(10000) using leaflet is slowing down the browser.
markers are moving after every 5 sec.
How can performance issue solved in such scenario.
Note : Clustermarker has one problem. It's difficult to keep track of moving marker.
I'd the same issue, I bypassed it because 1000 markers is too much information.
I put two events:
On specific zoom level, I query my database to have (less) markers. In argument i give the map's coordinates like this example. Tips: i add +1 and -1 on lat and lng to anticipate step 2
I've got an event leafletDirectiveMap.mooveend. When this event is call, I'm doing the step 1. Tips: I'd $timeout with 300ms on this events.
If you need to show all markers, maybe using the heatmaps layer on specific zoom is an another bypass.
Sorry if it's not the solution of your problem but, iIf you try this example, you can see 10000 markers slowdown browser.
Are you using L.marker()? I've had better performance results with L.divIcon().
Alternatively, you could draw your markers directly on the canvas (as is done in Leaflet MaskCanvas). You can also update markers that are drawn on the canvas. Note: this isn't a plug-and-play suggestion; you'll have to do some coding to make this idea work.
Here are some other ideas from this GIS StackExchange question and this other GIS StackExchange question.
I have a weird issue on Mapbox with js.
We are loading in geoJson files to get all the pins, which works fine most of the time with no errors. But every so often the json just simply does not seem to load and no pins appear.
Does not seem to be a browser specific problem, or cache or cross domain (as its from the same server and it would never work).
Guessing it could be something in our GEOJSON or js, but then it would never ever work.
Our next step is to add a callback and then try the loop again, but I was wondering if there was something simple we are overlooking in the way map box and geoJSON play together?
So it turns out that the issue here was having a series of objects on the map from within map box (a pin, some drawn boxes). Then we load in the geojson.
So loading was not an issue, it was adding a layer that was being flatly ignored.
I'm somehow new in making web services using Openlayers and Javascript. I would like to create a clickable grid layer on top of a map (e.g. OSM) which first has a defined spatial resolution (e.g. 200 m) and of course when user zooms the grid size adapts to the new zoom level of the map. Also I want to show every cell of a grid with a specific colour, and when the user clicks on each cell some information can be shown. So, I guess each cell is like a feature in this layer (e.g. polygon). I was wondering if Openlayers has existing function to do such a thing that I can use, or do I have to code all of it? any help and suggestions on how I can manage to do this would be highly appreciated. Below is a link to a service that has created such a service, I would like to do the same... Thanx.
Link to sample:
http://koenigstuhl.geog.uni-heidelberg.de/osmatrix/#timestamp/allotments_area/8/12/-0.2142333984375/51.578776399817066
Having developed the application you mention in your example, I can give you some hints on your question. The solution is pretty straightforward.
The grid you see, i.e. the coloured hexagons, is simply map tiles, that are served by a custom back-end following the Tile Map Service schema (I used NodeJS) that, in turn, uses Mapnik (any other engine should work as well, e.g. GeoServer or MapServer) for rendering the images. The data is stored in a Postgres data base with PostGIS added on.
Use a client-side library to create the map and add the tiled layer. OpenLayers and Leaflet both do the job well. (Leaflet, though, is a bit easier to grasp if your new to the topic).
On client side you register a click-event handler on the Map, that you can use to get the coordinates of the mouse click. Use these coordinates, send them to your back-end and perform a spatial query on the data base to get the polygons adjacent to the coordinates. The server's response should then provide the geometries of the polygons (encoded in GeoJSON in this case, GML, KML should work fine as well) and whatever information you want to display.
Use these polygons and add them to a vector layer using whatever colour scheme you want.
Have a look at the code to see how it works. The important files are osmatrix.js (connects to the back-end), control.js (main module, keeps track of everything) and map.js (surprisingly enough, everything map-related).
Openlayers has facilities for creating an interactive vector later. In order to create something like in the example, you would have to 1) add a vector layer, 2) write a loop that adds vector features to the appropriate locations on the map, 3) style the features as hexagons, and 4) create a stylemap that dynamically sets the feature color based on the appropriate parameters. Each step is facilitated by Openlayers.
A good start is to use the leaflet library because it use the map projection and to read this tutorial: http://build-failed.blogspot.de/2013/07/dynamically-creating-hexagons-from-real.html?m=1.
Im trying to highlight specific building within a map using the google maps v3 api. I was wondering if anyone had any idea how to do this. I've been looking through google api documentation and come across nothing at the moment.
For example: http://goo.gl/maps/GyrDB - This is a map of a section manhattan, as you can see the 3d building. Im trying to highlight specific ones on hover.
Thanks :D
If you have information about where the building is, then you can use a Polygon to highlight it. If you don't have information about where the building is, then you are probably out of luck. The Google Maps API doesn't have any way of interacting with the map at that level.
Now, I suppose that one thing you could do is:
download the Google Maps tile,
find the point in the image that the user clicked on,
do a flood fill of that point with some awful colour,
set to clear all the pixels which are not the colour,
overlay that image on top of your map
You would also need to be clever about buildings which lie in more than one tile.
HOWEVER, this might run you afoul of the Terms of Use. I know that they disallow modifying the artwork; I am not sure if this would count as modifying the artwork; you'd need to look carefully at the TOU and maybe ask a lawyer. Or ask Google. (Don't ask me, I am not a lawyer.)
In many countries, every building is a cadastral parcel and there Web Map Service (WMS) layers showing them, provided for free by state bodies.
Using these layers, you can get building polygon coordinates. For ex: https://snag.gy/WtU7ZT.jpg