Map Leaflet Stuttgart bürgerinnenratklima

map.html

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet"/>


<script>
function cloneMarker(markerToClone) {
  var marker = L.marker(markerToClone.getLatLng()).bindPopup(markerToClone.getPopup());
  return marker;
}  

// Where you want to render the map.
var element = document.getElementById('osm-map');

// Height has to be set. You can do this in CSS too.
element.style = 'height:600px;';

var greenIcon = L.icon({
    iconUrl: 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/logo_marker_g.png',

    iconSize:     [61, 80], // size of the icon
    iconAnchor:   [30, 80], // point of the icon which will correspond to marker's location
    popupAnchor:  [0, -70] // point from which the popup should open relative to the iconAnchor
});
var darkIcon = L.icon({
    iconUrl: 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/logo_marker_d.png',

    iconSize:     [61, 80], // size of the icon
    iconAnchor:   [30, 80], // point of the icon which will correspond to marker's location
    popupAnchor:  [0, -70] // point from which the popup should open relative to the iconAnchor
});
var purpleIcon = L.icon({
    iconUrl: 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/logo_marker_p.png',

    iconSize:     [61, 80], // size of the icon
    iconAnchor:   [30, 80], // point of the icon which will correspond to marker's location
    popupAnchor:  [0, -70] // point from which the popup should open relative to the iconAnchor
});


// Add OSM tile layer to the Leaflet map.
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});

var center = L.latLng('48.77', '9.1580516');

// Raupe Immersatt, Johannesstr. 97
var raupe = L.marker(['48.7819239', '9.1580516']).bindPopup('Raupe Immersatt </br> Briefkasten: Johannesstr. 97');
// Umweltzentrum Stuttgart, Rotebühlstraße 86A
var uwz = L.marker(['48.77169', '9.16013']).bindPopup('Umweltzentrum </br> Briefkasten: Rotebühlstr. 86A');
// österreichscher Platz
var oep = L.marker(['48.77069', '9.17318']).bindPopup('Österreichischer Platz </br> Briefkasten');

