splatone 0.0.1

package/visualizer/bulky/node.js

@@ -0,0 +1,41 @@
+import { VisualizerBase } from '../../lib/VisualizerBase.js';
+import { featureCollection } from "@turf/turf";
+import { writeFileSync } from 'node:fs';
+
+export default class BulkyVisualizer extends VisualizerBase {
+    static id = 'bulky';            // 一意ID（フォルダ名と一致させると運用しやすい）
+    static name = 'Bulky Visualizer';          // 表示名
+    static version = '0.0.0';
+    static description = "全データをCircleMarkerとして地図上に表示";
+
+    constructor() {
+        super();
+    }
+
+    getFutureCollection(result, target){
+           //console.log(JSON.stringify(target, null, 4));
+        const layers = {};
+        for (const hex in result) {
+            for (const cat in result[hex]) {
+                if (!layers.hasOwnProperty(cat)) {
+                    layers[cat] = [];
+                }
+                for (const feature of result[hex][cat].items.features) {
+                    feature.properties["radius"] = 5;
+
+                    feature.properties["stroke"] = true;
+                    feature.properties["color"] = target.splatonePalette[cat].darken;                    
+                    feature.properties["weight"] = 1;
+                    feature.properties["opacity"] = 1;
+
+                    feature.properties["fill"] = true;
+                    feature.properties["fillColor"] = target.splatonePalette[cat].color;
+                    feature.properties["fillOpacity"] = .5;
+ 
+                    layers[cat].push(feature);
+                }
+            }
+        }
+        return Object.fromEntries(Object.entries(layers).map(([k, v]) => [k, featureCollection(v)]));
+    }
+}

package/visualizer/bulky/web.js

@@ -0,0 +1,29 @@
+let booted = false;
+export default async function main(map, geojson, options = {}) {
+    if (booted) return;
+    booted = true;
+    const layers = {};
+    for (const cat in geojson) {
+        const layer = addGeoJSONLayer(map, geojson[cat], {
+            pointToLayer: (feature, latlng) => {
+                return L.circleMarker(latlng, {
+                    radius: feature.properties.radius,
+                    stroke: feature.properties.stroke,
+                    color: feature.properties.color,
+                    weight: feature.properties.weight,
+                    opacity: feature.properties.opacity,
+                    fill: feature.properties.fill,
+                    fillColor: feature.properties.fillColor,
+                    fillOpacity: feature.properties.fillOpacity
+                })
+            },
+            onEachFeature: (feature, layer) => {
+                const t = `<img src="${feature.properties.url_s}">` || "NO Image!";
+                layer.bindTooltip(t ?? '', { direction: 'top', opacity: 0.9 });
+            }
+
+        });
+        layers[cat] = layer;
+    }
+    return layers;
+}

package/visualizer/marker-cluster/node.js

@@ -0,0 +1,50 @@
+import { VisualizerBase } from '../../lib/VisualizerBase.js';
+import { featureCollection } from "@turf/turf";
+
+
+export default class MarkerClusterVisualizer extends VisualizerBase {
+    static id = 'marker-cluster';            // 一意ID（フォルダ名と一致させると運用しやすい）
+    static name = 'Marker Cluster Visualizer';          // 表示名
+    static version = '0.0.0';
+    static description = "マーカークラスターとして地図上に表示";
+
+    constructor() {
+        super();
+    }
+
+    concatFC(fcA, fcB) {
+        return {
+            type: "FeatureCollection",
+            features: [
+                ...(fcA?.features ?? []),
+                ...(fcB?.features ?? []),
+            ]
+        };
+    }
+    addCategory(fc, value, key = "category", overwrite = true) {
+        const features = (fc?.features ?? []).map(f => {
+            const props = { ...(f.properties ?? {}) };
+            if (overwrite || props[key] == null) {
+                props[key] = value;
+            }
+            return { ...f, properties: props };
+        });
+        return { type: "FeatureCollection", features };
+    }
+    getFutureCollection(result, target) {
+        //console.log(JSON.stringify(target, null, 4));
+        const layers = {};
+        for (const hex in result) {
+            for (const cat in result[hex]) {
+                if (!layers.hasOwnProperty(cat)) {
+                    layers[cat] = [];
+                }
+                for (const feature of result[hex][cat].items.features) {
+                    feature.properties["category"] = cat;
+                    layers[cat].push(feature);
+                }
+            }
+        }
+        return Object.fromEntries(Object.entries(layers).map(([k, v]) => [k, featureCollection(v)]));
+    }
+}

package/visualizer/marker-cluster/public/style.css

