Spaces:

soiz1
/

map-editor

Running

App Files Files Community

soiz1 commited on Jan 28, 2025

Commit

129ff86

verified ·

1 Parent(s): c266f14

Update index.html

Browse files

Files changed (1) hide show

index.html +54 -52

index.html CHANGED Viewed

@@ -58,11 +58,6 @@ body::-webkit-scrollbar-thumb {
 <body>
     <div id="loading">Loading...</div>
     <img src="https://lh3.googleusercontent.com/d/1Wo9oLj4D6JEsT_MWUZ4VyaIy10uLN3q0" />
-    <div id="map-controls" style="position: absolute; top: 10px; left: 10px; z-index: 1000;">
-        <button id="add-marker-btn" style="margin-bottom: 5px; padding: 10px; border: none; background-color: #007bff; color: #fff; font-size: 14px; border-radius: 4px; cursor: pointer;">新しくマーカーを追加</button>
-        <button id="edit-marker-btn" style="padding: 10px; border: none; background-color: #007bff; color: #fff; font-size: 14px; border-radius: 4px; cursor: pointer;">マーカーを編集</button>
-    </div>
     <div id="map" style="width:90%; margin:5%;"></div>
     <div id="marker-editor">
         <h3>マーカーを編集</h3>
@@ -125,53 +120,6 @@ body::-webkit-scrollbar-thumb {
     <script>
-      // 「新しくマーカーを追加」ボタンの動作
-document.getElementById("add-marker-btn").addEventListener("click", function () {
-    map.on("click", function addMarkerHandler(e) {
-        const latlng = e.latlng;
-        const newMarker = L.marker(latlng).addTo(map);
-        newMarker.bindPopup("新しいマーカー");
-        newMarker.bindTooltip("新しいマーカーのツールチップ");
-        // マーカー編集可能にする
-        newMarker.on("mouseover", function () {
-            hoveredMarker = newMarker;
-        });
-        newMarker.on("mouseout", function () {
-            if (hoveredMarker === newMarker) hoveredMarker = null;
-        });
-        // 編集パネルを開く
-        openEditor(newMarker);
-        // 一度クリックでイベント解除
-        map.off("click", addMarkerHandler);
-        // マーカー保存
-        saveMapToStorage();
-    });
-});
-// 「マーカーを編集」ボタンの動作
-document.getElementById("edit-marker-btn").addEventListener("click", function () {
-    map.on("click", function editMarkerHandler(e) {
-        const nearbyMarkers = [];
-        map.eachLayer(function (layer) {
-            if (layer instanceof L.Marker) {
-                if (map.distance(e.latlng, layer.getLatLng()) < 20) {
-                    nearbyMarkers.push(layer);
-                }
-            }
-        });
-        if (nearbyMarkers.length > 0) {
-            const markerToEdit = nearbyMarkers[0];
-            openEditor(markerToEdit);
-            map.off("click", editMarkerHandler); // 一度クリックでイベント解除
-        }
-    });
-});
     function saveMapToStorage() {
     const markers = [];
@@ -558,6 +506,60 @@ map.on("contextmenu", function (e) {
         openEditor(clickedMarkers[0]);
     }
 });
  // マップが動いたときに保存
     </script>

 <body>
     <div id="loading">Loading...</div>
     <img src="https://lh3.googleusercontent.com/d/1Wo9oLj4D6JEsT_MWUZ4VyaIy10uLN3q0" />
     <div id="map" style="width:90%; margin:5%;"></div>
     <div id="marker-editor">
         <h3>マーカーを編集</h3>
     <script>
     function saveMapToStorage() {
     const markers = [];
         openEditor(clickedMarkers[0]);
     }
 });
+// ボタンを配置するコンテナを作成
+const buttonContainer = document.createElement("div");
+buttonContainer.style.position = "absolute";
+buttonContainer.style.top = "10px";
+buttonContainer.style.left = "10px";
+buttonContainer.style.zIndex = "1000";
+buttonContainer.style.display = "flex";
+buttonContainer.style.gap = "10px";
+document.body.appendChild(buttonContainer);
+// 「新しくマーカーを追加」ボタンを作成
+const addMarkerButton = document.createElement("button");
+addMarkerButton.textContent = "新しくマーカーを追加";
+addMarkerButton.style.padding = "10px";
+addMarkerButton.style.border = "none";
+addMarkerButton.style.borderRadius = "5px";
+addMarkerButton.style.background = "#007BFF";
+addMarkerButton.style.color = "white";
+addMarkerButton.style.cursor = "pointer";
+addMarkerButton.addEventListener("click", () => {
+    const center = map.getCenter();
+    const newMarker = L.marker(center).addTo(map);
+    newMarker.bindPopup("新しいマーカー").openPopup();
+    newMarker.bindTooltip("新しいマーカーのツールチップ");
+    newMarker.on("mouseover", function () {
+        hoveredMarker = newMarker;
+    });
+    newMarker.on("mouseout", function () {
+        if (hoveredMarker === newMarker) {
+            hoveredMarker = null;
+        }
+    });
+    saveMapToStorage();
+});
+buttonContainer.appendChild(addMarkerButton);
+// 「マーカーを編集」ボタンを作成
+const editMarkerButton = document.createElement("button");
+editMarkerButton.textContent = "マーカーを編集";
+editMarkerButton.style.padding = "10px";
+editMarkerButton.style.border = "none";
+editMarkerButton.style.borderRadius = "5px";
+editMarkerButton.style.background = "#28A745";
+editMarkerButton.style.color = "white";
+editMarkerButton.style.cursor = "pointer";
+editMarkerButton.addEventListener("click", () => {
+    if (hoveredMarker) {
+        openEditor(hoveredMarker);
+    } else {
+        alert("編集するマーカーを選択してください。");
+    }
+});
+buttonContainer.appendChild(editMarkerButton);
  // マップが動いたときに保存
     </script>