Empty Map
-
I have following issue. I have a very simple theme (minimal) and try to add a map.
I add this shortcut to a page[leaflet-map lat=34.131342635014924 lng=-63.457031250000014 zoom=2]
It tries and generats following html:
<div class="entry-content" wfd-id="0">int(1) <p>Test</p> <div id="leaflet-map-1" class="leaflet-map" style="height:250px; width:100%;" wfd-id="1"></div> <script> window.WPLeafletMapPlugin = window.WPLeafletMapPlugin || []; window.WPLeafletMapPlugin.push(function () { var baseUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', base = (!baseUrl && window.MQ) ? MQ.mapLayer() : L.tileLayer(baseUrl, { subdomains: 'abc' }), options = L.Util.extend({}, { maxZoom: 20, minZoom: 0, layers: [base], zoomControl: 0, scrollWheelZoom: 0, doubleClickZoom: 0, attributionControl: false }, {}), map = L.map('leaflet-map-1', options) .setView([34.131342635014924,-63.457031250000014],2); if (0) { map._shouldFitBounds = true; } var attControl = L.control.attribution({prefix:false}).addTo(map); attControl.addAttribution('<a href="http://leafletjs.com" title="Eine Javascript-Bibliothek für interaktive Karten">Leaflet</a>'); attControl.addAttribution('\r\n© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende'); window.WPLeafletMapPlugin.maps.push(map); }); // end add </script> </div>This part that generat leaflet-pane goes missing:
<div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);" wfd-id="41"><div class="leaflet-pane leaflet-tile-pane" wfd-id="48"><div class="leaflet-layer " style="z-index: 1; opacity: 1;" wfd-id="49"><div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 18; transform: translate3d(0px, 0px, 0px) scale(1);" wfd-id="50"><img alt="" role="presentation" src="https://c.tile.openstreetmap.org/2/1/1.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(390px, -28px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://a.tile.openstreetmap.org/2/1/2.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(390px, 228px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://b.tile.openstreetmap.org/2/0/1.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(134px, -28px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://a.tile.openstreetmap.org/2/2/1.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(646px, -28px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://c.tile.openstreetmap.org/2/0/2.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(134px, 228px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://b.tile.openstreetmap.org/2/2/2.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(646px, 228px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://b.tile.openstreetmap.org/2/3/1.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-122px, -28px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://b.tile.openstreetmap.org/2/3/1.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(902px, -28px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://c.tile.openstreetmap.org/2/3/2.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-122px, 228px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://c.tile.openstreetmap.org/2/3/2.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(902px, 228px, 0px); opacity: 1;"></div></div></div><div class="leaflet-pane leaflet-shadow-pane" wfd-id="47"></div><div class="leaflet-pane leaflet-overlay-pane" wfd-id="46"></div><div class="leaflet-pane leaflet-marker-pane" wfd-id="45"></div><div class="leaflet-pane leaflet-tooltip-pane" wfd-id="44"></div><div class="leaflet-pane leaflet-popup-pane" wfd-id="43"></div><div class="leaflet-proxy leaflet-zoom-animated" style="transform: translate3d(331.5px, 408.605px, 0px) scale(2);" wfd-id="42"></div></div><div class="leaflet-control-container" wfd-id="35"><div class="leaflet-top leaflet-left" wfd-id="40"></div><div class="leaflet-top leaflet-right" wfd-id="39"></div><div class="leaflet-bottom leaflet-left" wfd-id="38"></div><div class="leaflet-bottom leaflet-right" wfd-id="36"><div class="leaflet-control-attribution leaflet-control" wfd-id="37"><a href="http://leafletjs.com" title="Eine Javascript-Bibliothek für interaktive Karten">Leaflet</a>, © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende</div></div></div>I think it is a JavaScript issue, because if i set alerts I can see that error must be here. In the “Twenty Nineteen”-Theme the alerts will shown up in my theme suddely no alert pops up.
var baseUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', base = (!baseUrl && window.MQ) ? MQ.mapLayer() : L.tileLayer(baseUrl, { subdomains: 'abc' }), options = L.Util.extend({}, { maxZoom: 20, minZoom: 0, layers: [base], zoomControl: 0, scrollWheelZoom: 0, doubleClickZoom: 0, attributionControl: false }, {}), map = L.map('leaflet-map-1', options) .setView([34.131342635014924,-63.457031250000014],2);My question is how I must configurate my theme that the map will shown well?
The topic ‘Empty Map’ is closed to new replies.