@@ -0,0 +1 @@
+.cluster-cat .marker-cluster div { color: #fff; font-weight: 700; }

package/visualizer/marker-cluster/web.js

@@ -0,0 +1,153 @@
+let booted = false;
+export default async function main(map, geojson, options = { palette: {} }) {
+    if (booted) return;
+    booted = true;
+
+    const urls = [
+        'https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css',
+        'https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css',
+        'https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js',
+        './visualizer/marker-cluster/public/style.css',
+    ];
+
+    try {
+        await Promise.all(urls.map(loadAsset));
+        console.log('すべて読み込み完了！');
+    } catch (err) {
+        console.error('どれかの読み込みに失敗:', err);
+    }
+
+    const categoryColors = new Map();
+    for (const cat in options.palette) {
+        categoryColors.set(cat, options.palette[cat].color);
+    }
+
+    const clusterByCategory = new Map(); // category -> L.MarkerClusterGroup
+    const overlaysForControl = {};
+    function getOrCreateCluster(category) {
+        if (clusterByCategory.has(category)) return clusterByCategory.get(category);
+
+        const color = categoryColors.get(category);
+        // カスタム iconCreateFunction（色違いの泡）
+        const group = L.markerClusterGroup({
+            chunkedLoading: true,
+            disableClusteringAtZoom: 18,
+            maxClusterRadius: 60,
+            spiderfyOnMaxZoom: true,
+            showCoverageOnHover: false,
+            iconCreateFunction: (cluster) => {
+                const count = cluster.getChildCount();
+                const size = count >= 100 ? 48 : (count >= 10 ? 40 : 32);
+                const html = `<div style="
+            width:${size}px;height:${size}px;border-radius:50%;
+            background:${color}; color:#fff; display:flex;
+            align-items:center; justify-content:center; font-weight:700;">
+            ${count}</div>`;
+                return L.divIcon({
+                    html, className: 'marker-cluster cluster-cat', iconSize: L.point(size, size)
+                });
+            }
+        });
+
+        clusterByCategory.set(category, group);
+        // レイヤコントロールに追加（カテゴリ名をラベルに）
+        overlaysForControl[`MarkerCluster: ${category}`] = group;
+        return group;
+    }
+    // ====== Feature をマーカー（代表点）に変換 ======
+    function featureToMarkers(feature) {
+        const g = feature.geometry;
+        const markers = [];
+        if (!g) return markers;
+
+        // マーカーを作るユーティリティ
+        const addMarker = (lng, lat) => {
+            const m = L.marker([lat, lng], {
+                // 見た目を点寄りにしたい場合は小さな divIcon にしてもOK
+                // icon: L.divIcon({className:'', html:'<div style="width:8px;height:8px;border-radius:50%;background:#444"></div>', iconSize:[8,8]})
+            });
+            const props = feature.properties ?? {};
+            const name = props.name ?? '(no name)';
+            const cat = props.category ?? 'uncategorized';
+            m.bindPopup(`<b>${name}</b><br/>category: ${cat}<br/>${Number(lat).toFixed(5)}, ${Number(lng).toFixed(5)}`);
+            markers.push(m);
+        };
+
+        switch (g.type) {
+            case 'Point': {
+                const [lng, lat] = g.coordinates;
+                addMarker(lng, lat);
+                break;
+            }
+            case 'MultiPoint': {
+                for (const [lng, lat] of g.coordinates) addMarker(lng, lat);
+                break;
+            }
+            default: {
+                // Polygon/LineString 系は代表点化（重心が外へ出ることがあるため pointOnFeature を採用）
+                try {
+                    const pof = turf.pointOnFeature(feature);
+                    const [lng, lat] = pof.geometry.coordinates;
+                    addMarker(lng, lat);
+                } catch (e) {
+                    console.warn('pointOnFeature failed:', e, feature);
+                }
+            }
+        }
+        return markers;
+    }
+
+    // ====== 追加処理：カテゴリ別にクラスタへ投入 ======
+    function addFeatureCollectionByCategory(featureCollection, categoryKey = 'category') {
+        const bounds = L.latLngBounds();
+
+        for (const f of featureCollection.features ?? []) {
+            const category = f.properties.category;            
+            const cluster = getOrCreateCluster(category);
+            const markers = featureToMarkers(f);
+            if (markers.length) {
+                cluster.addLayers(markers);
+                for (const m of markers) bounds.extend(m.getLatLng());
+            }
+        }
+
+        // まだマップに載っていないクラスターは載せる
+        for (const [cat, grp] of clusterByCategory.entries()) {
+            console.log("add map", cat);
+            if (!map.hasLayer(grp)) grp.addTo(map);
+        }
+
+        /*
+                if (!layerControl) {
+                    layerControl = L.control.layers({}, overlaysForControl, { collapsed: false }).addTo(map);
+                } else {
+                    // 既存コントロールにも反映（念のため）
+                    layerControl.remove();
+                    layerControl = L.control.layers({}, overlaysForControl, { collapsed: false }).addTo(map);
+                }
+        */
+        //if (bounds.isValid()) map.fitBounds(bounds.pad(0.1));
+        //renderLegend();
+    }
+
+    // ====== 凡例 ======
+    function renderLegend() {
+        const el = document.getElementById('map_legend');
+        el.innerHTML = '<div style="font-weight:700;margin-bottom:4px;">Categories</div>';
+        for (const [cat, color] of categoryColors.entries()) {
+            const item = document.createElement('div');
+            item.className = 'legend-item';
+            item.innerHTML = `<span class="legend-swatch" style="background:${color}"></span><span>${cat}</span>`;
+            el.appendChild(item);
+        }
+    }
+    let layerControl = null;
+
+    // 実データを投入（fetchで置き換え可）
+    for (const cat in geojson) {
+        console.log(cat);
+        addFeatureCollectionByCategory(geojson[cat], cat);
+    }
+    // Mapから単なるObjectへ
+    return Object.fromEntries(clusterByCategory);
+}