Title: Empty Map
Last modified: June 14, 2019

---

# Empty Map

 *  [Collie-IT, Anne K. Frey](https://wordpress.org/support/users/collieit/)
 * (@collieit)
 * [6 years, 10 months ago](https://wordpress.org/support/topic/emty-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?
    -  This topic was modified 6 years, 10 months ago by [Jan Dembowski](https://wordpress.org/support/users/jdembowski/).
    -  This topic was modified 6 years, 10 months ago by [Collie-IT, Anne K. Frey](https://wordpress.org/support/users/collieit/).

The topic ‘Empty Map’ is closed to new replies.

 * ![](https://ps.w.org/leaflet-map/assets/icon-256x256.png?rev=1693083)
 * [Leaflet Map](https://wordpress.org/plugins/leaflet-map/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/leaflet-map/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/leaflet-map/)
 * [Active Topics](https://wordpress.org/support/plugin/leaflet-map/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/leaflet-map/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/leaflet-map/reviews/)

 * 0 replies
 * 1 participant
 * Last activity: [6 years, 10 months ago](https://wordpress.org/support/topic/emty-map/)
 * Status: not resolved