Flat images & fractional zoom / scaled tiles / fill container

[Nate Solas]

We're building a site that needs to zoom in on a lot of images and these days I feel like it would be foolish to launch without good touch support. Leaflet fits this bill but not the part about flat images and filling the base container. We have many different image sizes and want to be responsive with the rendering so we need to dynamically fill the map container. I've spent way too long messing with this and finally have a proof-of-concept I'd like some feedback on from the community:

http://jsfiddle.net/8he7k/11/

(demo image from here: https://en.wikipedia.org/wiki/Wikipedia:Featured_picture_candidates/Orion_Nebula_mosaic)

Key features included:

• Scales tiles to fill container. You don't have to mess with half zoom or anything: it fills the container.
  
• Catches resize event and does the right thing. Could be used to flip between multiple images in a single map, I think.
  
• Zoom can be called with fractional values
  
• You can stop a pinch zoom anywhere, and it's awesome. Unfortunately it seems to lock up every browser I've tried it on? (old iPhone, Android 4.0.4)
• (to try this out you need to change or override the _onTouchEnd code so it uses the floatZoom value instead of roundZoom)
• Full zoom is achievable by un-scaling the tiles at the maxZoom, so you can see the image 1:1
  
• Double-click behaves like scrollwheel zooming and keeps the image anchored on the mouse position.
  
• Keeps the image in the viewport at various zoom levels.

Hacks that I'm not happy with:

• "rounding slop". I had to pad a few operations with .001 degrees to get things to fit. I wish this wasn't the case
• Pixel gap correction: I'm rounding up the tile size to eliminate tile gaps in Safari and Firefox. This seems wrong and makes the initial fade-in animation in Chrome look bad (gutters show). I think someone cleverer than I could do the tile sizing with CSS transformations and get away from width / height?
• The "killer feature" -- stopping a pinch zoom at any point in the scale -- locks up every mobile browser I've tested. Well, Chrome native works a bit, enough to tease me. Anyone know why?

Please poke at the code and let me know what you think. It is ripe for improvement but needs fresh eyes to do it.

Thanks,

Nate

[Nate Solas]

IMO this really shine on mobile (except Chrome 4.0.4!), so here's a link to check that out:

http://thesoli.com/flat_leaflet.html

[H B]

Hello Nate,

I was looking for such a solution for similar problems with flat images and found it here, and Thank You,Your solution is working awesome and I find it a great help.

Except I am facing a small problem, I don't have a proper square dimensional image, but I have an image with res 1984x3062.

gdal2tiles generates square tiles of 256x256 px and it adds transparent sections in the tiles to compensate for the non-square image.

And if such tiles are used in leafletjs with flat_image_zoom.js , the image appears to be placed at a distance from top, giving the illusion that the image isn't centered, this also causes issues in viewing the image.

So I would really love to know if you have a solution for non-squared images.

Thank You

[Nate Solas]

I've done a huge amount of refactoring and improvement on that script. I'll try to send a link to a new repo soon so you can grab the latest. Muuuch cleaner and less hacky.

I believe the script is currently expecting cropped tiles at the edges, instead of filled with transparent (we used jpgs instead of pngs, so no transparency). There's some code in the tilelayer methods that handles the scaling, I think if you just disable that method you should be ok?

Nate

--
 
---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/L4WRlqbvlzU/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.
 
 

[H B]

Yes , It would be wonderful if you would provided with the new repo, The one I have is from your demo, and I will take a look into the code and see what I can do for the scaling issue for my rectangular images.

Thanks once again !

[Danny Lewandowski]

Yes! Please post, that would be awesome. 

The rijksmuseum website is using something similar. Is this the same?

https://www.rijksmuseum.nl/en/explore-the-collection/overview/rembrandt-harmensz-van-rijn/objects#/SK-C-597,3

Thank you

[Harold Sikkema]

Nate,

I'd love to see your refactored version. I've been trying to implement an image zoomer as well, a couple of points, I'm hoping to see resolved:

1. I was having some trouble making your code behave nicely with the Leaflet minimap plugin. (it wound up jumping around on the zoom levels unexpectedly) ... hopefully the new version doesn't suffer in that way?

2. Can you recommend a way to adapt this such that a given image is expanded to fill (rather than shrunk to fit) into the viewport? This is how it's done (quite beautifully) on the Dutch site, http://www.rijksmuseum.nl, as mentioned by Danny Lewandowski.

Many thanks for what you've already shared, it has been super helpful.

Best,

Harold

On Monday, May 13, 2013 10:40:30 AM UTC-4, Nate Solas wrote:

[Hui Chen]

 what software you used to generate tiles, which one i use will fill blank image

在 2013年2月1日星期五UTC+8上午6时22分20秒，Nate Solas写道：

[philippe von hellberg]

Hi Nate,

Any chance to see the refactored version?

Thank you

Philipp