WordPressのループ処理とLeafletの連携

事例の概要

本事例は、WordPressのサブクエリーによってテキストデータを動的に表示し、そのループ処理の中でLeafletのマーカー表示を行い、WordPressのテキスト側からLeafletのポップアップ操作を行う事例です。

 冒頭のstatic public $const = array() ;でクラス定数$constを定義します。これは、ループ処理の中でマーカーの情報を一時的に格納するための配列定数です。
 $the_query = new WP_Query($args) ;にてサブクエリーを実行します。
 テキストを表示するWhileループの中で、クラス定数$constに、 緯度($lat),経度( $lon), コンテンツのタイトル($title)などを格納します。以上がPHPの処理です。
 次に、HTMLによる背景地図の設定を行います。
 <div id=”map_2″ style=”height: 400px;”></div>
 最後にLeaflet.jsによる描画処理を行います。

コード例
static public $const = array() ;//クラス定数を定義
	
	public function __construct()
	{

//サブクエリー(テキストを抽出)
	$args = array(
		'post_type' => 'post',
		'tax_query' => array(
		'relation' => 'AND',
			array(
				'taxonomy' => 'region',			
				'field' => 'term_id',
				'terms' => '9790',//中央区
			),
			array(
				'taxonomy' => 'genre',				
				'field' => 'term_id',
				'terms' => '10274',//商店街
			)
		)
	);
	$the_query = new WP_Query($args) ;
//サブループ
	if($the_query->have_posts()){
		While($the_query->have_posts()){
			$the_query->the_post();
				$count++;
//表示(View)部分
	//クラス定数へ緯度経度情報を書き込み
			$array = code40307::$const ;//クラス定数を読み込み
			$num = $count-1 ;
			$id = get_the_ID() ;
			$title = get_post($id)->post_title ;
			$lat = get_post_meta($id, 'latitude', true);//緯度
			$lon = get_post_meta($id, 'longitude', true);//経度
			$array[] = [$id, $lat, $lon, $num, $title];//多次元配列に要素を追加
			code40307::$const = $array ;//クラス定数へ書き込み
	//HTML記述
			?><a class="<?php
				echo $par2->id ;
				echo ' ' ;
				echo 'tag' ;
			?>"href="<?php
				echo get_permalink();
			?>" onmouseover="<?php
				echo 'popupOn2('.$num.');' ;
			?>"><?php
				the_title() ;
				echo "<br>\n" ;
			?></a><?php
					
		}//endwhile
	}//endif

//事物表示
	//クラス定数の呼び出し
	$map_marker_json = json_encode(code40307::$const);
	//地図エリアの設定
	?>
	<body>
    	<div id="map_2" style="height: 400px;"></div>
	</body>

<script>
//背景地図
	var osm = new L.tileLayer
	('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    	maxZoom: 19,
    	attribution: "Map data © <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors"
	});	
	var map_2 = L.map('map_2', {
		layers: [osm],	
		center: [35.664897,139.776624],
		zoom: 15,
    	zoomControl: true
		});

//マーカー表示	
	var array = JSON.parse('<?php echo $map_marker_json; ?>');
	var addmarker2=[];
	var i = 0
	//ループ
	array.forEach(function(id){
    	addmarker2[i]=L.marker([id[1],id[2]]).addTo(map_2).bindPopup(id[4]);
		i++;
	});//endeach

//ポップアップを開く関数
	function popupOn2(id){
		addmarker2[id].openPopup();
	}	
	
</script>
上記コードの実行結果

参考文献

参考記事