Zoomed in still gives grey screen

Any answers as to why this is happening ?

Nope. I cannot replicate the problem. Have you tried it without Elementor already?

Tried without elementor, with default formatting and twenty twelve theme still get grey screens at top two zoom factors (18 & 19)

Note I appear to not be the only person with this issue as reported earlier in this thread by iamthewebb

• This reply was modified 5 years, 6 months ago by David 279.

Right then, I have installed this on a different website just to see if it was Elementor playing nasty tricks and it’s not https://www.alexanderagricola.co.uk/locations/test-location/ this is a new install of events manager and a new install of your plugin and it will not go to a higher magnification than 17 or to be more precise it will not load the map tiles at a higher magnification than 17, the frame and icon etc are all present but the tiles will not load.

So a couple of observations I’ve left the test page setup so that it starts at zoom 19, firstly no tiles load until you get to zoom 17, when you do get to zoom level 17 it’s opening https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/18/ (or whichever map server you are using) and then it loads up a folder one step higher than the magnification shown on screen as you go down, I think somewhere you are calling the files incorrectly, looking at the examples elsewhere, such as here https://leafletjs.com/examples/quick-start/ the tiles should be called at the matching zoom level so /18/ at zoom 18 you are currently calling them /18/ at zoom 17 and this is breaking the system – Also from having a play here https://plnkr.co/edit/z1p9x05vAv4h1sJJrDQC?p=preview MaxNativeZoom is important, you can have a MaxZoom greater than MaxNativeZoom (though quite honestly anything much higher than 22 is pointless but if your MaxNativeZoom is greater than the magnification the subdirectories go up to e.g if the directory goes to 19 and you set MaxNativeZoom to 20 it will grey screen

Anyway that is why it’s greying out, but I’m not up to looking through your code to be able to work out where the error has crept in, if I were to guess however I’d say that somewhere you have linked MaxNativeZoom to the Value of Zoom and that for whatever reason your value for zoom is actually giving out a value 1 higher than it’s displaying

Thank you for testing it. However, you make it sound like every one has this problem, while that is clearly not the case! Again, my live websites as well as single and multisite localhost installs do not have these issues, nor (most) of the other 500+ users of this plugin.

MaxNativeZoom is nowhere in the default Leaflet docs. So, do not attack me for not using that. Also, the maximum is set to 19, so you getting level 22 baffles me hugely.

Sorry Patrick you misunderstood, or maybe I didn’t explain it well, I meant the maximum zoom possible with leaflet is something near 36 but in practical terms anything higher than 22 is silly, not that your plugin goes up to 22, I was experimenting with the code on the https://plnkr.co/edit/z1p9x05vAv4h1sJJrDQC?p=preview site earlier trying to understand the issue

I only found out about MaxNativeZoom when I was trying to find out why I was having problems and using google search, I agree it’s not easy to find in the docs but it’s here https://leafletjs.com/reference-1.5.0.html#gridlayer though it’s not a very easy to understand explanation.

This is not meant as a moan I really like your plugin, I was just trying to work out why I was getting the grey screens, I’m not a programmer, I can just about manage a bit of CSS and if someone like yourself points me in the right direction I can almost understand PHP, js is beyond me though, I am fairly good at finding faults and working out why they are likely to be occurring, I have a good analytical brain, what I don’t understand is why only a few people are seeing this issue, that’s why I tried installing on a plain old boring site with no extra code, I figured if it was the site then I would get a different result but I didn’t, I also tried several browsers Chrome(my default) firefox, edge and even i.e because I know that sometimes Browsers can make a difference. So I then tried to work out what was going on, I used chrome developer tools to see what was loading and when and discovered that none of the map tiles load until after I drop under 18x magnification, then I looked at other sample sites and worked out that for some reason your plugin appears to be loading the map tiles at the wrong magnification. i.e loading the 18 magnification tiles when zoom is set to 17, so I then wrote everything up, because in the past you have been so helpful and I wanted to try and work out why it was not working for me as it should.

Anyway it wasn’t meant detrimentally I think it’s a brilliant plugin I just want to get it to work for me

I checked, the loaded map tiles are correct for the zoom level. Check your browser sources! Level 18 loads tiles in external url folder /18/.
So your previous statement seems to be incorrect.

