mercredi 17 octobre 2018

Trouble Placing Tiled Image onto Leaflet Map

I have this straightforward leaflet map (using a standard global background tile) in an Ember app (using Ember leaflet):

enter image description here


I need to place another tile-layer on top of the map, which will be a tiled image - using deep zoom. Specifically, the leaflet-deepzoom plugin for ember.js.

I have a deepzoom image (with a directory ending in _files) but whenever I place it onto the map, it always goes to the top left corner:

enter image description here


Inside of the plugin, it uses this code to define the bounds:

var southWest = options.map.unproject([0, options.height], options.maxNativeZoom);
var northEast = options.map.unproject([options.width, 0], options.maxNativeZoom);
options.bounds = new L.latLngBounds(southWest, northEast);

I've tried messing with this code extensively, attempting to get it to position the image at a coordinate position that I need it at, rather than the default top left.

What I'm realizing though, is that these bounds may not matter, and even if the bounds were correctly positioned in Perth, Australia where I want them, maybe the image would simply be out of bounds, placed in the top left corner, just not visible.


Any guidance at all on how to offset a tiled image to a different coordinate location would be helpful. I've gone through many of the extending Leaflet tutorials and I'm still just not getting it.




Aucun commentaire:

Enregistrer un commentaire