Leaflet のプラグイン locationlist のスマートフォンにおけるセレクトメニューの挙動がおかしい。

この度はお世話になります。

現在、Leaflet 及び leaflet.locationlist.js を使ってマップコンテンツを作成しているのですが、以下内容について、ご存知の方がいらっしゃいましたらご教示いただければ幸いに存います。

Leaflet用プラグイン「leaflet.locationlist.js」は、select で選択した option の値に一致するマーカー位置に移動するプラグインです。
※prev next ボタンも表示され、セレクトメニューとも連動して動作するものです。

【問題点】Windows10（firefox・Chrome）では問題無く表示動作しているのですが、スマートフォン（Android9 Google Chorme・iPhone Safari ※iOSバージョン不明）において、挙動がおかしな状況にあります・・・。

●Androidの場合は、セレクトメニューを選択して移動した場合、今選択した箇所ではなく、その１つ前に選択した箇所に移動してしまいます。

●iPhoneの場合は、セレクトメニューをクリックすると画面下に option の value 値の一覧が表示される（縦方向に回転表示される）ものの、タップしても反応が無い状況のようです。

clickイベントが適用されているのが原因か？とも思ったのですが、touchend等に変更しても改善出来ませんでした。（~~iPhoneは未確認なので後日確認予定です~~）
※確認してもらいましたが、やはり改善されない状況の様です。

firefoxの開発ツール＆エミュレーター(アドオン：User-Agent Switcher)ではiOS Safari12.1.1の場合、select内のoptionは選択できない状況にあります。
※展開しません。

お手数おかけしますが宜しくお願いします。
必用なファイルと修正を加えたコードは以下をご覧ください。

◆追加したファイル。
leaflet.css
leaflet.js
https://github.com/Leaflet/Leaflet

L.Control.Zoominfo.css
L.Control.Zoominfo.js
https://github.com/flaviocarmo/Leaflet.zoominfo/

leaflet.locationlist.css
leaflet.locationlist.js
https://github.com/mithron/leaflet.locationlist

◆以下追加及び変更したファイル

◆leaflet.locationlist.js
文字数制限で入力できませんでしたのでご了承ください。
leaflet.locationlist.js 内の click を touchend に変更しました。

◆map.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
	
	<title>MAP SAMPLE</title>
	
	<link rel="stylesheet" href="/leaflet/leaflet.css">
	<link rel="stylesheet" href="/leaflet/L.Control.Zoominfo.css">
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	
	<script src="/leaflet/leaflet.js"></script>
	<script src="/leaflet/L.Control.Zoominfo.js"></script>
	
	<link rel="stylesheet" href="/leaflet/leaflet.locationlist.css">
	<script src="/leaflet/leaflet.locationlist.js"></script>
	
	<script src="/leaflet/map.js"></script>
</head>
<body onload="init()">
<div id="map" style="width:960px;height:700px"></div>
</body>
</html>

◆map.js

function init() {
	
	var map = L.map('map',{
		preferCanvas: true,
		minZoom: 11,
		maxZoom: 18,
		zoominfoControl: true,
		zoomControl: false
	});
	
	map.setView([35.681230987174175, 139.76694817590177], 11);
	
	var NormalView = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>",
		opacity: 1.0
	})
	
	var LargeView = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>",
		opacity: 0.5
	})
	
	NormalView.addTo(map);
	
	
	map.zoominfoControl.setPosition('bottomright');
	
	
	var zoomFlag = true;
	var zoom = "";
	map.on('zoom', function () {
		
		zoom = map.getZoom();
		
		if (zoom >= 14 && zoomFlag == true) {
			
			map.removeLayer(NormalView);
			map.removeLayer(LargeView);
			
			LargeView.addTo(map);
			
			zoomFlag = false;
			
		}else if (zoom < 14 && zoomFlag == false) {
			
			map.removeLayer(NormalView);
			map.removeLayer(LargeView);
			
			NormalView.addTo(map);
			
			zoomFlag = true;
		}
		
	})
	
	var iconRed = L.icon({
		iconUrl: 'leaflet/img/ico/ico1-red.png',
		iconSize: [25, 41],
		iconAnchor: [9, 41],
		tooltipAnchor:[2, -45],
		shadowUrl: 'leaflet/img/ico/ico0-shadow.png',
		shadowSize: [26, 9],
		shadowAnchor: [-2, 10]
	});
	
	var LocationVal = [];
	var markerList = [
		 { marker_name:"東京タワー", marker_latlng:[35.65859791456946, 139.74541144061445], marker_url:"https://www.tokyotower.co.jp/" ,marker_direction:"top", marker_zoom:18 },
		 { marker_name:"東京スカイツリー", marker_latlng:[35.71008010331086, 139.81071112712235], marker_url:"https://www.tokyo-skytree.jp/" ,marker_direction:"top", marker_zoom:18 },
		 { marker_name:"上野動物園", marker_latlng:[35.716976132736804, 139.7712747831497], marker_url:"https://www.tokyo-zoo.net/zoo/ueno/" ,marker_direction:"top", marker_zoom:18 }
	];
	
	
	var HtmlContents = [];
	var DirectionVal = "";
	var OffsetVal    = "";
	
	
	var iconMarkers = L.featureGroup();
	
	var AddClassName = [];
	for (var i=0; i<markerList.length; i++) {
		
		HtmlContents[i] = '<div class="Tooltip"><strong class="block">' + markerList[i].marker_name + '</strong></div>';
		
		 if(markerList[i].marker_direction == 'bottom') {
			DirectionVal = 'bottom';
			OffsetVal    = L.point(2, 45);
		}
		else if(markerList[i].marker_direction == 'right') {
			DirectionVal = 'right';
			OffsetVal    = L.point(20, 17);
		}
		else if(markerList[i].marker_direction == 'left') {
			DirectionVal = 'left';
			OffsetVal    = L.point(-20, 17);
		}else{
			DirectionVal = 'top';
			OffsetVal    = L.point(0, 0);
		}
		
		LocationVal[i] = markerList[i]["marker_url"];
		
		
		iconMarkers.addLayer( L.marker(
			markerList[i].marker_latlng,{title:markerList[i].marker_name,icon:iconRed}).bindTooltip(HtmlContents[i],{
			permanent:true,direction:DirectionVal,offset:OffsetVal
		}) );
		
		iconMarkers.addTo(map);
		
	}
	
	map.fitBounds(iconMarkers.getBounds());
	
	MarkerSet(markerList, map);
	
}

