Add option to add fullscreen button to map

  • ouagadougou317

    (@ouagadougou317)


    5 years ago

    Leaflet offers a very easy way to integrate a fullscreen toggle. It is normally shows right below the two zoom buttons. If doing this with html+css+js, we need to include the additional css and js in the <head> of the page:

    
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>
<script src="https://unpkg.com/[email protected]/Control.FullScreen.js" crossorigin=""></script>

    Then, the html for the map could look like this (the only interesting addition is the parameter {fullscreenControl: true}):

    
<meta id="mapPopupEnable" content="false"/>
<meta id="mapPopupText" content="Label bla bla"/>
<div id="mapid">
		<script>
				var popupEnabled = document.getElementById('mapPopupEnable').getAttribute("content");
				var popupText = document.getElementById('mapPopupText').getAttribute("content");
				var map = L.map('mapid', {fullscreenControl: true}).setView([50.81483, 9.49706], 12);
				L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
				    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
				}).addTo(map);
				if (popupEnabled == "true") {
				  L.marker([50.81483, 9.49706]).addTo(map).bindPopup(popupText).openPopup();
				} else {
				  L.marker([50.81483, 9.49706]).addTo(map);
				}
		</script>
</div>

    Do you think you can add this option with a simple checkbox on the admin interface?

    —–

    Another thing I would appreciate a lot would be a way to show the leaflet section in the backend only to the admins or to specific users. I there an easy trick for this?

    —–

    Anyway, thank you for packing leaflet into a easy to use plugin!

    • This topic was modified 5 years ago by ouagadougou317.
    • This topic was modified 5 years ago by ouagadougou317. Reason: did 3 backticks for code block instead of only one - habit from github, sorry
Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Add option to add fullscreen button to map’ is closed to new replies.