added marker popup advising users to drag it to correct location #46

src/osm-integration.js

@@ -9,6 +9,7 @@ var auth = osmAuth({
 // global variables
 var openChangesetId = null;
 var marker = null;
+const markerColour = "#e81224";
 
 // --------------------------------------------------------------------------------------
 function getOpenChangesetId() {
@@ -48,6 +49,10 @@ function getNodeUrl(nodeId) {
     return `${auth.options().url}/node/${nodeId}`;
 }
 
+function renderMarkerPopup() {
+    return "Przesuń marker w docelowe miejsce"
+}
+
 function renderModalMessage(newNodeUrl) {
     return `
     <p class="pb-2">AED dodany z powodzeniem.</p>
@@ -191,10 +196,13 @@ function addMarkerAndOpenSidebar() {
     if (marker !== null) marker.remove();
     marker = new maplibregl.Marker({
             draggable: true,
-            color: "#e81224",
+            color: markerColour,
         })
         .setLngLat(initialCoordinates);
+    //add popup
+    marker.setPopup(new maplibregl.Popup().setHTML(renderMarkerPopup()))
     marker.addTo(map);
+    marker.togglePopup();
     // show sidebar
     let properties = {
         action: "addNode",
@@ -212,10 +220,13 @@ function mobileButton1onClick() {
     if (marker !== null) marker.remove();
     marker = new maplibregl.Marker({
             draggable: true,
-            color: "#e81224",
+            color: markerColour,
         })
         .setLngLat(initialCoordinates);
+    //add popup
+    marker.setPopup(new maplibregl.Popup().setHTML(renderMarkerPopup()));
     marker.addTo(map);
+    marker.togglePopup();
     // swap buttons
     let mobileButton1 = document.getElementById('addNode-mobile-1');
     let mobileButton2 = document.getElementById('addNode-mobile-2');