//    Tante M - Unverpackt, Eduard-Steinle-Str. 6, Sillenbuch
var foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Tante M 1.JPG'
var tanteM = L.marker(['48.7451132', '9.2131564']).bindPopup("Tante M - Unverpackt"+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
//    Teilbar,  Lerchenstr. 84, S- West
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Teilbar.JPG'
var teilbar = L.marker(['48.7799631', '9.1567868']).bindPopup('teilbar'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
//    Weltladen Degerloch, Rubensstr. 2A
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Weltladen Degerloch 2.JPG'
var weltladenD = L.marker(['48.7464250', '9.1693435']).bindPopup('Weltladen Degerloch'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
//    Weltladen Charlottenplatz
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Weltladen Charlottenplatz 1.JPG'
var weltladenC = L.marker(['48.7763325', '9.1820684']).bindPopup('Weltladen Charlottenplatz'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
//    Tegut Heusteig
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Tegut.jpg'
var tegutHeusteig = L.marker(['48.7694253', '9.1782948']).bindPopup('Tegut'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
//    Tegut Königsstr
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Tegut.jpg'
var tegutKönigsstr = L.marker(['48.77958', '9.17813']).bindPopup('Tegut'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
// Grünschnabel
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/grünschnabel2.JPG'
var schnabel = L.marker(['48.7295131', '9.1113988']).bindPopup('Grünschnabel'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
// Königsbäck Gablenberger Hauptstr. 70
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Königsbäck.jpg'
var königsbäck = L.marker(['48.7775322', '9.2059655']).bindPopup('Königsbäck'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
//Ohne PlaPla (plastikfreier Drogerieladen) in der Fürstenstr. 5
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/ohneplapla.jpg'
var ohnePlaPla = L.marker(['48.7788552', '9.1771708']).bindPopup('Ohne PlaPla'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
// Lebe Gesund (nahe Hans im Glück Brunnen)
var lebeGesund = L.marker(['48.7740622', '9.1774112']).bindPopup('Lebe Gesund');
// Gesunde Kost Sillenbuch
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Gesunde Kost Sillenbuch 1.jpg'
var gesundeKost = L.marker(['48.7463591', '9.2106214'], {icon: greenIcon}).bindPopup('Gesunde Kost'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
// Fairteiler Sillenbuch
var fairSibu = L.marker(['48.74197', '9.21378']).bindPopup('Fairteiler Sillenbuch');
// Fairteiler Degerloch
var fairDGL = L.marker(['48.74760', '9.17210']).bindPopup('Fairteiler Degerloch');
// Schuh-und Schlüsseldienst am Sillenbucher Markt, Kirchheimer Str. 70619 (bei U-Halt Schemppstr.)
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Schuh- und Schlüsseldienst am Sillenbucher Markt.JPG'
var schuhreparatur = L.marker(['48.74017', '9.21971']).bindPopup('Schuhreparatur Sillenbuch'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
// Café Silberknie
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Silberknie.jpg'
var silberknie = L.marker(['48.7786173', '9.1881942']).bindPopup('Café Silberknie'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
// Reyerhof Unteraicher Str. 8, Stgt-Möhringen
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Reyerhof.jpg'
var reyerhof = L.marker(['48.72457','9.14509']).bindPopup('Reyerhof Hofladen'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
// Weltladen FairOst, Ostendstr. 57 , 70188 S-Ost  
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Weltladen FairOst 2, Ostendstr. 57.JPG'
var weltladenO = L.marker(['48.7862836', '9.2079733']).bindPopup('Weltladen FairOst'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
// Schüttgut Unverpacktladen, Vogelsangstr. 51, 70197 S-West   
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Schüttgut, Vogelsangstr. 51.JPG'
var schuettgut = L.marker(['48.7737587', '9.1532310']).bindPopup('Schüttgut'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
// Gesunde Kost Rein, Haußmannstr. 124, 70188 S-Ost,  
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Gesunde Kost Rein 1.JPG'
var GKRein = L.marker(['48.785250686434246', '9.200691513642669']).bindPopup('Gesunde Kost Rein'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
// Organix Biomarkt, Stuttgarter Str. 23
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Organix 1.JPG'
var organix = L.marker(['48.8104695', '9.1655374']).bindPopup('Organix Biomarkt'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
// Erdi Möhringen Widmaierstr. 110 
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Erdi Möhringen1.JPG'
var erdiM = L.marker(['48.7223439', '9.1582913']).bindPopup('Erdi'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
// Weltladen Botnang, Griegstr. 24
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Weltladen Botnang.JPG'
var weltladenB = L.marker(['48.7785201', '9.1269725']).bindPopup('Weltladen Botnang'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");
// Weltlädle Wangen
foto = 'https://buergerinnenratklimastuttgart.de/wp-content/uploads/ladenbilder/Weltladen Wangen1.JPG'
var weltladenW = L.marker(['48.7725176', '9.2424903']).bindPopup('Weltlädle Wangen'+
	"<a href='"+foto+"' target=\"_blank\">"+"<img src='"+foto+"'</img></a>");

// Naturgut Degerloch
// Mahnwache (HBF)
// Weltladen Cannstatt (Markt)
// Weltladen Untertürkheim
// Café Moustache
// Tarte und Törtchen

var template = L.marker(['']).bindPopup('');


var flyers = [tanteM, teilbar, weltladenD, weltladenC, tegutHeusteig, 
              tegutKönigsstr, schnabel, königsbäck, ohnePlaPla, lebeGesund, 
              gesundeKost, fairSibu, fairDGL, schuhreparatur,
              silberknie,reyerhof,weltladenO,schuettgut,GKRein,organix,
              erdiM,weltladenB,weltladenW]
var unterschreibens = [schnabel, raupe, tanteM, teilbar,
                      weltladenD, weltladenC, silberknie, 
                      gesundeKost,reyerhof,weltladenO,GKRein,organix,
                      erdiM,weltladenB,weltladenW];
var abgabes = [raupe,uwz,oep];


// cloning is necessary, to have differently coloured markers on the same spot
var flyersClone = [];
for(let item of flyers) {	
    nItem = cloneMarker(item);
	nItem.setIcon(greenIcon);
    flyersClone.push(nItem);
}
var flyer = L.layerGroup(flyersClone);

var unterschreibenClone = [];
for(let item of unterschreibens) {		
    nItem = cloneMarker(item);
	nItem.setIcon(darkIcon);
    unterschreibenClone.push(nItem);
}
var unterschreiben = L.layerGroup(unterschreibenClone);

var abgabeClone = [];
for(let item of abgabes) {		
    nItem = cloneMarker(item);
	nItem.setIcon(purpleIcon);
    abgabeClone.push(nItem);
}
var abgabe = L.layerGroup(abgabeClone);


// Create Leaflet map on map element.
var map = L.map(element, {
    center: center,
    zoom: 13,
    layers: [tiles, flyer, unterschreiben, abgabe]
});

var overlayMaps = {
    "<span style='color: #412c91'>Listen abgeben</span>": abgabe,
    "<span style='color: #66c53a'>Flyer holen</span>": flyer,
    "<span style='color: #004f37'>Unterschreiben</span>": unterschreiben,
};
L.control.layers(null,overlayMaps ,{collapsed: false}).addTo(map);
</script>