function MarkerSet(markerList, map) {
	
	var locList = [];
	
	$(".leaflet-marker-pane img").each(function(i) {
		
		locList.push( { title: markerList[i]["marker_name"] , latlng: markerList[i]["marker_latlng"], zoom: markerList[i]["marker_zoom"] } );
		
		if(markerList[i]["marker_url"] != "") {
			$(this).on('click', function() {
				location.href = markerList[i]["marker_url"];
			});
		}
		
	})
	
	var locListCtrl = new L.control.locationlist({
		locationsList: locList,
		showList:true
	});
	map.addControl(locListCtrl);
	
}

退会済みユーザー

2021/03/01 06:11

検証可能なコードを提示してください

Dounatterun

2021/03/01 14:41

qnoir様、この度はお世話になります。コードを入力しましたのでご確認いただければ幸いです。宜しくお願いします。

行動規範の内容に同意します

回答2件

回答が重複しましたので以下ご参照ください。
※自己解決の回答が重複した為、削除できない為に変更

投稿2021/03/16 11:34

編集2021/03/16 11:42

Dounatterun

総合スコア1

自己解決

自己解決しましたのでお知らせします。
厳密にこれで良いのか解りませんが、バブリングとイベントに原因があったようです。
とりあえずこれでiPhoneでの挙動Androidでの挙動が直りました・・・たぶん。
※逆に古すぎるスマホ・最新のスマホで挙動がどうかは未検証の為解りませんのでご了承ください。
※firefoxの開発ツール＆エミュレーター(アドオン：User-Agent Switcher)でも動作は正常です。

【原因】leaflet.locationlist.js 内のバブリングの問題と selectタグに対するイベントが change じゃなかったから・・・！？

以下の部分を修正しました。

https://github.com/mithron/leaflet.locationlist/blob/master/src/leaflet.locationlist.js

34行目

L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);

↑
以下に変更
↓

L.DomEvent.on(container, 'touchstart', L.DomEvent.stopPropagation);//スマホ用iPhone用
L.DomEvent.on(container, 'mouseup', L.DomEvent.preventDefault);//PC用
//PC用は若干気持ち悪い気もしますがこうしておかないとマップを掴んだまま離さない現象が出る。
//touchstartも反応してるのかもしれないですが・・・良く解りません。
//間違ってたらすみません・・・(^^;)

52・53行目

L.DomEven
.addListener(this._fullist, 'click', this._onListChange, this);

↑
以下に変更
↓

L.DomEvent.addListener(this._fullist, 'change', this._onListChange, this);
//セレクトメニューなので素直にchangeにしたらあら素敵。一つ前表示現象が改善されました。

79～82行目

L.DomEvent
// .addListener(option, 'click', L.DomEvent.stopPropagation)
//	.addListener(option, 'click', L.DomEvent.preventDefault);
    .addListener(option, 'click', this._onListChange, this);

↑
以下に変更
↓

L.DomEvent.addListener(option, 'touchend', this._onListChange, this);//スマホ用
L.DomEvent.addListener(option, 'mouseup', this._onListChange, this);//PC用
//ここはclickのままでも問題無さそうですが一応変更しました。

投稿2021/03/16 11:24

編集2021/03/16 11:48

Dounatterun

総合スコア1