https://sawata-restaurant-map.netlify.app/assets/Map-LPdcHNgE.js

1import{j as x}from"./vendor-ui-CE6qqebw.js";import{h as I,b as c,R as C}from"./vendor-react-lGWVILnG.js";import{a as M}from"./vendor-utils-B9u9thzI.js";import{G as P,L as T}from"./index-Cja7iqBJ.js";var O=M();const _=I(O),z=t=>{const a={type:"FeatureCollection",features:[]};let r=0;for(const n in t){const o=t[n];if(!o.経度||!o.緯度||!o.スポット名){r++;continue}const p=Number(o.経度),b=Number(o.緯度);if(!Number.isFinite(p)||!Number.isFinite(b)){r++;continue}const h={type:"Feature",geometry:{type:"Point",coordinates:[p,b]},properties:{_id:n}};for(let f=0;f<Object.keys(o).length;f++){const F=Object.keys(o)[f];h.properties[F]=o[F]}a.features.push(h)}return r>0&&console.warn(`toGeoJson: skipped ${r} invalid item(s)`),a},D=t=>{t.addLayer({id:"clusters",type:"circle",source:"shops",filter:["has","point_count"],paint:{"circle-radius":["step",["get","point_count"],16,10,20,50,26,100,32],"circle-color":["step",["get","point_count"],"#3CB371",10,"#FFD54F",50,"#FF8A65",100,"#E53935"],"circle-stroke-width":2,"circle-stroke-color":"#FFFFFF","circle-opacity":.9}}),t.addLayer({id:"cluster-count",type:"symbol",source:"shops",filter:["has","point_count"],paint:{"text-color":"#222222","text-halo-color":"#FFFFFF","text-halo-width":2},layout:{"text-field":"{point_count_abbreviated}","text-size":12,"text-font":["Noto Sans Regular"]}}),t.on("click","clusters",a=>{const r=t.queryRenderedFeatures(a.point,{layers:["clusters"]}),n=r[0].properties.cluster_id;t.getSource("shops").getClusterExpansionZoom(n,(o,p)=>{o||t.easeTo({center:r[0].geometry.coordinates,zoom:p})})}),t.on("mouseenter","clusters",function(){t.getCanvas().style.cursor="pointer"}),t.on("mouseleave","clusters",function(){t.getCanvas().style.cursor=""})},A=[138.3,38],G=8,N={width:"100%",height:"100%",position:"relative",filter:"saturate(0.92) brightness(0.976)",transform:"translateZ(0)"},w={ブルワリー:"#007bff",ボトルショップ:"#28a745",ビアバー:"#ffc107",その他:"#6c757d"},R=Object.entries(w).flatMap(([t,a])=>t==="その他"?[]:[t,a]),Z=t=>{const a=["poi","poi-primary","poi-r0-r9","poi-r10-r24","poi-r25","poi-bus","poi-entrance"];for(let r=0;r<a.length;r++){const n=a[r];t.setLayoutProperty(n,"visibility","none")}};function B(t){const{onSelectShop:a}=t,{location:r}=c.useContext(P),n=C.useRef(null),[o,p]=C.useState(),[b,h]=c.useState(!1),[f,F]=c.useState(!1),E=c.useRef(null),L=c.useCallback((e,s)=>{if(!e)return;h(!0);const l=z(s);if(e.getSource("shops")&&f){e.getSource("shops").setData(l),h(!1);return}e.getSource("shops")||e.addSource("shops",{type:"geojson",data:l,cluster:!0,clusterMaxZoom:14,clusterRadius:25}),f||(e.addLayer({id:"shop-points-outer",type:"circle",source:"shops",filter:["all",["==","$type","Point"]],paint:{"circle-radius":16,"circle-color":["match",["get","カテゴリ"],...R,w.その他],"circle-opacity":.35,"circle-stroke-width":3,"circle-stroke-color":"#FFFFFF","circle-stroke-opacity":1,"circle-blur":.4}}),e.addLayer({id:"shop-points-inner",type:"circle",source:"shops",filter:["all",["==","$type","Point"]],paint:{"circle-radius":8,"circle-color":["match",["get","カテゴリ"],...R,w.その他],"circle-opacity":.95,"circle-stroke-width":1.5,"circle-stroke-color":"#FFFFFF","circle-stroke-opacity":1}}),e.addLayer({id:"shop-symbol",type:"symbol",source:"shops",filter:["all",["==","$type","Point"]],paint:{"text-color":"#222222","text-halo-color":"#FFFFFF","text-halo-width":2},layout:{"text-field":"{スポット名}","text-font":["Noto Sans Regular"],"text-variable-anchor":["top","bottom","left","right"],"text-radial-offset":.6,"text-justify":"auto","text-size":["interpolate",["linear"],["zoom"],10,10,12,12,14,14],"text-anchor":"top","text-max-width":14,"text-allow-overlap":!1}}),["shop-points-outer","shop-points-inner","shop-symbol"].forEach(g=>{e.on("mouseenter",g,()=>{e.getCanvas().style.cursor="pointer"}),e.on("mouseleave",g,()=>{e.getCanvas().style.cursor=""}),e.on("click",g,d=>{d.features[0].properties.cluster||a(d.features[0].properties)})}),D(e),F(!0)),h(!1)},[a,f]);c.useEffect(()=>{o&&L(o,t.data)},[o,t.data,L]);const v=c.useRef(null);return c.useEffect(()=>{if(!o||t.data.length===0)return;const e=v.current!==null&&v.current!==t.data.length,s=t.initialData&&t.data.length!==t.initialData.length;

1if(e||s||!r){const l=z(t.data),u=_(l);u&&o.fitBounds(u,{padding:50})}v.current=t.data.length},[o,t.data,r,t.initialData]),c.useEffect(()=>{if(!o||!t.selectedShop)return;const e=parseFloat(t.selectedShop.緯度),s=parseFloat(t.selectedShop.経度);!e||!s||isNaN(e)||isNaN(s)||o.flyTo({center:[s,e],zoom:17,essential:!0})},[o,t.selectedShop]),c.useEffect(()=>{if(!n.current||o)return;const e=()=>{const{geolonia:d}=window;if(!d)return!1;const S=r||A,m=r?15:G,i=new d.Map({container:n.current,style:"geolonia/basic",center:S,zoom:m,interactive:!0,trackResize:!0}),k=()=>{Z(i),p(i),n.current&&(n.current.style.filter="saturate(0.85) brightness(1.02)",n.current.style.transform="translateZ(0)");try{const y=new d.GeolocateControl({positionOptions:{enableHighAccuracy:!0,timeout:2e3,maximumAge:0},trackUserLocation:!0,showUserLocation:!0});i.addControl(y,"top-right"),E.current=y,setTimeout(()=>{y.trigger()},100),y.on("error",()=>{console.warn("位置情報の取得に失敗しましたが、地図は使用できます")})}catch(y){console.warn("位置情報コントロールの初期化に失敗しましたが、地図は使用できます",y)}},j=()=>{i.resize()};return i.on("load",k),window.addEventListener("orientationchange",j),()=>{window.removeEventListener("orientationchange",j),i.off("load",k)}},s=e();if(s)return s;let l;const u=setInterval(()=>{const d=e();d&&(clearInterval(u),l=d)},100),g=setTimeout(()=>{clearInterval(u)},1e4);return()=>{clearInterval(u),clearTimeout(g),l&&l()}},[o,r]),c.useEffect(()=>{const e=()=>{try{E.current?.trigger()}catch{}};return window.addEventListener("map:recenter",e),()=>{window.removeEventListener("map:recenter",e)}},[]),c.useEffect(()=>{if(!o||!n.current)return;const e=()=>{[".maplibregl-ctrl-bottom-left",".maplibregl-ctrl-bottom-right"].forEach(m=>{const i=n.current?.querySelector(m);i&&(i.style.setProperty("bottom","0px","important"),i.style.setProperty("z-index","50","important"))}),[".maplibregl-ctrl-attrib.maplibregl-compact","details.maplibregl-ctrl-attrib.maplibregl-compact"].forEach(m=>{const i=n.current?.querySelector(m);i&&(i.style.setProperty("margin","0","important"),i.style.setProperty("margin-bottom","0","important"))})},s=()=>{setTimeout(e,200)};o.on("load",s),setTimeout(e,300);const l=new MutationObserver(()=>{setTimeout(e,100)});l.observe(n.current,{childList:!0,subtree:!0});const u=()=>{setTimeout(e,100)};return window.addEventListener("resize",u),()=>{o.off("load",s),l.disconnect(),window.removeEventListener("resize",u)}},[o]),x.jsxs("div",{style:N,children:[b&&x.jsx("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",zIndex:1e3},children:x.jsx(T,{variant:"pulse",size:"sm",text:"マーカーを読み込み中..."})}),x.jsx("div",{ref:n,style:N,"data-geolocate-control":"off","data-marker":"off","data-gesture-handling":"on","data-loader":"off"})]})}export{B as default};