--- steps/step-5/index.html 2025-11-04 20:55:40.321969293 +0000
+++ steps/step-6/index.html 2025-11-04 20:55:40.805972330 +0000
@@ -6,15 +6,20 @@
* leaflet
* leaflet-providers
* leaflet-search
+ * font-awesome
+ * leaflet.awesome-markers
-->
<head>
- <title>Add a search field</title>
+ <title>Adding a Marker</title>
<meta charset="utf-8" />
<script src="../../node_modules/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" href="../../node_modules/leaflet/dist/leaflet.css"/>
<script src="../../node_modules/leaflet-providers/leaflet-providers.js"></script>
<link rel="stylesheet" href="../../node_modules/leaflet-search/src/leaflet-search.css"/>
<script src="../../node_modules/leaflet-search/src/leaflet-search.js"></script>
+ <link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.css">
+ <link rel="stylesheet" href="../../node_modules/leaflet.awesome-markers/dist/leaflet.awesome-markers.css"/>
+ <script src="../../node_modules/leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
<style>
body {
margin: 0;
@@ -60,6 +65,14 @@
myMap.addControl(searchControl);
+ var redMarker = L.AwesomeMarkers.icon({
+ icon: 'coffee',
+ prefix: 'fa',
+ markerColor: 'red'
+ });
+
+ var poi = L.marker(latLon, {icon: redMarker}).addTo(myMap);
+ poi.bindPopup("<b>test</b><hr/>foobar");
</script>
</body>
</html>