Leaflet JS map doesn't shows ups in the Front End: Uncaught No such variant of OpenStreetMap (Mapnik)
scarlet959 opened this issue · comments
Leaflet JS map doesn't shows map on the front-end though in the back-end its displayed correctly.
Here are the plugin version i am having:
- ACF OpenStreetMap Field v1.3.1
- Advanced Custom Fields PRO 5.9.3
ACF OpenStreetMap Field Settings in Advanced Custom Fields PRO:
Output when selected "Raw data":
Output when selected "Iframe":
Output when selected Leaflet JS:
Code:
<div class="leaflet-map leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" data-height="400" data-map="leaflet" data-map-lng="77.1998978" data-map-lat="9.5404891" data-map-zoom="12" data-map-layers="["OpenStreetMap.Mapnik"]" data-map-markers="[{"label":"Periyar Lake, Idukki, Kerala India","default_label":"Idukki, Kerala India","lat":9.5406505,"lng":77.1998853}]" tabindex="0" style="height: 400px; position: relative;"><div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"><div class="leaflet-pane leaflet-tile-pane"></div><div class="leaflet-pane leaflet-shadow-pane"></div><div class="leaflet-pane leaflet-overlay-pane"></div><div class="leaflet-pane leaflet-marker-pane"></div><div class="leaflet-pane leaflet-tooltip-pane"></div><div class="leaflet-pane leaflet-popup-pane"></div><div class="leaflet-proxy leaflet-zoom-animated"></div></div><div class="leaflet-control-container"><div class="leaflet-top leaflet-left"><div class="leaflet-control-zoom leaflet-bar leaflet-control"><a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+</a><a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out">−</a></div></div><div class="leaflet-top leaflet-right"></div><div class="leaflet-bottom leaflet-left"></div><div class="leaflet-bottom leaflet-right"><div class="leaflet-control-attribution leaflet-control"><a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a></div></div></div></div>
Console Error: jquery.min.js?ver=3.5.1:2 Uncaught No such variant of OpenStreetMap (Mapnik)
PS: I have disabled all Map tile provides except OSM and Mapbox in the settings page of ACF OpenStreetMap Field. The "test" link adjacent to OSM and Mapbox are also displaying the map without any issues in the left hand side.
Also the .js file reference in the page:
Hi @scarlet959
thanks for the report!
Disabling OSM variants finally pointed my corona-fatigue mind into the right direction.
After disabling all variants I was finally able to reproduce it:
I'll come up with an update a bit later today.