|
|
| <!DOCTYPE html> |
| <html lang="ja"> |
| <head> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Yomogi&display=swap" rel="stylesheet"> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>マーカー編集機能付きのLeafletマップ</title> |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" /> |
| <style> |
| body{ |
| font-family: "Yomogi", cursive; |
| font-weight: 400; |
| font-style: normal; |
| background-repeat: repeat; background-image:url("https://lh3.googleusercontent.com/d/1MpGi0bdyjKZNYgKQyMWpIZM0R0q1i4rD"); |
| background-attachment: fixed; |
| |
| } |
| #map { height: 600px; width: 100%; } |
| #marker-editor { display: none; position: absolute; top: 10px; left: 10px; background: #fff; padding: 15px; border-radius: 5px; box-shadow: 0 0 15px rgba(0, 0, 0, .3); z-index: 1000; cursor: move; } |
| #marker-editor input, #marker-editor textarea { display: block; width: 100%; margin-bottom: 10px; } |
| #marker-editor button { width: 100%; padding: 10px; border: none; background-color: #007bff; color: #fff; font-size: 16px; border-radius: 4px; cursor: pointer; } |
| #marker-editor button:hover { background-color: #0056b3; } |
| input[type=file] { color: #1f2937; cursor: pointer; border: 1px solid #bfc2c7; border-radius: .375rem; padding-right: .5rem; width: 24rem; } |
| ::-webkit-file-upload-button, ::file-selector-button { background-color: #d1d5db; color: #1f2937; border: none; cursor: pointer; border-right: 1px solid #bfc2c7; padding: .25rem 1rem; margin-right: 1rem; } |
| #icon-preview { display: none; margin-top: 10px; max-width: 100%; } |
| #icon-settings { display: none; margin-top: 10px; } |
| #icon-settings label { display: block; margin-bottom: 5px; } |
| |
| body::-webkit-scrollbar { |
| width: 5px; |
| background-color: #c9d8f5; |
| } |
| body::-webkit-scrollbar-thumb { |
| background: #67b9e6; |
| width: 5px; |
| border-radius: 5px; |
| } |
| #loading { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-color: rgba(255, 255, 255, 0.8); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 24px; |
| z-index: 9999; |
| opacity: 1; |
| transition: opacity 0.5s ease; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="loading">Loading...</div> |
| <img src="https://lh3.googleusercontent.com/d/1Wo9oLj4D6JEsT_MWUZ4VyaIy10uLN3q0" /> |
| <button id="edit-next-marker" style="font-family: inherit; font-weight: 700; font-style: normal;">次のマーカーを編集</button> |
| <div id="map" style="width:90%; margin:5%;"></div> |
| <div id="marker-editor"> |
| <h3>マーカーを編集</h3> |
| <label for="marker-lat">緯度:</label> |
| <input type="text" id="marker-lat"> |
| <hr> |
| <label for="marker-lng">経度:</label> |
| <input type="text" id="marker-lng"> |
| <hr> |
| <a href="javascript:window.open('/marker.html');">アイコン</a> |
| <input type="radio" name="icon-source" value="upload" checked>アップロードから |
| <input type="radio" name="icon-source" value="url">URLから読み込む |
| <div id="icon-upload-input" style="display: block; margin-bottom: 20px;"> |
| <label for="marker-icon-upload">マーカーのアイコンをアップロード:</label> |
| <input type="file" id="marker-icon-upload" accept="image/*"> |
| </div> |
| <div id="icon-url-input" style="display: none; margin-bottom: 20px;"> |
| <label for="marker-icon-url">マーカーのアイコンURL:</label> |
| <input type="text" id="marker-icon-url" value="https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon-2x.png"> |
| <button id="load-icon-url">画像を編集</button> |
| </div> |
| <img id="icon-preview" src="" alt="アイコンプレビュー"> |
| <div id="icon-settings"> |
| <label for="icon-width">アイコンの幅:</label> |
| <input type="range" id="icon-width" min="10" max="100" value="25"> |
| <span id="icon-width-value">25</span>px |
| <label for="icon-height">アイコンの高さ:</label> |
| <input type="range" id="icon-height" min="10" max="100" value="41"> |
| <span id="icon-height-value">41</span>px |
| </div> |
| <label for="marker-popup">ポップアップHTML:</label> |
| <textarea id="marker-popup" rows="4"></textarea> |
| <label for="marker-tooltip">ツールチップHTML:</label> |
| <textarea id="marker-tooltip" rows="4"></textarea> |
| <button id="save-marker" style="font-family: inherit; font-weight: 800; font-style: normal;">OK</button> |
| </div> |
| <textarea id="output-html" rows="20" cols="100" readonly hidden></textarea><div id="output-code" style="word-break: break-all;">ここに生成されたHTMLが表示されます。</div><button id="copyButton" style="font-family: inherit; font-weight: 700; font-style: normal;">コードをコピー</button><br> |
| <button id="generate-html" style="width: 50%; padding: 10px; border: none; background-color: #007bff; color: #fff; font-size: 16px; border-radius: 4px; cursor: pointer; margin: 20px; font-family: inherit; font-weight: 800; font-style: normal;">HTMLを生成</button> |
| |
|
|
|
|
| <script> |
| const output = document.getElementById('output-code'); |
| output.innerHTML = hljs.highlight('html', "ここに生成されたHTMLが表示されます。").value; |
| output.classList.add('hljs');</script> |
| <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/mono-blue.min.css"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script> |
| |
| <script> |
| window.onload = function() { |
| const loading = document.getElementById('loading'); |
| loading.style.opacity = '0'; |
| setTimeout(() => { |
| loading.style.display = 'none'; |
| loadMapFromStorage(); |
| }, 500); |
| }; |
| </script> |
|
|
|
|
| <script> |
| |
| function saveMapToStorage() { |
| const markers = []; |
| map.eachLayer((layer) => { |
| if (layer instanceof L.Marker) { |
| const marker = layer; |
| const icon = marker.options.icon; |
| const { lat, lng } = marker.getLatLng(); |
| markers.push({ |
| lat: lat, |
| lng: lng, |
| iconUrl: icon.options.iconUrl, |
| iconSize: icon.options.iconSize, |
| popupContent: marker.getPopup() ? marker.getPopup().getContent() : '', |
| tooltipContent: marker.getTooltip() ? marker.getTooltip().getContent() : '', |
| }); |
| } |
| }); |
| localStorage.setItem('leafletMap', JSON.stringify(markers)); |
| } |
| |
| function loadMapFromStorage() { |
| const storedMarkers = JSON.parse(localStorage.getItem('leafletMap')); |
| if (!storedMarkers) { |
| console.warn('No markers found in local storage.'); |
| return; |
| } |
| |
| if (!map) { |
| console.error('Map is not initialized.'); |
| return; |
| } |
| |
| storedMarkers.forEach((data) => { |
| if (!data.iconUrl || !data.iconSize) { |
| console.error('Icon data is incomplete.'); |
| return; |
| } |
| |
| const icon = L.icon({ |
| iconUrl: data.iconUrl, |
| iconSize: data.iconSize, |
| iconAnchor: [data.iconSize[0] / 2, data.iconSize[1]], |
| popupAnchor: [0, -data.iconSize[1]], |
| tooltipAnchor: [data.iconSize[0] / 2, -data.iconSize[1] / 2], |
| }); |
| const marker = L.marker([data.lat, data.lng], { icon: icon }).addTo(map); |
| if (data.popupContent) marker.bindPopup(data.popupContent); |
| if (data.tooltipContent) marker.bindTooltip(data.tooltipContent); |
| |
| // ⭐ここから追加⭐ |
| marker.on("mouseover", function() { |
| hoveredMarker = marker; |
| console.log("Marker hovered:", marker); |
| }); |
| marker.on("mouseout", function() { |
| if (hoveredMarker === marker) { |
| hoveredMarker = null; |
| console.log("Marker no longer hovered"); |
| } |
| }); |
| // ⭐ここまで追加⭐ |
| |
| }); |
| } |
| |
| function updatePreviewSize() { |
| var e = document.getElementById("icon-width").value; |
| var t = document.getElementById("icon-height").value; |
| var n = document.getElementById("icon-preview"); |
| n.style.width = e + "px"; |
| n.style.height = t + "px"; |
| document.getElementById("icon-width-value").textContent = e; |
| document.getElementById("icon-height-value").textContent = t; |
| if (editingMarker) { |
| var o = document.querySelector('input[name="icon-source"]:checked').value === "url" ? document.getElementById("marker-icon-url").value : n.src; |
| var i = L.icon({ |
| iconUrl: o, |
| iconSize: [e, t], |
| iconAnchor: [e / 2, t], |
| popupAnchor: [0, -t], |
| tooltipAnchor: [e / 2, -t / 2] |
| }); |
| editingMarker.setIcon(i); |
| saveMapToStorage(); |
| } |
| } |
| |
| function openEditor(e) { |
| const t = e.getLatLng(); |
| document.getElementById("marker-lat").value = t.lat; |
| document.getElementById("marker-lng").value = t.lng; |
| document.getElementById("marker-popup").value = e.getPopup() ? e.getPopup().getContent() : ""; |
| document.getElementById("marker-tooltip").value = e.getTooltip() ? e.getTooltip().getContent() : ""; |
| document.getElementById("marker-editor").style.display = "block"; |
| editingMarker = e; |
| |
| // ここから追加 |
| const icon = e.options.icon; |
| if (icon && icon.options) { |
| if (icon.options.iconUrl) { |
| // URLから読み込むラジオボタンを選択 |
| document.querySelector('input[name="icon-source"][value="url"]').checked = true; |
| document.getElementById("icon-url-input").style.display = "block"; |
| document.getElementById("icon-upload-input").style.display = "none"; |
| document.getElementById("marker-icon-url").value = icon.options.iconUrl; |
| document.getElementById("icon-preview").src = icon.options.iconUrl; |
| document.getElementById("icon-preview").style.display = 'block'; |
| // 高さと幅の設定を表示 |
| document.getElementById("icon-settings").style.display = "block"; |
| } else { |
| // URLから読み込むラジオボタンを選択 |
| document.querySelector('input[name="icon-source"][value="upload"]').checked = true; |
| document.getElementById("icon-url-input").style.display = "none"; |
| document.getElementById("icon-upload-input").style.display = "block"; |
| document.getElementById("marker-icon-url").value = icon.options.iconUrl; |
| document.getElementById("icon-preview").src = icon.options.iconUrl; |
| document.getElementById("icon-preview").style.display = 'block'; |
| // 高さと幅の設定を表示 |
| document.getElementById("icon-settings").style.display = "block"; |
| } |
| document.getElementById("icon-width").value = icon.options.iconSize[0]; |
| document.getElementById("icon-height").value = icon.options.iconSize[1]; |
| document.getElementById("icon-width-value").textContent = icon.options.iconSize[0]; |
| document.getElementById("icon-height-value").textContent = icon.options.iconSize[1]; |
| } |
| // ここまで追加 |
| |
| updatePreviewSize(); |
| } |
| |
| function generateMapHTML() { |
| const e = []; |
| map.eachLayer((function(t) { |
| if (t instanceof L.Marker) { |
| const n = t; |
| const o = n.options.icon; |
| const i = o.options.iconUrl; |
| const r = o.options.iconSize; |
| const c = n.getLatLng(); |
| const l = n.getPopup() ? n.getPopup().getContent() : ""; |
| const a = n.getTooltip() ? n.getTooltip().getContent() : ""; |
| e.push({ |
| lat: c.lat, |
| lng: c.lng, |
| iconUrl: i, |
| iconWidth: r[0], |
| iconHeight: r[1], |
| popupContent: l, |
| tooltipContent: a |
| }); |
| } |
| })); |
| const t = map.getCenter(); |
| const n = map.getZoom(); |
| let o = ` |
| <div id="map" style="height: 600px; width: 100%;"></div> |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" /> |
| <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"><\/script> |
| <script> |
| var map = L.map('map').setView([${t.lat}, ${t.lng}], ${n}); |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' |
| }).addTo(map); |
| |
| ${e.map(e => ` |
| var icon = L.icon({ |
| iconUrl: '${e.iconUrl}', |
| iconSize: [${e.iconWidth}, ${e.iconHeight}], |
| iconAnchor: [${e.iconWidth} / 2, ${e.iconHeight}], |
| popupAnchor: [0, -${e.iconHeight}], |
| tooltipAnchor: [${e.iconWidth} / 2, -${e.iconHeight} / 2] |
| }); |
| |
| var marker = L.marker([${e.lat}, ${e.lng}], { |
| icon: icon, |
| zIndexOffset: 1000 |
| }).addTo(map); |
| |
| ${e.popupContent ? `marker.bindPopup('${e.popupContent.replace(/'/g, "\\'").replace(/<\/script>/g, "<\\/script>")}');` : ""} |
| ${e.tooltipContent ? `marker.bindTooltip('${e.tooltipContent.replace(/'/g, "\\'").replace(/<\/script>/g, "<\\/script>")}');` : ""} |
| `).join("\n")} |
| <\/script> |
| `; |
| o = o.replace(/iconUrl: 'marker-icon\.png'/g, `iconUrl: '${location.origin}/marker-icon.png'`); |
| document.getElementById("output-html").value = o; |
| const input = document.getElementById('output-html').value; |
| const output = document.getElementById('output-code'); |
| output.innerHTML = hljs.highlight('html', input).value; |
| output.classList.add('hljs'); |
| } |
| |
| function resizeImage(e, t, n, o) { |
| const i = new FileReader(); |
| i.onload = function(e) { |
| const i = new Image(); |
| i.onload = function() { |
| const e = document.createElement("canvas"); |
| e.width = t; |
| e.height = n; |
| e.getContext("2d").drawImage(i, 0, 0, t, n); |
| o(e.toDataURL()); |
| }; |
| i.src = e.target.result; |
| }; |
| i.readAsDataURL(e); |
| } |
| |
| document.getElementById("marker-icon-upload").addEventListener("change", function() { |
| const e = this.files[0]; |
| const t = document.getElementById("icon-preview"); |
| if (e) { |
| resizeImage(e, parseInt(document.getElementById("icon-width").value), parseInt(document.getElementById("icon-height").value), function(imageDataUrl) { |
| t.src = imageDataUrl; |
| t.style.display = "block"; |
| document.getElementById("icon-settings").style.display = "block"; // 高さと幅の設定を表示 |
| updatePreviewSize(); |
| }); |
| } else { |
| t.style.display = "none"; |
| document.getElementById("icon-settings").style.display = "none"; // アップロードされていない場合は非表示 |
| } |
| }); |
| |
| |
| document.getElementById("load-icon-url").addEventListener("click", function() { |
| const e = document.getElementById("marker-icon-url").value; |
| const t = document.getElementById("icon-preview"); |
| if (e) { |
| t.src = e; |
| t.onload = function() { |
| t.style.display = "block"; |
| document.getElementById("icon-settings").style.display = "block"; |
| updatePreviewSize(); |
| }; |
| t.onerror = function() { |
| alert("画像の読み込みに失敗しました。URLを確認してください。"); |
| t.style.display = "none"; |
| document.getElementById("icon-settings").style.display = "none"; |
| }; |
| } else { |
| t.style.display = "none"; |
| document.getElementById("icon-settings").style.display = "none"; |
| } |
| }); |
| |
| document.getElementById("icon-width").addEventListener("input", updatePreviewSize); |
| document.getElementById("icon-height").addEventListener("input", updatePreviewSize); |
| |
| const map = L.map("map").setView([33.321797711641395, 130.52061378343208], 16); |
| L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); |
| |
| let editingMarker = null; |
| let hoveredMarker = null; |
| |
| map.on("click", function(e) { |
| if (editingMarker) { |
| const t = e.latlng; |
| editingMarker.setLatLng([t.lat, t.lng]); |
| document.getElementById("marker-lat").value = t.lat; |
| document.getElementById("marker-lng").value = t.lng; |
| updatePreviewSize(); |
| saveMapToStorage(); |
| } else { |
| const t = e.latlng; |
| const n = L.marker(t).addTo(map); |
| n.bindPopup("新しいマーカー"); |
| n.bindTooltip("新しいマーカーのツールチップ"); |
| n.on("mouseover", function() { |
| hoveredMarker = n; |
| console.log("Marker hovered:", n); |
| }); |
| n.on("mouseout", function() { |
| hoveredMarker === n && (hoveredMarker = null, console.log("Marker no longer hovered")); |
| }); |
| openEditor(n); |
| } |
| }); |
| |
| document.querySelectorAll('input[name="icon-source"]').forEach(function(e) { |
| e.addEventListener("change", function() { |
| const value = this.value; |
| if (value === "url") { |
| document.getElementById("icon-url-input").style.display = "block"; |
| document.getElementById("icon-upload-input").style.display = "none"; |
| } else { |
| document.getElementById("icon-url-input").style.display = "none"; |
| document.getElementById("icon-upload-input").style.display = "block"; |
| } |
| updatePreviewSize(); |
| }); |
| }); |
| |
| document.getElementById("save-marker").addEventListener("click", function() { |
| if (editingMarker) { |
| const lat = parseFloat(document.getElementById("marker-lat").value); |
| const lng = parseFloat(document.getElementById("marker-lng").value); |
| const popupContent = document.getElementById("marker-popup").value; |
| const tooltipContent = document.getElementById("marker-tooltip").value; |
| |
| const iconSource = document.querySelector('input[name="icon-source"]:checked').value; |
| let iconUrl = ""; |
| |
| if (iconSource === "url") { |
| iconUrl = document.getElementById("marker-icon-url").value; |
| } else if (iconSource === "upload") { |
| const file = document.getElementById("marker-icon-upload").files[0]; |
| if (file) { |
| // Blob URLからData URLに変換する処理 |
| resizeImage(file, parseInt(document.getElementById("icon-width").value), parseInt(document.getElementById("icon-height").value), function(dataUrl) { |
| iconUrl = dataUrl; |
| applyIconAndSaveMarker(lat, lng, popupContent, tooltipContent, iconUrl); |
| }); |
| saveMapToStorage(); |
| return; // 非同期処理が完了するまで待つためここでリターン |
| } |
| } |
| |
| // URLの場合や、アップロードファイルがない場合の処理 |
| applyIconAndSaveMarker(lat, lng, popupContent, tooltipContent, iconUrl); |
| } |
| }); |
| |
| function applyIconAndSaveMarker(lat, lng, popupContent, tooltipContent, iconUrl) { |
| const iconWidth = parseInt(document.getElementById("icon-width").value); |
| const iconHeight = parseInt(document.getElementById("icon-height").value); |
| |
| editingMarker.setLatLng([lat, lng]); |
| if (iconUrl) { |
| const icon = L.icon({ |
| iconUrl: iconUrl, |
| iconSize: [iconWidth, iconHeight], |
| iconAnchor: [iconWidth / 2, iconHeight], |
| popupAnchor: [0, -iconHeight], |
| tooltipAnchor: [iconWidth / 2, -iconHeight / 2] |
| }); |
| editingMarker.setIcon(icon); |
| } |
| |
| editingMarker.bindPopup(popupContent); |
| editingMarker.bindTooltip(tooltipContent); |
| |
| document.getElementById("marker-editor").style.display = "none"; |
| editingMarker = null; |
| saveMapToStorage(); |
| } |
| |
| |
| document.addEventListener("keydown", function(e) { |
| if (e.key === "e" && hoveredMarker) { |
| openEditor(hoveredMarker); |
| } |
| }); |
| |
| (function() { |
| const e = document.getElementById("marker-editor"); |
| let t, n, o = false; |
| e.addEventListener("mousedown", function(i) { |
| if (!i.target.closest("input, textarea, button")) { |
| t = i.clientX - e.getBoundingClientRect().left; |
| n = i.clientY - e.getBoundingClientRect().top; |
| o = true; |
| } |
| }); |
| document.addEventListener("mousemove", function(i) { |
| if (o) { |
| e.style.left = i.clientX - t + "px"; |
| e.style.top = i.clientY - n + "px"; |
| } |
| }); |
| document.addEventListener("mouseup", function() { |
| o = false; |
| }); |
| })(); |
| document.getElementById("copyButton").onclick = function() { |
| const textToCopy = document.getElementById("output-code").innerText; |
| navigator.clipboard.writeText(textToCopy).then(() => { |
| alert("テキストがコピーされました！"); |
| }).catch(err => { |
| console.error('コピーに失敗しました:', err); |
| }); |
| }; |
| |
| document.getElementById("generate-html").addEventListener("click", generateMapHTML); |
| |
| let nextMarkerEdit = null; |
| |
| document.getElementById("edit-next-marker").addEventListener("click", function() { |
| nextMarkerEdit = true; |
| alert("次にクリックするマーカーを編集します。"); |
| }); |
| |
| map.on("click", function(e) { |
| if (nextMarkerEdit) { |
| const clickedMarkers = []; |
| map.eachLayer(function (layer) { |
| if (layer instanceof L.Marker) { |
| const distance = map.distance(e.latlng, layer.getLatLng()); |
| if (distance < 20) { |
| clickedMarkers.push(layer); |
| } |
| } |
| }); |
| |
| if (clickedMarkers.length > 0) { |
| openEditor(clickedMarkers[0]); |
| } |
| nextMarkerEdit = false; |
| } else { |
| // 既存のクリックイベント処理 |
| if (editingMarker) { |
| const t = e.latlng; |
| editingMarker.setLatLng([t.lat, t.lng]); |
| document.getElementById("marker-lat").value = t.lat; |
| document.getElementById("marker-lng").value = t.lng; |
| updatePreviewSize(); |
| saveMapToStorage(); |
| } else { |
| const t = e.latlng; |
| const n = L.marker(t).addTo(map); |
| n.bindPopup("新しいマーカー"); |
| n.bindTooltip("新しいマーカーのツールチップ"); |
| n.on("mouseover", function() { |
| hoveredMarker = n; |
| }); |
| n.on("mouseout", function() { |
| hoveredMarker === n && (hoveredMarker = null); |
| }); |
| document.GetelementById("marker-icon-url").value = "https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon-2x.png"; |
| openEditor(n); |
| saveMapToStorage(); |
| document.GetelementById("marker-icon-url").value = "https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon-2x.png"; |
| } |
| } |
| }); |
| |
| // マーカー移動時にも保存 |
| map.on("markerdragend", function(e) { |
| saveMapToStorage(); // マーカー移動後に保存 |
| }); |
| |
| map.on("contextmenu", function (e) { |
| const clickedMarkers = []; |
| |
| // クリックされた位置と既存のマーカーの距離を計算 |
| map.eachLayer(function (layer) { |
| if (layer instanceof L.Marker) { |
| const distance = map.distance(e.latlng, layer.getLatLng()); |
| if (distance < 20) { // 近い距離（ピクセル相当の距離）内のマーカーを検出 |
| clickedMarkers.push(layer); |
| } |
| } |
| }); |
| |
| // クリックされたマーカーがあれば、最初の1つに対して編集を開く |
| if (clickedMarkers.length > 0) { |
| openEditor(clickedMarkers[0]); |
| } |
| }); |
| |
| // マップが動いたときに保存 |
| </script> |
| </body> |
| </html> |
