晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

兵庫県)妙見山。ケーブル・リフト。あじさいが見頃。ホオジロ。

7月2日。妙見山妙見山は、兵庫県大阪府京都府にまたがる山。(妙見の森ケーブル、リフトは兵庫県内。)

能勢電鉄妙見口駅から妙見の森ケーブルまで徒歩で20分弱。妙見の森ケーブルで妙見の森へ。

妙見の森からリフト。リフトを取り囲むみどりがきれい。リフト沿いのあじさいが見頃。

リフトで妙見の森まで下りて、エドヒガンの小径を散策。

帰りはケーブル下でちょうどバスがやってきたので、バスで妙見口駅まで。

「能勢妙見・里山ぐるっとパス」がお得。阪急電車全線、能勢電鉄全線、妙見の森ケーブル・リフト、妙見口駅からのバスが乗り降り自由で、1,700円。(平日はバスの本数が少ない。)

f:id:art2nd:20200703080337j:plain

f:id:art2nd:20200702215754j:plain

ケーブル、リフト、バス含む(9km、3時間)

f:id:art2nd:20200702220039j:plain

f:id:art2nd:20200702220109j:plain

f:id:art2nd:20200702220112j:plain

f:id:art2nd:20200702220129j:plain

f:id:art2nd:20200702220156j:plain

f:id:art2nd:20200702220338j:plain

f:id:art2nd:20200702230231j:plain

f:id:art2nd:20200702220431j:plain

f:id:art2nd:20200702220518j:plain

f:id:art2nd:20200702220543j:plain

f:id:art2nd:20200702220547j:plain

f:id:art2nd:20200702220622j:plain

f:id:art2nd:20200702220700j:plain

f:id:art2nd:20200702221111j:plain

f:id:art2nd:20200702221202j:plain

f:id:art2nd:20200702221235j:plain

f:id:art2nd:20200702221320j:plain

f:id:art2nd:20200702221353j:plain

f:id:art2nd:20200702221420j:plain

f:id:art2nd:20200702221433j:plain

f:id:art2nd:20200702222216j:plain

ホオジロ

f:id:art2nd:20200702222559j:plain

ホオジロ(遠くて小さな写真をトリミング)

f:id:art2nd:20200702221543j:plain

f:id:art2nd:20200702221602j:plain

f:id:art2nd:20200702221618j:plain

f:id:art2nd:20200702221649j:plain

f:id:art2nd:20200702221753j:plain

f:id:art2nd:20200702221819j:plain

f:id:art2nd:20200703131142j:plain

f:id:art2nd:20200702221916j:plain

2013年に能勢電鉄開業100周年記念として50形のツートンカラーが再現された1500系

Mapbox GL JS)現在地表示、マーカー表示、地点検索、ルート検索。

↑の続き。

Mapbox GL JS」を使って、簡単なWebマップを作ってみた。

Yahoo! JavaScriptマップAPI」や「Google Maps JavaScript API」に比べて、簡単な事をするだけならシンプルで使いやすい。地図そのものは、慣れの問題かもしれないが、Googleマップに比べて見づらい。

とりあえず、シンプルなマップページを作成してみた。

以下のような機能を付けた。

パソコン画面イメージは以下。

f:id:art2nd:20200701113010j:plain

スマホ画面。

f:id:art2nd:20200701113558j:plain

JavaScriptCSS、アクセストーク

「Mapbox GL JS」の基本的なJavaScriptCSSを読み込み、アクセストークンを設定する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset='utf-8'>
<title>mapboxマップ</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js'>
<link rel='stylesheet' href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css'>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.js'>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.css'>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.min.js'>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.css'>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script> mapboxgl.accessToken = 'アクセストークン'; ... (ここに以下のスクリプトを入れる) ... </script> </body> </html>

■ 初期画面で現在地表示

navigator.geolocation.getCurrentPosition(function(position){ // 現在地取得
	var lng = position.coords.longitude;
	var lat = position.coords.latitude;
	mapView(lng, lat);
});
function mapView(lng, lat) {
	var map = new mapboxgl.Map({
		container: 'map',
		style: 'mapbox://styles/xxx/xxxxx', // 日本語スタイル
		center: [lng, lat],
		zoom: 14
	});
	...
	(ここに以下のスクリプトを入れる)
	...
}

↑ エラー処理は省略している。

■ 初期画面の現在地にマーカーを表示

f:id:art2nd:20200701162305j:plain

new mapboxgl.Marker().setLngLat([lng, lat]).addTo(map);

■ 地点検索コントロール

f:id:art2nd:20200701113207j:plain

map.addControl(new MapboxGeocoder({accessToken: mapboxgl.accessToken}), 'top-left');

単純な地点検索だけなら、これだけで出来る。検索結果の緯度経度情報を取得して、そこに地点名を付けたマーカーを表示する方法がよく分からない。

■ 現在位置表示コントロール

f:id:art2nd:20200701113221j:plain

map.addControl(new mapboxgl.GeolocateControl({
	positionOptions: {enableHighAccuracy: false},
	trackUserLocation: true,
	showUserLocation: true
}));

■ ルート検索コントロール

f:id:art2nd:20200701113233j:plain

