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.
Related
I recently set up a non geographical map with leaflet using an image layer. This obviously is a stupid decision working with 'bigger' maps due to high memory usage and the need to load the big image file so I decided to use a tile layer instead.
Working mostly as expected aside from one thing: I can't seem to be able to drag outside of the map, it just jumps back so the map covers the screen. I'm not sure what causes that as I read that this behaviour usually needs to be set manually using maxBounds. Tried setting that to null, doesn't change. The only new thing introduced is Leaflet Rastercoords (https://github.com/commenthol/leaflet-rastercoords) which I'm unsure if that's causing the problems.
Any way to resolve that? Not sure where to look next.Thank you!
I achieved the behaviour you want using the following work around:
map.setMaxBounds(null); //map being the leaflet map.
This need to be called after the initialization of the map and of the raster coords layer.
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!
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.
In my mapbox/leaflet app I'm using the following code in a loop to follow a route a round a map
map.setView(microLineArray[microIteration], zoom);
microLineArray is the array of lat longs that the route follows.
It plays very odd though because of the tiles loading in.
As I am only using a couple of zoom levels and only covering the USA for the route playing is it possible to pre-load the tiles at all. If so how would I go about doing this.
There is some discussion happening about this on the google group # https://groups.google.com/forum/#!topic/leaflet-js/nWk2k0FySRo. Sounds like some people are making phantom/hidden/offset map containers that contain more tiles than the user's map viewport.
So if you know where your routes are "generally" going to be...create another map container and use setView to get it moving & requesting tiles that you need prior to the user's map container.
Additionally, there is an old plugin called Leaflet.TileBuffer that sounds like it does exactly what you want - however compatibility with latest versions appears unknown.
You will probably also want to consider forcing unloadInvisibleTiles to false.
I have a div on my website in which I have created a GoogleMap. I've added markers and implemented MarkerClusterer.
I want to allow the user to click a button and download an image of the currently viewed map as they see it after any zooming or moving including markers:
I tried to use html2canvas and that doesn't work at all.
After searching for how to do this for the last hour, I've come up with absolutely nothing useful.
Is this even possible to capture the div as the user sees it? Or is creating a static google map and saving the image the only way to do this?
SOLUTION
I went with PhantomJS in the end. I created a Map view which takes input through the querystring and uses that data to add markers to a map. I then used PhantomJS to take screenshots from the map view. I then output the screenshot image as a Base64 string.
SnapshotControl is suggested by google in such situations. The limitation is that SnapshotControl supports only URL of upto 2048 characters. So it can be used if there are not much layers drawn on map.
For phantom js, when user clicks on download, the layer data drawn on map should be send to server (through say downloadServlet). This data will be passed to a JSP that can render a map and plot point. Phantomjs will be executed by downloadServlet passing the URL of this jsp.
I have used phantomjs in my application as I draw around 4-5 different layers at a time. Only thing to note here is that the server where phantomjs would be executed needs to have internet connectivity otherwise maps will not be drawn.
Your best solution is Static Google Maps.
See https://developers.google.com/maps/documentation/static-maps/intro for plenty of examples.
Create an image in your div, I would then recommend using concatenation to produce a dynamic url from your marker/LatLng/Polyline etc variables. Then use JS to set the image's src equal to that url.
Following that, there are plenty of JS libraries that will allow the user to download the image.