日々学んだことを残しておこう。きっと未来の自分が探しにくる。 (ただ忘れっぽいだけです…)

leaflet.js ホームボタン追加


leafletでホームボタンを用意する。

以下のようなホームに戻るプラグインは用意しているけど、今後ホームというか複数ボタン用意してそれぞれのところに移動させたいので、今回はこれを使用しないことに。
(参考サイト)
https://github.com/torfsen/leaflet.zoomhome

こちらのボタンプラグインを使用。
(参考サイト)
https://github.com/CliffCloud/Leaflet.EasyButton

easy-button.jsとeasy-button.cssをセットすればOK。

var homelatlng = [35.726672, 139.691971];
//ホームボタン追加
L.easyButton('fa-home', function(btn, map){
map.panTo(homelatlng);
}).addTo( map );
2017-05-11 : GIS : コメント : 0 : トラックバック : 0
Pagetop

leaflet.js ポリライン描画


ポリラインも描画してみる。

var latlngs = [
[35.730679, 139.684527],
[35.730011, 139.685845],
[35.731058, 139.686326],
[35.731074, 139.686579],
[35.731517, 139.686726]];

L.polyline(latlngs, {color: 'red'}).addTo(map);

(参考サイト)
http://leafletjs.com/reference-1.0.3.html#polyline
2017-05-11 : GIS : コメント : 0 : トラックバック : 0
Pagetop

leaflet.js 縮小地図追加


leafletで縮小地図を追加したいなと。

プラグインが用意されています。

(参考サイト)
https://github.com/Norkart/Leaflet-MiniMap

Control.MiniMap.jsとControl.MiniMap.cssをセットする。
トグルボタン使用する場合はimagesの画像もセット。
var minimap = new L.Control.MiniMap(base_osm_mini).addTo(map);

オプションも用意されていて、スマホ画面の時に閉じたいとかあるので、閉じるボタンを有効にする場合はこんな感じ。縮小地図のサイズも変えられますね。
var minimap = new L.Control.MiniMap(base_osm_mini, {toggleDisplay: true}).addTo(map);

縮尺地図を最小化した時に矢印が潰れる現象が。
こちらに変更方法記載されていたので、
CSSを変更(box-sizing:unset;追加)
これで、崩れずに表示されました。

.leaflet-control-minimap {
border:solid rgba(255, 255, 255, 1.0) 4px;
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
border-radius: 3px;
background: #f8f8f9;
transition: all .6s;
box-sizing:unset;
}

(参考サイト)
https://github.com/Norkart/Leaflet-MiniMap/issues/112



2017-05-02 : GIS : コメント : 0 : トラックバック : 0
Pagetop

leaflet.js マーカー パルス


leafletでマーカーをパルスっぽく点滅するようにカスタムしたいなと。
このプラグインを使うとそれっぽくなった。

(参考サイト)
https://github.com/mapshakers/leaflet-icon-pulse

2017-05-01 : GIS : コメント : 0 : トラックバック : 0
Pagetop

leaflet.js ポイントマーカー グルーピング マーカークラスタ


leafletでたくさんのポイントマーカーが重なると見えにくい場合にグルーピングする際のプラグイン

こちらのプラグインを使用すると、近いポイントをまとめて、個数を表示してくれる。
拡大すると、各ポイントを表示して縮小表示の時にグルーピングになる。

(参考サイト)
https://github.com/Leaflet/Leaflet.markercluster

使い方は、
leaflet.markercluster.js
MarkerCluster.css
MarkerCluster.Default.css
をセット。


var markers = L.markerClusterGroup({spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false});

markers.addLayers(L.marker([35.7271338,139.6910164]));
markers.addLayers(L.marker([35.7265943,139.6844866]));




map.addLayer(markers);

これでOK。
プラグインが充実していて良いですねー。

グルーピングをクリックするとポイントに分割するには、クラスタクリックイベント追加すれば良い。
markers.on('clusterclick', function (a) {
a.layer.zoomToBounds();
});






2017-05-01 : GIS : コメント : 0 : トラックバック : 0
Pagetop
« 前のページ  ホーム  次のページ »

広告

読みたいと思っている書籍

Amazon Web Services クラウドネイティブ・アプリケーション開発技法 一番大切な知識と技術が身につく Amazon Web Services 定番業務システム12パターン 設計ガイド イラストで学ぶ 機械学習 最小二乗法による識別モデル学習を中心に (KS情報科学専門書) イラストで学ぶ ディープラーニング (KS情報科学専門書)

カウンタ

メールフォーム

名前:
メール:
件名:
本文:

GoogleTranslate

管理人のつぶやき

人気記事ランキング

カテゴリ

openclose

ブログ内検索

全記事表示リンク

全ての記事を表示する

ブログパーツ