singletemplate.html

<script>
    let zoom = 12; // Zoomstufe der Karte (Zoom level)
    let center = [[[Koordinate]]]; // Koordinate zum Ausrichten der Karte (Coordinate)
    </script>
<style>
    #map { width:100%;max-width:400px;aspect-ratio: 4/5;}
  </style>
 <h3 style="font-size: xx-large;padding-bottom:10px;">[[Beschreibung]]</h3>
 <table class="table table-bordered table-striped" style="max-width:1200px;width:100%">
 <tr><th>Autor</th><td>##userpicture## ##user##</td></tr>
 <tr><th>Foto</th><td>[[Foto]]</td></tr>
 <tr><th>Karte</th><td style="min-width: 400px;"> <div id="map" style="background-color:#f5f5f5;padding: 4px;"><span id="hinweis"><h4>Hinweis</h4>
    Diese Anwendung lädt Kartenmaterial von <a href="https://www.fossgis.de/datenschutzerkl%C3%A4rung/">OpenStreetMap</a>, <a href="https://opentopomap.org">OpenTopoMap</a>, <a href="https://memomaps.de/">memomaps.de</a>, <a href="https://arcgisonline.com">arcgisonline.com</a><br><br><input type="button" value="Ja, das ist in Ordnung" id="btn1" class="btn-primary"></input></span></div></td></tr>
 <tr><th>Beschreibung</th><td>[[Textfeld]]</td></tr>
 <tbody>
 </table>
 
 
 
    <script>
    window.addEventListener("load", function() 
    {
    let schaltflaeche1 = document.getElementById("btn1");
    schaltflaeche1.addEventListener("click", function() 
    {
    sessionStorage.setItem("mapalert", "ok");
    document.getElementById("hinweis").style.display = "none";
    var topo = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
    maxZoom: 17,
    attribution: 'Map data: &copy; <a href="https://www.fossgis.de/datenschutzerkl%C3%A4rung/">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
    });
    var WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
    });
    var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
    });
    
    var OPNV = L.tileLayer('https://tileserver.memomaps.de/tilegen/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map <a href="https://memomaps.de/">memomaps.de</a> <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });
    
    var map = L.map('map', {
    center: center,
    zoom: zoom,
    layers: [osm, topo, WorldImagery, OPNV]
    });
    
    var baseMaps = {
    "Topographisch": topo,
    "Luftbild":  WorldImagery,
    "ÖPNV": OPNV,
    "OpenStreetMap": osm,
    };
    var layerControl = L.control.layers(baseMaps).addTo(map);

    var greenIcon[[ID]] = L.icon({
    iconUrl: 'data:image/svg+xml,%3Csvg viewBox="0 0 1400 1700" xmlns="http://www.w3.org/2000/svg" width="25" height="41"%3E%3Cg fill-rule="evenodd"%3E%3Cpath d="m730.94 1839.6c-38.766-190.3-107.12-348.67-189.9-495.44-61.407-108.87-132.54-209.36-198.36-314.94-21.972-35.243-40.934-72.476-62.047-109.05-42.216-73.137-76.444-157.94-74.269-267.93 2.125-107.47 33.208-193.68 78.03-264.17 73.719-115.94 197.2-210.99 362.88-235.97 135.47-20.424 262.48 14.082 352.54 66.748 73.596 43.038 130.6 100.53 173.92 168.28 45.22 70.716 76.36 154.26 78.97 263.23 1.3401 55.83-7.7999 107.53-20.68 150.42-13.03 43.409-33.99 79.695-52.64 118.45-36.41 75.659-82.05 144.98-127.86 214.34-136.44 206.61-264.5 417.31-320.58 706.03z" fill="[[CSS-Farbe]]" stroke-miterlimit="10" stroke-width="37"/%3E%3Ccircle cx="729.55" cy="651.05" r="183.33" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E',
    shadowUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAApCAQAAAACach9AAACMUlEQVR4Ae3ShY7jQBAE0Aoz/f9/HTMzhg1zrdKUrJbdx+Kd2nD8VNudfsL/Th///dyQN2TH6f3y/BGpC379rV+S+qqetBOxImNQXL8JCAr2V4iMQXHGNJxeCfZXhSRBcQMfvkOWUdtfzlLgAENmZDcmo2TVmt8OSM2eXxBp3DjHSMFutqS7SbmemzBiR+xpKCNUIRkdkkYxhAkyGoBvyQFEJEefwSmmvBfJuJ6aKqKWnAkvGZOaZXTUgFqYULWNSHUckZuR1HIIimUExutRxwzOLROIG4vKmCKQt364mIlhSyzAf1m9lHZHJZrlAOMMztRRiKimp/rpdJDc9Awry5xTZCte7FHtuS8wJgeYGrex28xNTd086Dik7vUMscQOa8y4DoGtCCSkAKlNwpgNtphjrC6MIHUkR6YWxxs6Sc5xqn222mmCRFzIt8lEdKx+ikCtg91qS2WpwVfBelJCiQJwvzixfI9cxZQWgiSJelKnwBElKYtDOb2MFbhmUigbReQBV0Cg4+qMXSxXSyGUn4UbF8l+7qdSGnTC0XLCmahIgUHLhLOhpVCtw4CzYXvLQWQbJNmxoCsOKAxSgBJno75avolkRw8iIAFcsdc02e9iyCd8tHwmeSSoKTowIgvscSGZUOA7PuCN5b2BX9mQM7S0wYhMNU74zgsPBj3HU7wguAfnxxjFQGBE6pwN+GjME9zHY7zGp8wVxMShYX9NXvEWD3HbwJf4giO4CFIQxXScH1/TM+04kkBiAAAAAElFTkSuQmCC',

    iconSize:     [30, 50], // size of the icon
    shadowSize:   [50, 50], // size of the shadow
    iconAnchor:   [15, 50], // point of the icon which will correspond to marker's location
    shadowAnchor: [15, 50],  // the same for the shadow
    popupAnchor:  [-3, -47] // point from which the popup should open relative to the iconAnchor
});

    var marker = L.marker([
        [[Koordinate]]
    ], {icon: greenIcon[[ID]]}).addTo(map);
    marker.bindPopup('##userpicture## ##user##<hr>[[Beschreibung]]<hr>').closePopup();

}, false);
} );
</script>

<script>
const mapalert = sessionStorage.getItem('mapalert');
if(mapalert){
    console.log('mapalert exists');
document.getElementById("hinweis").style.display = "none";
window.setTimeout(function() {document.getElementById("btn1").click();}, 500);
}else{
    console.log('mapalert is not found');
}
</script>
##delete## ##edit##<hr>