It looks like the original Leaflet script simply stops calculating the file names on level 19. Nothing is even attempted to be loaded – no changes in the console or resources. Yet, if I manually calculate the correct file name, the image is available on the external server.

https://maps.wikimedia.org/osm-intl/19/259742/176115.png

Since I have changed absolutely nothing in the original leafet.js this appears to an issue in their script. I will post a request there.

• This reply was modified 5 years, 6 months ago by Stonehenge Creations.

maximum zoom possible with leaflet is something near 36

UNTRUE! The max zoom is determined by the Map Tile server. Change the URL I gave you from /19/ to /20/ to see that in action.
Please try to refrain yourself from making statements on wrong bases.

You can also decide to simply set the max zoom to 18. Problem solved. ??

Hi Patrick sorry I might be misunderstanding this

Are you saying that on https://www.alexanderagricola.co.uk/locations/test-location/ it loads correctly for you ?

Or are you saying that it doesn’t because leaflet stops calculating the names ? I assume this was why they had the MaxNativeZoom setting, that way it will calculate the names up until that point and when it reaches the maximum then it just scales up the tiled image (which is why it gets pretty rough very quickly if you have no upper magnification limit)

With regard to zoom it seems to vary and yes it will depend on the maximum file resolution so using the test here https://plnkr.co/edit/z1p9x05vAv4h1sJJrDQC?p=preview which uses the standard open streetmaps tiles I can use a maximum value of 19 for the MaxNativeZoom setting and zoom up to 35X but if I change MaxNativeZoom to 18 it will only allow me to zoom to 33x although that seems to vary slightly, I’m not worried about silly zoom levels where everything is out of focus anyway it was more curiosity as to how it worked.

That I have worked out, everywhere is tiled, the larger the magnification the smaller area each tile covers, thus the different folders, once you reach the maximum magnification for the folders then it will still let you go up but it does so by just scaling the highest resolution image it has. So I understand how it works but I still can’t write the code to make it work LOL

OK I’m still not sure why it’s happening but by comparing my sites map with the default open street maps map of the same location I know what is happening – And yes it makes no sense :

The map displayed on screen is one level higher than what the screen display says, i.e if the screen says a zoom of 17 it’s actually displaying the zoom of 18, also it’s never loading the level 19 tiles I’ve worked this out by seeing what files are actually loaded and when and comparing them to the OSM page https://www.openstreetmap.org/#map=16/46.6036/7.9174

But to make matters more complicated the tiles are displayed at the zoom displayed magnification, that is to say that the level 18 tile features are displayed on a level 17 screen which is why all the text appears so tiny

So hear is the open street map image with a zoom of 17 https://www.downhillonly.com/wp-content/uploads/2019/09/osm-zoom-17.jpg

And here is the same location from the website with a zoom of 17 https://www.downhillonly.com/wp-content/uploads/2019/09/website-zoom-17.jpg

note how despite the two lining up exactly for the landscape features because the image from my website uses the tiles from zoom 18 to display at zoom 17 all the text is about half the size

Fixed it sort of

class-maps.php

I added the following two lines in the L.tileLayer sections just above }).addTo(thisMap);

maxNativeZoom: 18,
maxZoom: 20,

It’s not perfect as it won’t work with the Hydda maps mainly because for some reason despite having maxNativeZoom set to 18 it’s still loading one level higher, fortunately thats fine for me

I also changed the mouse scroll zoom from 0.25 to 1 just so I don’t get the 5 showing under the zoom control box when it’s .25 or .75

Thanks for the code David, that seems to have stopped it just showing grey when zooming in to 18 and 19 for me.

I’m not sure it works for all maps but for single location it works for me, I can’t see why it’s loading the maps one layer earlier than the magnification suggests it should and I don’t know enough about coding to be able to adjust for maps that have a lower (or higher) maxnativezoom

I mean no disrespect to Patrick by doing this, I would never have been able to do what he’s done and with this plugin, I freely admit to probably at best understanding 10% of how it works, which is probably why I can’t do a better fix than the above, but I’m glad it works for other people.

Just tested the latest release and this is now fixed. Thanks Patrick!