Add project 2 aufgabe 2

projects/project-2/aufgabe2.js

@@ -0,0 +1,82 @@
+const aufgabe2 = () => {
+    const markerIcons = {
+        food: L.icon({
+            iconUrl: 'markers/food.png',
+            iconSize: [50, 50], // size of the icon
+            iconAnchor: [20, 50], // point of the icon which will correspond to marker's location
+            popupAnchor: [3, -50] // point from which the popup should open relative to the iconAnchor
+        }),
+        culture: L.icon({
+            iconUrl: 'markers/museum.png',
+            iconSize: [50, 50], // size of the icon
+            iconAnchor: [20, 50], // point of the icon which will correspond to marker's location
+            popupAnchor: [3, -50] // point from which the popup should open relative to the iconAnchor
+        }),
+        nature: L.icon({
+            iconUrl: 'markers/nature.png',
+            iconSize: [40, 48], // size of the icon
+            iconAnchor: [20, 56], // point of the icon which will correspond to marker's location
+            popupAnchor: [3, -50] // point from which the popup should open relative to the iconAnchor
+        }),
+        train: L.icon({
+            iconUrl: 'markers/train.png',
+            iconSize: [60, 60], // size of the icon
+            iconAnchor: [25, 55], // point of the icon which will correspond to marker's location
+            popupAnchor: [3, -45] // point from which the popup should open relative to the iconAnchor
+        })
+    }
+
+    map = L.map('poiMap').setView([48.779694, 9.177015], 14);
+    map.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
+        minZoom: 1,
+        maxZoom: 18
+    }))
+
+    const foodLayer = L.layerGroup([
+        L.marker([48.780980, 9.169636], {icon: markerIcons.food}).bindPopup("<b>Essen und Trinken</b><br>Mensa Stuttgart"),
+        L.marker([48.778051, 9.176946], {icon: markerIcons.food}).bindPopup("<b>Essen und Trinken</b><br>Ochs'n Willi"),
+        L.marker([48.779674, 9.178160], {icon: markerIcons.food}).bindPopup("<b>Essen und Trinken</b><br>K&ouml;nigsbau Passagen"),
+        L.marker([48.780378, 9.172597], {icon: markerIcons.food}).bindPopup("<b>Essen und Trinken</b><br>HFT Block 4")
+    ])
+
+    const cultureLayer = L.layerGroup([
+        L.marker([48.788165, 9.233864], {icon: markerIcons.culture}).bindPopup("<b>Kunst und Kultur</b><br>Mercedes-Benz Museum"),
+        L.marker([48.793296, 9.228010], {icon: markerIcons.culture}).bindPopup("<b>Kunst und Kultur</b><br>Porsche Arena"),
+        L.marker([48.834270, 9.152479], {icon: markerIcons.culture}).bindPopup("<b>Kunst und Kultur</b><br>Porsche Museum"),
+        L.marker([48.755866, 9.190109], {icon: markerIcons.culture}).bindPopup("<b>Kunst und Kultur</b><br>Fernsehturm"),
+        L.marker([48.780149, 9.186586], {icon: markerIcons.culture}).bindPopup("<b>Kunst und Kultur</b><br>Staatsgalerie"),
+        L.marker([48.786550, 9.084028], {icon: markerIcons.culture}).bindPopup("<b>Kunst und Kultur</b><br>Schloss Solitude")
+    ])
+
+    const natureLayer = L.layerGroup([
+        L.marker([48.804148, 9.208100], {icon: markerIcons.nature}).bindPopup("<b>Natur</b><br>Wilhelma"),
+        L.marker([48.782037, 9.268643], {icon: markerIcons.nature}).bindPopup("<b>Natur</b><br>Grabkapelle auf dem W&uuml;rttemberg"),
+        L.marker([48.785969, 9.187023], {icon: markerIcons.nature}).bindPopup("<b>Natur</b><br>Schlossgarten"),
+        L.marker([48.818362, 9.184177], {icon: markerIcons.nature}).bindPopup("<b>Natur</b><br>Aussichtspunkt Burgholzhof")
+    ])
+
+    const trainLayer = L.layerGroup([
+        L.marker([48.777440, 9.173764], {icon: markerIcons.train}).bindPopup("<b>&Ouml;PNV</b><br>Roteb&uuml;hlplatz"),
+        L.marker([48.784760, 9.182898], {icon: markerIcons.train}).bindPopup("<b>&Ouml;PNV</b><br>Stuttgart Hauptbahnhof"),
+        L.marker([48.780173, 9.177220], {icon: markerIcons.train}).bindPopup("<b>&Ouml;PNV</b><br>B&ouml;rsenplatz"),
+        L.marker([48.755939, 9.142164], {icon: markerIcons.train}).bindPopup("<b>&Ouml;PNV</b><br>Seilbahn"),
+        L.marker([48.764290, 9.168611], {icon: markerIcons.train}).bindPopup("<b>&Ouml;PNV</b><br>Zahnradbahn"),
+    ])
+
+    map.addLayer(foodLayer)
+    map.addLayer(cultureLayer)
+    map.addLayer(natureLayer)
+    map.addLayer(trainLayer)
+
+    const overlayMaps = {
+        'Essen und Trinken': foodLayer,
+        'Kunst und Kultur': cultureLayer,
+        'Natur': natureLayer,
+        '&Ouml;PNV': trainLayer
+    }
+
+    L.control.layers(null, overlayMaps).addTo(map)
+}
+
+aufgabe2()