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.
Related
I'm developing a small app using Google Maps javascript API v3 where I need to display 2 markers and update their positions using ajax. I found no problem in doing it using Google Maps Markers, but I need a more customized marker so I'm using Google Maps custom overlays and I can't find the way to make the movements smooth.
This is the design of the markers (that also uses css animations, so I need custom html):
Markers design
The problem I have is that I can't find a way to actually move the custom overlay on the map. What I'm doing now is removing the overlay and creating a new one every time I have to move it, what makes a little blink and don't allow me to make a smooth transition from one position to the other.
So here are my questions:
1- Is using custom overlays the best way to build the markers according to the design? Is there any way to make Google Maps Markers look like the design?
2- If using custom overlays (https://developers.google.com/maps/documentation/javascript/customoverlays) is the best option, is there another way for moving them that is not removing and creating a new one?
Thanks in advance!
After struggling with this some time (it really took me several hours) I have manage to do it getting inspired by this fiddle:
https://jsfiddle.net/doktormolle/QRuW8/
The functionality is not the same, but I could get some ideas.
Since there is not a lot of documentation I have created my own fiddle with a working (and simplified) example, just in case is useful for anyone:
https://jsfiddle.net/javigbas/3zx5xa2u/
:)
I would like to use this fork (updated to work with latest Leaflet version) of the Leaflet Zoomify plugin to display a custom map (huge texture ~30000x70000).
I need to work on the map with geo coordinates (to set markers) and wonder what's the best way to do it, since there is no way to set offset, scale or boundaries when initialising it through the plugin.
Initially I thought there should be a way in Leaflet to calibrate a TileLayer just like it's possible with ImageOverlay by setting the image bounds. But that doesn't seem to be the case.
Is this something the plugin should to take care of? In which case I would raise an issue in the repo.
I also saw the conversion methods
in Leaflet. I'm wondering if the best way to go is to convert the geo coordinates to pixels using those methods?
I'm also open to switch to another file format and plugin.
Any advice is highly appreciated.
Thanks a lot!
After all, I went on a totally different route without Zoomify, which I think makes more sense in my case.
I used QGIS to geo-reference my custom layer and export it as GeoTIFF following this tutorial. I uploaded it to Mapbox and baked it into a map style while mixing it with additional map features from Mapbox/OSM.
I need to use Longitude and Latitude coordinates on a map that will be loaded in by an external program, and I need to be able to draw things on this map and be able to zoom in and out. Thing is, I cannot draw this map, and I need to be able to interact with both the map elements and with what I'm drawing.
I tried using Google, and found that I was able to control either my canvas or the map, but not both at the same time. Plus, I could not draw things properly on top of Google's map (I'm using Easel.js).
If anyone has any sources or advice, it will be much appreciated.
OK I figured this out with help from my web dev friend. He suggested I use Google Maps, and even though I have that whole "layering" issue (with all my events being captured in the canvas and not trickling down to the 'map-canvas' div), I should go and set up events that capture things like zoom and drag, and pipe them along to my Google Map, and the result is prefect for what I am looking for.
So now I have my Easel.js canvas on top of my Google map, and I just have to set up lat/lng positions for my objects when I want them to be part of the map!
Thanks for the help, everyone!
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 project where I need to put many thousands of markers on a Google Map, and the only way to get it to scale enough for our purposes was to avoid the Google markers and use THREE.js to draw everything into a separate canvas layered on top of the map. Odd solution I know, but it works very well - almost.
One problem of course is that these will overlay the map controls. The further problem with this is that IE10, which I have to support, does not support pointerevents:none, so I can't control the map through this div.
I have tried the various IE10 pointerevents:none workarounds with no success. I have also tried declaring a separate DIV on top of everything and telling Google to put the controls there, but that doesn't seem to work either. I thought of using a Custom Overlay but I don't want it to be affected by map actions.
My question is, does anyone know of a way to accomplish this, to either layer the map controls OVER my new div, or to insert this marker canvas into the Map stack between the map and the controls?
Thanks very much!
I found the answer... declaring the DIV as a map control does indeed work. I wasn't doing it correctly. Thanks.