WordPress의 플러그인 "All-in-One Event Calendar"에서 사용하는지도를 Leaflet (OpenStreetMap)으로 바꾸는 방법

All-in-One Event Calendar에서 사용하는 지도를 Leaflet(OpenStreetMap)으로 대체하는 스크립트를 만들어 보았습니다.

그럼 대체 방법입니다.

먼저 WordPress에서 스크립트를 추가하는 플러그인 "Insert Headers and Footers"를 설치하고 활성화하십시오.



설정→Insert Headers and Footers를 엽니다.

<link rel='stylesheet' id='leaflet_stylesheet-css'  href='https://unpkg.com/[email protected]/dist/leaflet.css' type='text/css' media='' />
<script async type='text/javascript' src='https://unpkg.com/[email protected]/dist/leaflet.js'></script>
<style type="text/css">
.leaflet-zoom-box { z-index: 280; }
.leaflet-pane         { z-index: 240; }
.leaflet-overlay-pane { z-index: 240; }
.leaflet-shadow-pane  { z-index: 250; }
.leaflet-marker-pane  { z-index: 260; }
.leaflet-tooltip-pane   { z-index: 265; }
.leaflet-popup-pane   { z-index: 270; }
.leaflet-control { z-index: 280; }
.leaflet-top,
.leaflet-bottom { z-index: 299; }
.ai1ec-gmap-link { z-index: 299; }
</style>
<script type="text/javascript">
    var oc = document.getElementById("ai1ec-gmap-canvas");
    if (oc) {
        oc.style.visibility = "hidden";
    }
    window.addEventListener("load", function ()
    {
        setTimeout(function ()
        {
            var o = document.getElementById("ai1ec-gmap-address");
            if (o) {
                var oc = document.getElementById("ai1ec-gmap-canvas");
                if (oc) {
                    oc.innerHTML = "";
                    oc.style.visibility = "visible";
                }
                var
                    lat_lng = o.value.split(','),
                    lat = parseFloat(lat_lng[0]),
                    lng = parseFloat(lat_lng[1]),
                    map = L.map('ai1ec-gmap-canvas', {
                        scrollWheelZoom: false,
                        tap: false,
                        dragging: window.ontouchstart !== null
                    }).setView(
                        [lat, lng],
                        17
                    );
                L.tileLayer(
                    '//{s}.tile.osm.org/{z}/{x}/{y}.png', 
                    { attribution: 'Map data © <a href="https://osm.org/copyright">OpenStreetMap</a>' }
                ).addTo(map);
                L.marker(
                    [lat, lng]
                ).addTo(map);
            }
        }, 500);
    }, false);
</script>

위 코드를 Scripts in Footer에 복사하고 Save를 누르면 완료됩니다.



Leaflet(OpenStreetMap)에서 표시하게 되었습니다.

좋은 웹페이지 즐겨찾기