世界の測量

Sibling of "Relevant, Timely, and Accurate, " but much lighter and shorter ※自らの所属する組織の見解を示すものでない

Leaflet + Webix (thx shimz.me)

http://shimz.me/example/webix/map/maps.html のカバーで、
http://handygeospatial.github.io/mapsites/2014/08/15/ を作成しました。感謝。
f:id:hfu:20140815062044p:plain

コード

多少の単純化を施しています。Webix も Leaflet もスッキリ書かせてくれるスタイルなので、かなり楽に書けた感じです。

<!doctype html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
<meta charset='UTF-8'>
<title>Leaflet + Webix (thx shimz.me)</title>
<link rel='stylesheet' href='../../../js/webix.css'>
<link rel='stylesheet' href='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css'>
<script src='../../../js/webix.js'></script>
<script src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js'></script>
</head>
<body>
<script>
webix.protoUI({
	name: 'leaflet',
	$init: function(){
		this.$view.innerHTML = "<div style='width:100%;height:100%'/>";
		this._contentobj = this.$view.firstChild;
		this.map = null;
		this.$ready.push(this.render);
	},
  render: function() {
	  var c = this.config;
    this.map = L.map(this._contentobj);
		var delayDraw = function(map){
			return function(){map.setView(c.center, c.zoom);}
		}		
		setTimeout(delayDraw(this.map), 500);
		L.tileLayer(c.layer, {
      attribution: c.attribution, center: c.center, zoom: c.zoom
    }).addTo(this.map);
  },
	center_setter: function(config){
		if(this.map) this.map.setCenter(config);
		return config;
	},
	mapType_setter: function(config){
		if(this.map) this.map.setType(config);
		return config;
	},
	zoom_setter: function(config){
		if(this.map) this.map.setZoom(config);
		return config;
	},
}, webix.ui.view);

webix.ui({
  view: 'window', id: 'leaflet', move: true, 
  top: 40, left: 40, width: 640, height: 480,
  head:{
    view: 'toolbar', elements: [
      {view: 'label', label: '日本へそ公園', align: 'left'},
      {view: 'button', label: '閉じる', width: 80, click:
        function() {$$('leaflet').close();}}
    ]
  },
  body:{
    view: 'leaflet', id: 'map', zoom: 16, center: [35.0, 135.0],
		layer: "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",
		attribution: '地理院タイル（標準地図）'
  }
}).show();
</script>
</body>
</html>