| 1 |
1 |
$(function() {
|
|
2 |
L.Map.include(
|
|
3 |
{
|
|
4 |
add_geojson_layer: function(init_state) {
|
|
5 |
var map = this;
|
|
6 |
var $map_widget = $(map.getContainer());
|
|
7 |
var cell = $map_widget.parents('div.cell')[0];
|
|
8 |
var geojson_url = $map_widget.data('geojson-url');
|
|
9 |
if (!geojson_url) return;
|
|
10 |
|
|
11 |
$.getJSON(geojson_url, function(data) {
|
|
12 |
var geo_json = L.geoJson(data, {
|
|
13 |
onEachFeature: function(feature, layer) {
|
|
14 |
$(cell).trigger('combo:map-feature-prepare', {'feature': feature, 'layer': layer});
|
|
15 |
},
|
|
16 |
pointToLayer: function (feature, latlng) {
|
|
17 |
var markerStyles = "background-color: " + feature.properties.layer.colour + ";";
|
|
18 |
marker = L.divIcon({iconAnchor: [0, 30],
|
|
19 |
popupAnchor: [5, -45],
|
|
20 |
html: '<span style="' + markerStyles + '"><i class="leaflet-marker-icon ' +
|
|
21 |
feature.properties.layer.icon + '" style="color:' +
|
|
22 |
feature.properties.layer.icon_colour +'"></i></span>'
|
|
23 |
});
|
|
24 |
return L.marker(latlng, {icon: marker});
|
|
25 |
}
|
|
26 |
});
|
|
27 |
var bounds = geo_json.getBounds();
|
|
28 |
if (bounds.isValid()) {
|
|
29 |
if (init_state == 'fit-markers') {
|
|
30 |
map.fitBounds(bounds);
|
|
31 |
}
|
|
32 |
if (map.geo_json) map.geo_json.remove();
|
|
33 |
map.geo_json = geo_json;
|
|
34 |
geo_json.addTo(map);
|
|
35 |
}
|
|
36 |
});
|
|
37 |
}
|
|
38 |
});
|
|
39 |
|
| 2 |
40 |
function render_map(cell) {
|
| 3 |
41 |
var $map_widget = $(cell).find('div.combo-cell-map');
|
| 4 |
42 |
var map_options = Object();
|
| ... | ... | |
| 24 |
62 |
var map = L.map($map_widget[0], map_options);
|
| 25 |
63 |
var store_position_selector = $map_widget.data('store-position');
|
| 26 |
64 |
|
|
65 |
$map_widget[0].leaflet_map = map;
|
| 27 |
66 |
map.setView(latlng, map_options.zoom);
|
| 28 |
67 |
|
| 29 |
68 |
if (init_state == 'device-location') {
|
| ... | ... | |
| 38 |
77 |
attribution: map_attribution,
|
| 39 |
78 |
maxZoom: map_options.maxZoom
|
| 40 |
79 |
}).addTo(map);
|
| 41 |
|
if (geojson_url) {
|
| 42 |
|
$.getJSON(geojson_url, function(data) {
|
| 43 |
|
var geo_json = L.geoJson(data, {
|
| 44 |
|
onEachFeature: function(feature, layer) {
|
| 45 |
|
$(cell).trigger('combo:map-feature-prepare', {'feature': feature, 'layer': layer});
|
| 46 |
|
},
|
| 47 |
|
pointToLayer: function (feature, latlng) {
|
| 48 |
|
var markerStyles = "background-color: " + feature.properties.layer.colour + ";";
|
| 49 |
|
marker = L.divIcon({iconAnchor: [0, 30],
|
| 50 |
|
popupAnchor: [5, -45],
|
| 51 |
|
html: '<span style="' + markerStyles + '"><i class="leaflet-marker-icon ' +
|
| 52 |
|
feature.properties.layer.icon + '" style="color:' +
|
| 53 |
|
feature.properties.layer.icon_colour +'"></i></span>'
|
| 54 |
|
});
|
| 55 |
|
return L.marker(latlng, {icon: marker});
|
| 56 |
|
}
|
| 57 |
|
});
|
| 58 |
|
var bounds = geo_json.getBounds();
|
| 59 |
|
if (bounds.isValid()) {
|
| 60 |
|
if (init_state == 'fit-markers') {
|
| 61 |
|
map.fitBounds(bounds);
|
| 62 |
|
}
|
| 63 |
|
geo_json.addTo(map);
|
| 64 |
|
}
|
| 65 |
|
});
|
| 66 |
|
}
|
|
80 |
map.add_geojson_layer(init_state);
|
| 67 |
81 |
};
|
| 68 |
82 |
$('div.cell.map').each(function() {
|
| 69 |
83 |
render_map(this);
|
| 70 |
|
-
|