Spaces:

soiz1
/

map-editor

Running

App Files Files Community

soiz1 commited on Jan 26, 2025

Commit

a7ebd15

verified ·

1 Parent(s): dc7cba2

Update index.html

Browse files

Files changed (1) hide show

index.html +513 -19

index.html CHANGED Viewed

@@ -1,19 +1,513 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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" />
+    <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('/tool/marker');">アイコン</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>
+    <!-- HTML入力エリアの追加 -->
+    <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);
+    });
+}
+        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;
+            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();
+            const 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: '&copy; <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>
+            `;
+            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: '&copy; <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);
+// マーカー追加時
+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;
+        });
+        n.on("mouseout", function() {
+            hoveredMarker === n && (hoveredMarker = null);
+        });
+        openEditor(n);
+        saveMapToStorage(); // 新しいマーカー追加後に保存
+    }
+});
+// マーカー移動時にも保存
+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>