Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
プラグインを使わずにHTTPS接続で運用されているWordpressの記事内にLeafletで地図を表示させるためのショートコードのサンプル。
<?php
/*
このコードを使用した結果に関しては、いかなる保証も行いませんので、
その点につきましてはあしからずご了承ください。
*/
$_simple_leaflet_demo_map_number = 0;
function simple_leaflet_demo($atts) {
global $_simple_leaflet_demo_map_number;
$atts = shortcode_atts(array(
"lat" => 35.510281,
"lon" => 139.606164,
"zoom" => 16,
"popup" => "International Stadium Yokohama<br>横浜国際総合競技場"
),$atts);
$str = "";
if ($_simple_leaflet_demo_map_number == 0) {
$str = "<script type=\"text/javascript\">
function addOnloadEvent(f) {
if ( typeof window.addEventListener != \"undefined\" )
window.addEventListener( \"load\", f, false );
else if ( typeof window.attachEvent != \"undefined\" ) {
window.attachEvent( \"onload\", f );
} else {
window.onload = f;
}
}
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = 'https://unpkg.com/leaflet@1.2.0/dist/leaflet.css';
link.rel = 'stylesheet';
head.appendChild(link);
var script = document.createElement('script');
script.src = 'https://unpkg.com/leaflet@1.2.0/dist/leaflet.js';
script.async = false;
head.appendChild(script);
</script>";
}
$_simple_leaflet_demo_map_number++;
$str .= "<div id=\"mapid".$_simple_leaflet_demo_map_number."\" style=\"height:250px\"></div>
<script type=\"text/javascript\">
onload_event_".$_simple_leaflet_demo_map_number." = function(){
var map = L.map('mapid".$_simple_leaflet_demo_map_number."').setView([".$atts["lat"].", ".$atts["lon"]."], ".$atts["zoom"].");
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href=\"https://osm.org/copyright\">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([".$atts["lat"].", ".$atts["lon"]."]).addTo(map)
.bindPopup('".$atts["popup"]."').openPopup();};
addOnloadEvent(onload_event_".$_simple_leaflet_demo_map_number.");
</script>";
return $str;
}
add_shortcode('simple-leaflet-demo','simple_leaflet_demo');
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.