-
Notifications
You must be signed in to change notification settings - Fork 0
/
sencha-leaflet.js
82 lines (82 loc) · 2.39 KB
/
sencha-leaflet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/**
* Sencha-Leaflet
* ==============
*
* Author: Christoph Hermann
*
* A leaflet component for sencha touch
*/
Ext.define('MO.view.Leaflet', {
extend: 'Ext.Component',
alias: 'widget.leafletMap',
config: {
map: null,
layers: [],
height: '100%',
width: '100%',
initialCenter: [40.343633, 116.001635],
initialZoom: 13,
initialized: false,
listeners: {
order: 'after',
initialize: function() {
var task;
if (Ext.getDom(this.getId())) { // check if the component is rendered
this.afterInitialize();
this.setInitialized(true);
} else {
task = Ext.create('Ext.util.DelayedTask', function() { // wait until the component is rendered
if (Ext.getDom(this.getId())) {
task.cancel();
this.afterInitialize();
this.setInitialized(true);
}
}, this);
task.delay(200);
}
},
resize: function(w, h, oW, oH) {
this.onResize();
},
heightchange: function() {
this.onResize();
},
widthchange: function() {
this.onResize();
}
}
},
/**
* after the ext component is initialized
* the map gets created
*/
afterInitialize: function() {
var id = this.getId(),
map = L.map(id);
if (this.getInitialCenter())
map.setView(this.getInitialCenter(), this.getInitialZoom());
this.setMap(map);
L.layerGroup(this.createLayers(this.getLayers())).addTo(map);
//L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(map);
},
/**
* creates the layers from the given configs
*/
createLayers: function(layerConfigs) {
var layers = [];
Ext.Array.each(layerConfigs, function(layer) {
layers.push(L.tileLayer(layer.url, layer.options));
});
this.setLayers(layers);
return layers;
},
/*
* handle resizing of the map
*/
onResize: function() {
var map = this.getMap();
if (map) {
map.invalidateSize();
}
}
});