Static Image Map

DManIT
(@dmed)

7 years, 1 month ago

I’ve successfully added a static map of an image but when using zooming on a smaller file, the image is grainy. I tried adding a higher resolution image but the larger image loads zoomed in too much. Is there some way to set the initial zoom level to zoom out further? Below is the shortcode I’m using:

[leaflet-image source=”http://lvmr.designwebstudios.com/wp-content/uploads/2019/04/[email protected]” zoom=5 zoomcontrol height=600 width=100%]

Any help is appreciated!

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter DManIT
(@dmed)

7 years ago

I’ve switched to using a a PDF viewer but I prefer the LeafLet image option. Any suggestions to reduce the initial zoom level on a larger image file?

Plugin Author bozdoz
(@bozdoz)

7 years ago

I don’t recommend using leaflet-image at all. Its use depends so heavily on customizations that it’s difficult to work with (i.e. difficult to add markers by x/y coordinates).

See: https://github.com/bozdoz/wp-plugin-leaflet-map#leaflet-image

With the note:

TBH, it’s a huge mess, and probably shouldn’t be used.

That said, I have had some luck setting both the min_zoom and the max_zoom to the zoom:

[leaflet-image zoom=5 min_zoom=5 max_zoom=5]

or, perhaps better, try zoom 0, or maybe zoom 1:

[leaflet-image zoom=0 min_zoom=0 max_zoom=0]
Plugin Author bozdoz
(@bozdoz)

7 years ago
If you have time to adjust some of the source code, I’ve had some luck with this:

[leaflet-image source=http://lvmr.designwebstudios.com/wp-content/uploads/2019/04/[email protected] zoom=1 height=600 width=100%]

And adjust line 74 in shortcodes/class.image-shortcode.php to be:

projected_zoom = zoom + 2.2,

seen here: https://github.com/bozdoz/wp-plugin-leaflet-map/blob/master/shortcodes/class.image-shortcode.php#L74
- This reply was modified 7 years ago by bozdoz.
Plugin Author bozdoz
(@bozdoz)

7 years ago

Looks like a few things could change to improve this. Check out this example: https://codepen.io/bozdoz/pen/GLbmOK?editors=0010

Notable changes would be:
1. add map.fitBounds(bounds) after setMaxBounds
2. zoom must be higher than 1; maybe higher than 4, depending on size of image I imagine
3. adding fractional zoomSnap and zoomDelta options to the map helps the map fit the image more exactly

Try tweaking the codepen and see for yourself! Maybe you could tweak the source code of the plugin and produce a more stable leaflet-image shortcode! 🙂 Good luck!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Static Image Map’ is closed to new replies.

Tags