1

What I have done after export of the qgis2web leaflet files:

Copied the two css and js files to the folders.

Include the plugin code within the index.html file:

<link rel="stylesheet" href="css/Control.FullScreen.css" />
<script src="js/Control.FullScreen.js"></script>

to the other css/js link files (head/body)

Also insert to the index.html:

var map = new L.Map('map', {
  fullscreenControl: true,
  fullscreenControlOptions: {
    position: 'topleft'
  }
});

at the end, before

</script>
    </body>
</html>

Result: I see the correct leaflet map without this plugin.

I have used the code from https://github.com/brunob/leaflet.fullscreen

What is wrong?

EDIT: one error: enter image description here

The whole code of the index.html:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="stylesheet" href="css/leaflet.css"><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"><link rel="stylesheet" href="css/L.Control.Locate.min.css">
        <link rel="stylesheet" href="css/qgis2web.css">
        <link rel="stylesheet" href="css/leaflet-measure.css">
        <link rel="stylesheet" href="css/Leaflet.Dialog.css">
        <link rel="stylesheet" href="css/Control.FullScreen.css" />
        <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        </style>
        <title></title>
    </head>
    <body>
        <div id="map">
        </div>
        <script src="js/qgis2web_expressions.js"></script>
        <script src="js/leaflet-src.js"></script><script src="js/L.Control.Locate.min.js"></script>
        <script src="js/leaflet.rotatedMarker.js"></script>
        <script src="js/leaflet.pattern.js"></script>
        <script src="js/leaflet-hash.js"></script>
        <script src="js/Autolinker.min.js"></script>
        <script src="js/rbush.min.js"></script>
        <script src="js/labelgun.min.js"></script>
        <script src="js/labels.js"></script>
        <script src="js/leaflet-measure.js"></script>
        <script src="js/Leaflet.Dialog.js"></script>
        <script src="js/Control.FullScreen.js"></script>
        <script src="data/vomRathausplatz10minzuFu_0.js"></script>
        <script src="data/StraenbahnHaltestellen_1.js"></script>
        <script src="data/Auffhrungsorte_2.js"></script>
        <script src="data/Veranstaltungsortbersicht_3.js"></script>
        <script src="data/Theatergruppen_4.js"></script>

        <script>



        var map = L.map('map', {
            zoomControl:true, maxZoom:18, minZoom:13
        }).fitBounds([[49.4760004288,8.4330598115],[49.4883618774,8.45875065318]]);

        var hash = new L.Hash(map);
        map.attributionControl.addAttribution('<a href="https://github.com/tomchadwin/qgis2web" target="_blank">qgis2web</a>');
        L.control.locate().addTo(map);
        var measureControl = new L.Control.Measure({
            primaryLengthUnit: 'meters',
            secondaryLengthUnit: 'kilometers',
            primaryAreaUnit: 'sqmeters',
            secondaryAreaUnit: 'hectares'
        });



        measureControl.addTo(map);
        var bounds_group = new L.featureGroup([]);
        var basemap0 = L.tileLayer('http://a.tile.stamen.com/watercolor/{z}/{x}/{y}.png', {
            attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>,<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash;Map data: &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
            maxZoom: 18
        });





        basemap0.addTo(map);
        function setBounds() {
        }
        function pop_vomRathausplatz10minzuFu_0(feature, layer) {
        }

        function style_vomRathausplatz10minzuFu_0_0() {
            return {
                pane: 'pane_vomRathausplatz10minzuFu_0',
                opacity: 1,
                color: 'rgba(199,77,39,0.12)',
                dashArray: '',
                lineCap: 'butt',
                lineJoin: 'miter',
                weight: 8.0, 
                fill: true,
                fillOpacity: 1,
                fillColor: 'rgba(0,2,1,0.12)',
            }
        }
        map.createPane('pane_vomRathausplatz10minzuFu_0');
        map.getPane('pane_vomRathausplatz10minzuFu_0').style.zIndex = 400;
        map.getPane('pane_vomRathausplatz10minzuFu_0').style['mix-blend-mode'] = 'normal';
        var layer_vomRathausplatz10minzuFu_0 = new L.geoJson(json_vomRathausplatz10minzuFu_0, {
            attribution: '<a href=""></a>',
            pane: 'pane_vomRathausplatz10minzuFu_0',
            onEachFeature: pop_vomRathausplatz10minzuFu_0,
            style: style_vomRathausplatz10minzuFu_0_0,
        });
        bounds_group.addLayer(layer_vomRathausplatz10minzuFu_0);
        function pop_StraenbahnHaltestellen_1(feature, layer) {
            var popupContent = '<table>\
                    <tr>\
                        <td colspan="2">' + (feature.properties['name'] !== null ? Autolinker.link(String(feature.properties['name'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <td colspan="2">' + (feature.properties['wheelchair'] !== null ? Autolinker.link(String(feature.properties['wheelchair'])) : '') + '</td>\
                    </tr>\
                </table>';
            layer.bindPopup(popupContent, {maxHeight: 400});
        }

        function style_StraenbahnHaltestellen_1_0() {
            return {
                pane: 'pane_StraenbahnHaltestellen_1',
        rotationAngle: 0.0,
        rotationOrigin: 'center center',
        icon: L.icon({
            iconUrl: 'markers/34-Hotel-Icon-Near-Transit-Stop.svg',
            iconSize: [28.88, 28.88]
        }),
            }
        }
        map.createPane('pane_StraenbahnHaltestellen_1');
        map.getPane('pane_StraenbahnHaltestellen_1').style.zIndex = 401;
        map.getPane('pane_StraenbahnHaltestellen_1').style['mix-blend-mode'] = 'normal';
        var layer_StraenbahnHaltestellen_1 = new L.geoJson(json_StraenbahnHaltestellen_1, {
            attribution: '<a href=""></a>',
            pane: 'pane_StraenbahnHaltestellen_1',
            onEachFeature: pop_StraenbahnHaltestellen_1,
            pointToLayer: function (feature, latlng) {
                var context = {
                    feature: feature,
                    variables: {}
                };
                return L.marker(latlng, style_StraenbahnHaltestellen_1_0(feature));
            },
        });
        bounds_group.addLayer(layer_StraenbahnHaltestellen_1);
        map.addLayer(layer_StraenbahnHaltestellen_1);
        function pop_Auffhrungsorte_2(feature, layer) {
            var popupContent = '<table>\
                    <tr>\
                        <td colspan="2">' + (feature.properties['fid'] !== null ? Autolinker.link(String(feature.properties['fid'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <td colspan="2">' + (feature.properties['Platz/Ort'] !== null ? Autolinker.link(String(feature.properties['Platz/Ort'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <td colspan="2">' + (feature.properties['Aufführung'] !== null ? Autolinker.link(String(feature.properties['Aufführung'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <td colspan="2">' + (feature.properties['Veranstalt'] !== null ? Autolinker.link(String(feature.properties['Veranstalt'])) : '') + '</td>\
                    </tr>\
                </table>';
            layer.bindPopup(popupContent, {maxHeight: 400});
        }

        function style_Auffhrungsorte_2_0() {
            return {
                pane: 'pane_Auffhrungsorte_2',
                radius: 0.0,
                opacity: 1,
                color: 'rgba(0,0,0,1.0)',
                dashArray: '',
                lineCap: 'butt',
                lineJoin: 'miter',
                weight: 1,
                fill: true,
                fillOpacity: 1,
                fillColor: 'rgba(180,145,255,1.0)',
            }
        }
        map.createPane('pane_Auffhrungsorte_2');
        map.getPane('pane_Auffhrungsorte_2').style.zIndex = 402;
        map.getPane('pane_Auffhrungsorte_2').style['mix-blend-mode'] = 'normal';
        var layer_Auffhrungsorte_2 = new L.geoJson(json_Auffhrungsorte_2, {
            attribution: '<a href=""></a>',
            pane: 'pane_Auffhrungsorte_2',
            onEachFeature: pop_Auffhrungsorte_2,
            pointToLayer: function (feature, latlng) {
                var context = {
                    feature: feature,
                    variables: {}
                };
                return L.circleMarker(latlng, style_Auffhrungsorte_2_0(feature));
            },
        });
        bounds_group.addLayer(layer_Auffhrungsorte_2);
        map.addLayer(layer_Auffhrungsorte_2);
        function pop_Veranstaltungsortbersicht_3(feature, layer) {
            var popupContent = '<table>\
                    <tr>\
                        <td colspan="2"><strong>Platz/Ort (real)</strong><br />' + (feature.properties['Platz/Ort (real)'] !== null ? Autolinker.link(String(feature.properties['Platz/Ort (real)'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <td colspan="2"><strong>Aufführungs-Platzname</strong><br />' + (feature.properties['Aufführungs-Platzname'] !== null ? Autolinker.link(String(feature.properties['Aufführungs-Platzname'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <td colspan="2"><strong>Veranstaltungen Tag/Uhrzeit/Theatergruppe</strong><br />' + (feature.properties['Veranstaltungen Tag/Uhrzeit/Theatergruppe'] !== null ? Autolinker.link(String(feature.properties['Veranstaltungen Tag/Uhrzeit/Theatergruppe'])) : '') + '</td>\
                    </tr>\
                </table>';
            layer.bindPopup(popupContent, {maxHeight: 400});
        }

        function style_Veranstaltungsortbersicht_3_0() {
            return {
                pane: 'pane_Veranstaltungsortbersicht_3',
                stroke: false, 
                fill: true,
                fillOpacity: 1,
                fillColor: 'rgba(241,207,55,0.54)',
            }
        }
        map.createPane('pane_Veranstaltungsortbersicht_3');
        map.getPane('pane_Veranstaltungsortbersicht_3').style.zIndex = 403;
        map.getPane('pane_Veranstaltungsortbersicht_3').style['mix-blend-mode'] = 'normal';
        var layer_Veranstaltungsortbersicht_3 = new L.geoJson(json_Veranstaltungsortbersicht_3, {
            attribution: '<a href=""></a>',
            pane: 'pane_Veranstaltungsortbersicht_3',
            onEachFeature: pop_Veranstaltungsortbersicht_3,
            style: style_Veranstaltungsortbersicht_3_0,
        });
        bounds_group.addLayer(layer_Veranstaltungsortbersicht_3);
        map.addLayer(layer_Veranstaltungsortbersicht_3);
        function pop_Theatergruppen_4(feature, layer) {
            var popupContent = '<table>\
                    <tr>\
                        <td colspan="2">' + (feature.properties['fid'] !== null ? Autolinker.link(String(feature.properties['fid'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <td colspan="2">' + (feature.properties['Theatergruppe'] !== null ? Autolinker.link(String(feature.properties['Theatergruppe'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <td colspan="2">' + (feature.properties['Veranstaltungsplatz'] !== null ? Autolinker.link(String(feature.properties['Veranstaltungsplatz'])) : '') + '</td>\
                    </tr>\
                </table>';
            layer.bindPopup(popupContent, {maxHeight: 400});
        }

        function style_Theatergruppen_4_0(feature) {
            switch(String(feature.properties['Veranstaltungsplatz'])) {
                case 'Großes Theater':
                    return {
                pane: 'pane_Theatergruppen_4',
        rotationAngle: 0.0,
        rotationOrigin: 'center center',
        icon: L.icon({
            iconUrl: 'markers/Theatermaske blau.svg',
            iconSize: [11.4, 11.4]
        }),
            }
                    break;
                case 'Tanzboden':
                    return {
                pane: 'pane_Theatergruppen_4',
        rotationAngle: 0.0,
        rotationOrigin: 'center center',
        icon: L.icon({
            iconUrl: 'markers/Theatermaske rot.svg',
            iconSize: [38.0, 38.0]
        }),
            }
                    break;
                case 'Verrückte Fahrbahn':
                    return {
                pane: 'pane_Theatergruppen_4',
        rotationAngle: 0.0,
        rotationOrigin: 'center center',
        icon: L.icon({
            iconUrl: 'markers/Theatermaske.svg',
            iconSize: [38.0, 38.0]
        }),
            }
                    break;
                case 'mehrere Theatergruppen':
                    return {
                pane: 'pane_Theatergruppen_4',
        rotationAngle: 0.0,
        rotationOrigin: 'center center',
        icon: L.icon({
            iconUrl: 'markers/city_large.svg',
            iconSize: [30.4, 30.4]
        }),
            }
                    break;
            }
        }
        map.createPane('pane_Theatergruppen_4');
        map.getPane('pane_Theatergruppen_4').style.zIndex = 404;
        map.getPane('pane_Theatergruppen_4').style['mix-blend-mode'] = 'normal';
        var layer_Theatergruppen_4 = new L.geoJson(json_Theatergruppen_4, {
            attribution: '<a href=""></a>',
            pane: 'pane_Theatergruppen_4',
            onEachFeature: pop_Theatergruppen_4,
            pointToLayer: function (feature, latlng) {
                var context = {
                    feature: feature,
                    variables: {}
                };
                return L.marker(latlng, style_Theatergruppen_4_0(feature));
            },
        });
        bounds_group.addLayer(layer_Theatergruppen_4);
        map.addLayer(layer_Theatergruppen_4);
        var baseMaps = {};
        L.control.layers(baseMaps,{'Theatergruppen<br /><table><tr><td style="text-align: center;"><img src="legend/Theatergruppen_4_GroesTheater0.png" /></td><td>Großes Theater</td></tr><tr><td style="text-align: center;"><img src="legend/Theatergruppen_4_Tanzboden1.png" /></td><td>Tanzboden</td></tr><tr><td style="text-align: center;"><img src="legend/Theatergruppen_4_VerrckteFahrbahn2.png" /></td><td>Verrückte Fahrbahn</td></tr><tr><td style="text-align: center;"><img src="legend/Theatergruppen_4_mehrereTheatergruppen3.png" /></td><td>mehrere Theatergruppen</td></tr></table>': layer_Theatergruppen_4,'<img src="legend/Veranstaltungsortbersicht_3.png" /> Veranstaltungsort Übersicht': layer_Veranstaltungsortbersicht_3,'<img src="legend/Auffhrungsorte_2.png" /> Aufführungsorte': layer_Auffhrungsorte_2,'<img src="legend/StraenbahnHaltestellen_1.png" /> Straßenbahn Haltestellen': layer_StraenbahnHaltestellen_1,'<img src="legend/vomRathausplatz10minzuFu_0.png" /> vom Rathausplatz 10min zu Fuß': layer_vomRathausplatz10minzuFu_0,},{collapsed:false}).addTo(map);
        setBounds();
        var i = 0;
        layer_Auffhrungsorte_2.eachLayer(function(layer) {
            var context = {
                feature: layer.feature,
                variables: {}
            };
            layer.bindTooltip((layer.feature.properties['Aufführung'] !== null?String('<div style="color: #ffffff; font-size: 11pt; background-color: #000201; border: 0px solid #808080; padding: 0px 0px; font-family: \'MS Shell Dlg 2\', sans-serif;">' + layer.feature.properties['Aufführung']) + '</div>':''), {permanent: true, offset: [-0, -16], className: 'css_Auffhrungsorte_2'});
            labels.push(layer);
            totalMarkers += 1;
              layer.added = true;
              addLabel(layer, i);
              i++;
        });
        resetLabels([layer_Auffhrungsorte_2]);
        map.on("zoomend", function(){
            resetLabels([layer_Auffhrungsorte_2]);
        });
        map.on("layeradd", function(){
            resetLabels([layer_Auffhrungsorte_2]);
        });
        map.on("layerremove", function(){
            resetLabels([layer_Auffhrungsorte_2]);
        });


        var dialog = L.control.dialog({size: [200, 150]})
          .setContent("<p>Schön, dass du hier bist!</p>")
          .addTo(map);

          var map = new L.Map('map', {
  fullscreenControl: true,
  fullscreenControlOptions: {
    position: 'topleft'
  }
});

        </script>
    </body>
</html>
  • Without seeing the rest of your code it's impossible to say what is wrong. You write that you inserted code to create the map. How was it created before? – TomazicM Sep 30 at 14:54
  • Above the whole code. The code was created from the qgis2web plugin. After export I can change the code. The plugin create a fully website as a leaflet map and the qgis layers. – Jürgen Sep 30 at 16:41
  • Please check your browser's Developer Console for any error messages. – Stefan Sep 30 at 16:49
  • One error. See above. – Jürgen Sep 30 at 17:07
2

As the error tells you, you are trying to initialize map twice.

Remove your second initialization

var map = new L.Map('map', {
  fullscreenControl: true,
  fullscreenControlOptions: {
    position: 'topleft'
  }
});

and modify original map initialization with Lefalet.fullscreen plugin options:

var map = L.map('map', {
  zoomControl: true,
  maxZoom: 18,
  minZoom: 13,
  fullscreenControl: true,
  fullscreenControlOptions: {
    position: 'topleft'
  }
}).fitBounds([[49.4760004288,8.4330598115],[49.4883618774,8.45875065318]]);
  • Yes. Thank you very much. Only thing: I have the button, but without the graphic in it. I have png graphic symbols and I have an image folder within the css folder with this copied symbols, but I can not see them. – Jürgen Sep 30 at 19:07
  • Have found the solution: I have insert this code in my index.html: <style type="text/css"> .fullscreen-icon { background-image: url(icon-fullscreen.png); } .leaflet-retina .fullscreen-icon { background-image: url(icon-fullscreen-2x.png); background-size: 26px 26px; } </style> – Jürgen Sep 30 at 20:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.