map.addControl(new MapboxDirections({accessToken: mapboxgl.accessToken}), 'bottom-left');

これだけで、ルート検索機能が付く。始点、終点それぞれ地点名入力と地図上クリックによる場所指定ができる。ただ、これ以外の特殊なことをしようと思うと難しい。

f:id:art2nd:20200701162904j:plain

f:id:art2nd:20200703133552j:plain

スマホ画面

スマホ画面では、ルートのナビウインドウが画面一杯に広がって使い物にならない。ルートのナビウインドウを表示しないようにできるかどうかは不明。

■ 地図拡大縮小コントロール

f:id:art2nd:20200701113245j:plain

map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');

【後日追記】MapboxよりLeafletの方が使いやすいかも。

Mapbox GL JS)トークン取得と地点名の日本語表記。

Yahoo! JavaScriptマップAPI」が、2020年10月31日にサービス提供を終了する。

代替サービスとして「Mapbox」が紹介されているので、「Mapbox GL JS」を使ってみた。

以下、参考ドキュメント。

≪Tutorials | Help | Mapbox≫

https://docs.mapbox.com/help/tutorials/

≪Create a custom style | Help | Mapbox≫

https://docs.mapbox.com/help/tutorials/create-a-custom-style/

≪Publish your style | Mapbox Studio manual | Mapbox≫

https://docs.mapbox.com/studio-manual/overview/publish-your-style/

■ アカウント作成

最初に、Mapboxのアカウントを「Sign up」で作成する。

https://account.mapbox.com/auth/signup/

Google Cloud Platformと違って、クレジットカード情報の登録は不要。

■ アクセストークン取得

Mapbox GL JS」を使うには「access token」が必要。Mapboxアカウントを作成すると自動でひとつ作られる「Default public token」を使う。

https://account.mapbox.com/access-tokens/

f:id:art2nd:20200701110229j:plain

<script>
mapboxgl.accessToken = 'アクセストークン';
</script>

■ 地点名の日本語表記

通常の設定では地図の地点名が日本語表記されない。日本語表記のスタイルに切り換える必要がある。

「スタイル」ページに移動。

https://studio.mapbox.com/styles

「スタイル」ページから「Find inspiration in the style gallery」へ移動。

https://www.mapbox.com/gallery/

「Mapbox Streets Japan」を選択。

f:id:art2nd:20200701103650j:plain

「Add Mapbox Streets Japan to your account」する。

https://www.mapbox.com/gallery/#mapbox-streets%20japan

f:id:art2nd:20200701103857j:plain

自分のアカウントに追加されたスタイルの「Style URL(mapbox://styles/xxx/xxxxxx)」を使う。

f:id:art2nd:20200701104640j:plain

mapboxgl.Mapで、styleに指定する。

<script>
var map = new mapboxgl.Map({
	container: 'map',
//	style: 'mapbox://styles/mapbox/streets-v11', //英語表記のスタイル
	style: 'mapbox://styles/xxx/xxxx',
	center: [lng, lat],
	zoom: 14
});
<script>

↓↓↓ 続き(現在地表示、マーカー表示、地点検索、ルート検索)。

【後日追記】MapboxよりLeafletの方が使いやすいかも。

大阪)阪神ドーム前駅→大正→汐見橋→桜川→南堀江→大阪難波駅。SONY α5100+SIGMA 30mm F1.4。

6月29日。阪神ドーム前駅→大正→汐見橋→桜川→南堀江→大阪難波駅。5.7km、1時間40分。

SONY α5100+SIGMA 30mm F1.4(35mm判換算45mm)で撮影。

f:id:art2nd:20200629155951j:plain

f:id:art2nd:20200629162607j:plain

f:id:art2nd:20200629162726j:plain

f:id:art2nd:20200629162648j:plain

f:id:art2nd:20200629162747j:plain

f:id:art2nd:20200629162804j:plain

f:id:art2nd:20200629162823j:plain

f:id:art2nd:20200629162839j:plain

f:id:art2nd:20200629162908j:plain

f:id:art2nd:20200629162945j:plain

f:id:art2nd:20200629163006j:plain

f:id:art2nd:20200629163027j:plain

f:id:art2nd:20200629163116j:plain

f:id:art2nd:20200629163130j:plain

f:id:art2nd:20200629163157j:plain

f:id:art2nd:20200629163216j:plain

f:id:art2nd:20200629163300j:plain

f:id:art2nd:20200629163237j:plain

f:id:art2nd:20200629163321j:plain

f:id:art2nd:20200629163417j:plain

f:id:art2nd:20200629163435j:plain

f:id:art2nd:20200629163446j:plain

f:id:art2nd:20200629163506j:plain

f:id:art2nd:20200629163522j:plain

f:id:art2nd:20200629163547j:plain

f:id:art2nd:20200629163550j:plain

f:id:art2nd:20200629163622j:plain

f:id:art2nd:20200629163641j:plain

f:id:art2nd:20200629163703j:plain

f:id:art2nd:20200629163812j:plain

f:id:art2nd:20200629163819j:plain

f:id:art2nd:20200629163832j:plain

f:id:art2nd:20200629163846j:plain