質問編集履歴

文字修正

2021/03/16 11:49

投稿

Dounatterun

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

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

経過報告

2021/03/16 11:48

投稿

Dounatterun

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -12,7 +12,7 @@
-**【問題点】Windows10（firefox・Chrome）では問題無く表示動作しているのですが、スマートフォン（Android9 Google Chorme・iPhone Safari ※iOSバージョン不明）において、挙動がおかしな状況にありま・・・。**
+**【問題点】Windows10（firefox・Chrome）では問題無く表示動作しているのですが、スマートフォン（Android9 Google Chorme・iPhone Safari ※iOSバージョン不明）において、挙動がおかしな状況にあります・・・。**
@@ -24,7 +24,9 @@
-clickイベントが適用されているのが原因か？とも思ったのですが、touchend等に変更しても改善出来ませんでした。（iPhoneは未確認なので後日確認予定です）
+clickイベントが適用されているのが原因か？とも思ったのですが、touchend等に変更しても改善出来ませんでした。（~~iPhoneは未確認なので後日確認予定です~~）
+※確認してもらいましたが、やはり改善されない状況の様です。

スペルミス修正

2021/03/14 09:49

投稿

Dounatterun

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

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

2021/03/14 09:34

投稿

Dounatterun

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -106,9 +106,9 @@
-	<link rel="stylesheet" href="/leafret/leaflet.css">
+	<link rel="stylesheet" href="/leaflet/leaflet.css">
-	<link rel="stylesheet" href="/leafret/L.Control.Zoominfo.css">
+	<link rel="stylesheet" href="/leaflet/L.Control.Zoominfo.css">
@@ -116,19 +116,19 @@
-	<script src="/leafret/leaflet.js"></script>
+	<script src="/leaflet/leaflet.js"></script>
-	<script src="/leafret/L.Control.Zoominfo.js"></script>
+	<script src="/leaflet/L.Control.Zoominfo.js"></script>
-	<link rel="stylesheet" href="/leafret/leaflet.locationlist.css">
+	<link rel="stylesheet" href="/leaflet/leaflet.locationlist.css">
-	<script src="/leafret/leaflet.locationlist.js"></script>
+	<script src="/leaflet/leaflet.locationlist.js"></script>
-	<script src="/leafret/map.js"></script>
+	<script src="/leaflet/map.js"></script>
 </head>
@@ -260,7 +260,7 @@
 	var iconRed = L.icon({
-		iconUrl: 'leafret/img/ico/ico1-red.png',
+		iconUrl: 'leaflet/img/ico/ico1-red.png',
 		iconSize: [25, 41],
@@ -268,7 +268,7 @@
 		tooltipAnchor:[2, -45],
-		shadowUrl: 'leafret/img/ico/ico0-shadow.png',
+		shadowUrl: 'leaflet/img/ico/ico0-shadow.png',
 		shadowSize: [26, 9],

変数スペルミス修正

2021/03/14 09:31

投稿

Dounatterun

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -172,7 +172,7 @@
-	var NoramlView = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
+	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>",
@@ -192,7 +192,7 @@
-	NoramlView.addTo(map);
+	NormalView.addTo(map);
@@ -220,7 +220,7 @@
-			map.removeLayer(NoramlView);
+			map.removeLayer(NormalView);
 			map.removeLayer(LargeView);
@@ -238,13 +238,13 @@
-			map.removeLayer(NoramlView);
+			map.removeLayer(NormalView);
 			map.removeLayer(LargeView);
-			NoramlView.addTo(map);
+			NormalView.addTo(map);

ソースコードを追加しました。

2021/03/01 15:02

投稿

Dounatterun

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -35,3 +35,401 @@
 お手数おかけしますが宜しくお願いします。
+必用なファイルと修正を加えたコードは以下をご覧ください。
+---
+**◆追加したファイル。**
+ **leaflet.css**
+ **leaflet.js**
+[https://github.com/Leaflet/Leaflet](https://github.com/Leaflet/Leaflet)
+**L.Control.Zoominfo.css**
+**L.Control.Zoominfo.js**
+[https://github.com/flaviocarmo/Leaflet.zoominfo/](https://github.com/flaviocarmo/Leaflet.zoominfo/)
+**leaflet.locationlist.css**
+**leaflet.locationlist.js**
+[https://github.com/mithron/leaflet.locationlist](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="/leafret/leaflet.css">
+	<link rel="stylesheet" href="/leafret/L.Control.Zoominfo.css">
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+	<script src="/leafret/leaflet.js"></script>
+	<script src="/leafret/L.Control.Zoominfo.js"></script>
+	<link rel="stylesheet" href="/leafret/leaflet.locationlist.css">
+	<script src="/leafret/leaflet.locationlist.js"></script>
+	<script src="/leafret/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 NoramlView = 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
+	})
+	NoramlView.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(NoramlView);
+			map.removeLayer(LargeView);
+			LargeView.addTo(map);
+			zoomFlag = false;
+		}else if (zoom < 14 && zoomFlag == false) {
+			map.removeLayer(NoramlView);
+			map.removeLayer(LargeView);
+			NoramlView.addTo(map);
+			zoomFlag = true;
+		}
+	})
+	var iconRed = L.icon({
+		iconUrl: 'leafret/img/ico/ico1-red.png',
+		iconSize: [25, 41],
+		iconAnchor: [9, 41],
+		tooltipAnchor:[2, -45],
+		shadowUrl: 'leafret/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);
+}
+```