「leaflet」カテゴリーアーカイブ

LeafletでL.Layerから派生した独自レイヤを作る

2018年1月9日

Leafletでとりあえず500mメッシュを表示させたいと思いL.Layerからの派生を調査。
※jsonやwmsは何も使わずに！

Leafletでは個々のMarkerもL.Layerから派生されている。

L.Layerからの派生したクラスを作成するにはGithubのleafletjs-plugin-templatesを改造するのが最短コース。
LeafletLayerTemplate.jsをダウンロードして眺めればどのように作成すればよいのか、分かり易い。

以下はダウンロードしたLeafletLayerTemplateのコメントを削除したソース。

LeafletLayerTemplateはMarkerと同様の動作を意識して各関数内に実装がされている。

関数initialize
L.LeafletLayerTemplateのインスタンス作成時に呼ばれる関数
L.LeafletLayerTemplateのインスタンスの作成は
[code]
var layer = new L.LeafletLayerTemplate();
[/code]
または
[code]
var layer = L.LeafletLayerTemplate();
[/code]
で作成される。

引数に座標を指定すると関数initializeに座標が渡る。
この引数についてはoptions以外も指定が可能。
例えばlatとlngをそれぞれ渡してもよい。
例）
[code]
initialize: function(lat, lng) {
}
[/code]

関数onAdd
レイヤをmapに追加すると呼ばれる関数。
以下ではdivを作成しmap.getPanes().overlayPaneに追加。
map.on(‘viewreset’, this._updatePosition, this);
は地図の移動時にthis._updatePositionをリスナーとして登録。
※現在はviewresetは機能しないためmoveやmoveendなどを使用する必要がある。
その後、強制的に_updatePositionを呼び出して位置を設定
※_updatePositionはユーザー関数

関数_updatePosition
mapの位置にあわせてdivの位置を移動。

関数onRemove
リスナーを削除し、divを削除

[code]
L.LeafletLayerTemplate = L.Layer.extend({

initialize: function(options) {
this._latLng = options.latLng;
},

onAdd: function(map) {
this._map = map;
var layerElementTag = ‘div’;
var layerElementClasses = ‘.leaflet-layer-template leaflet-zoom-hide’;
this._layerElement = L.DomUtil.create(layerElementTag, layerElementClasses);
map.getPanes().overlayPane.appendChild(this._layerElement);
map.on(‘viewreset’, this._updatePosition, this);
this._updatePosition();
},

_updatePosition: function() {
var position = this._map.latLngToLayerPoint(this._latLng);
L.DomUtil.setPosition(this._layerElement, position);
},

onRemove: function(map) {
map.getPanes().overlayPane.removeChild(this._layerElement);
map.off(‘viewreset’, this._updatePosition, this);
}

});
L.leafletLayerTemplate = function(options) {
return new L.LeafletLayerTemplate(options);
};
[/code]

もちろん独自レイヤだからといって必ずしもdivを作成してdomを操作する必要もない。
L.Polygonなどを使用してレイヤの描画を行うのも正しい。

以下は500ｍメッシュを描画する独自レイヤ

leafletで地図上にラベルを表示

2018年1月9日

WMS、GeoJsonを使わずに地図上にラベルを表示する方法

leafletでラベルを表示するにはプラグイン Leaflet.labelを使う方法とL.divIconを使う２つの方法があるようだ。
※Leaflet.labelが今でも使えるかは不明。
今回はL.divIconを使う方法を採用。
参考Text labels in leaflet

[code]
var icon = L.divIcon({
className: ‘meshno’,
html: "123456789"
});
var marker = L.marker(new L.LatLng(lat, lng), {icon:icon})
marker.addTo(this._map);
[/code]

Leaflet plugin メモ（距離計測系）

2017年12月7日

leaflet-distance-markers

ラインに距離を示すマーカーを表示するみたい

Leaflet.MeasureControl

よくできた距離計測コントロール

要Leaflet.Draw

Leaflet.PolylineMeasure

測地線に沿った距離計測かも

leafletのコントロールをちょっと移動

2017年9月28日

スケールコントロールの位置をスタイルで少し上に移動

[code]
.leaflet-bottom .leaflet-control-scale {
margin-bottom: 80px !important;
}
[/code]

ズームコントロールのサイズをスタイルで変更

.leaflet-control-zoom a {
width: 42px !important;
height: 42px !important;
line-height: 42px !important;
}

Leaflet DrawのMarker登録機能をToolbarを使用せずに呼び出す

2017年8月18日

以下のコードを呼び出し

[code]
new L.Draw.Marker(map, drawControl.options.marker).enable();
[/code]

Leafletにユーザーコントロールを追加

2017年8月18日

ユーザーコントロール：ourCustomControl を作成してmapに登録。
ちなみにユーザーコントロールのクリックイベントが発生するとMAPにもイベントが伝搬してしまうので、
クリックイベントではe.stopPropagation();を読んでMAPにイベントだ伝搬することを停止。

[code]
var ourCustomControl = L.Control.extend({
options: {
position: ‘topleft’
//control position – allowed: ‘topleft’, ‘topright’, ‘bottomleft’, ‘bottomright’
},
onAdd: function (map) {
var container = L.DomUtil.create(‘div’, ‘leaflet-bar leaflet-control leaflet-control-custom’);
container.style.backgroundColor = ‘white’;
container.style.width = ’30px’;
container.style.height = ’30px’;
container.onclick = function(e){
e.stopPropagation();
console.log(‘buttonClicked’);
//drawControl.options.draw = true;
new L.Draw.Marker(map, drawControl.options.marker).enable();
}
return container;
},
});

map.addControl(new ourCustomControl());
[/code]

参考Creating custom control button in leaflet

Leaflet Draw

2017年8月18日

LeafLet DrawはLeaflet上でFeatureを登録編集するプラグイン

GITHUBのURL
[code]
https://github.com/Leaflet/Leaflet.draw
[/code]

基本的な使い方
githubよりSRC以下をダウンロードしてリンク
[code]
<script src="../lib/leafret.draw/src/Leaflet.draw.js"></script>
<script src="../lib/leafret.draw/src/Leaflet.Draw.Event.js"></script>

[/code]

以下のコードでツールバーが表示され、編集等が可能となる
[code]
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);

map.on(L.Draw.Event.CREATED, function (event) {
var layer = event.layer;
drawnItems.addLayer(layer);
});
[/code]

登録用ツールバーを消去
[code]
var drawControl = new L.Control.Draw({
draw : false,
edit: {
featureGroup: drawnItems
},
});
[/code]

編集削除ツールバーも消去
[code]
var drawControl = new L.Control.Draw({
draw : false,
edit: {
featureGroup: drawnItems,
edit: false,
remove: false
},
});
[/code]

消去を再表示はできない？

一旦、コントロールそのものを削除して再登録だな。

削除のコード
[code]
map.removeControl(drawControl);
[/code]

iPhoneを回転するとzoomControlが隠れる

2017年8月17日

Leafletモバイルのサンプルページに従ってページを作成。
Leaflet on Mobile
iPhone SE iOSのバージョンは10.3.2
最初はzoomControlも正しい位置に表示されているが、回転するとzoomControlがアドレスバーに隠れてしまう。

HTMLとCSS
[code]
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100vh;
width: 100vw;
}
[/code]

対応は回転のイベントで以下の処理を行う

[code]
$(window).bind("orientationchange",function(){
setTimeout(function(){
$(‘html,body’).animate({scrollTop: 0}, 500, ‘swing’);
map.invalidateSize()
}, 400);
})
[/code]