def render(self, **kwargs):
super(MarkerCluster, self).render(**kwargs)
figure = self.get_root()
assert isinstance(figure, Figure), ("You cannot render this Element "
"if it's not in a Figure.")
figure.header.add_child(
JavascriptLink(
"https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js"
), # noqa
name='markerclusterjs')
figure.header.add_child(
CssLink(
"https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css"
), # noqa
name='markerclustercss')
figure.header.add_child(
CssLink(
"https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css"
), # noqa
name='markerclusterdefaultcss')
def render(self, **kwargs):
super(TileLayer, self).render()
figure = self.get_root()
assert isinstance(figure, Figure), ('You cannot render this Element '
'if it is not in a Figure.')
figure.header.add_child(
JavascriptLink('https://rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js'), # noqa
name='leaflet.timedimension.min.js')
figure.header.add_child(
JavascriptLink(
'https://cdnjs.cloudflare.com/ajax/libs/heatmap.js/2.0.2/heatmap.min.js'),
name='heatmap.min.js')
figure.header.add_child(
JavascriptLink('https://rawgit.com/pa7/heatmap.js/develop/plugins/leaflet-heatmap/leaflet-heatmap.js'), # noqa
name='leaflet-heatmap.js')
figure.header.add_child(
CssLink('http://apps.socib.es/Leaflet.TimeDimension/dist/leaflet.timedimension.control.min.css'), # noqa
name='leaflet.timedimension.control.min.css')
figure.header.add_child(
Element(
"""
<script>
var TDHeatmap = L.TimeDimension.Layer.extend({
initialize: function(data, options) {
var heatmapCfg = {
radius: 15,
maxOpacity: 1.,
scaleRadius: false,
useLocalExtrema: false,
latField: 'lat',
lngField: 'lng',
valueField: 'count',
defaultWeight : 1,
};
heatmapCfg = $.extend({}, heatmapCfg, options.heatmapOptions || {});
var layer = new HeatmapOverlay(heatmapCfg);
L.TimeDimension.Layer.prototype.initialize.call(this, layer, options);
this._currentLoadedTime = 0;
this._currentTimeData = {
data: []
};
this.data= data;
this.defaultWeight = heatmapCfg.defaultWeight || 1;
},
onAdd: function(map) {
L.TimeDimension.Layer.prototype.onAdd.call(this, map);
map.addLayer(this._baseLayer);
if (this._timeDimension) {
this._getDataForTime(this._timeDimension.getCurrentTime());
}
},
_onNewTimeLoading: function(ev) {
this._getDataForTime(ev.time);
return;
},
isReady: function(time) {
return (this._currentLoadedTime == time);
},
_update: function() {
this._baseLayer.setData(this._currentTimeData);
return true;
},
_getDataForTime: function(time) {
delete this._currentTimeData.data;
this._currentTimeData.data = [];
var data = this.data[time-1];
for (var i = 0; i < data.length; i++) {
this._currentTimeData.data.push({
lat: data[i][0],
lng: data[i][1],
count: data[i].length>2 ? data[i][2] : this.defaultWeight
});
}
this._currentLoadedTime = time;
if (this._timeDimension && time == this._timeDimension.getCurrentTime() && !this._timeDimension.isLoading()) {
this._update();
}
this.fire('timeload', {
time: time
});
}
});
L.Control.TimeDimensionCustom = L.Control.TimeDimension.extend({
initialize: function(index, options) {
var playerOptions = {
buffer: 1,
minBufferReady: -1
};
options.playerOptions = $.extend({}, playerOptions, options.playerOptions || {});
L.Control.TimeDimension.prototype.initialize.call(this, options);
this.index = index;
},
_getDisplayDateFormat: function(date){
return this.index[date.getTime()-1];
}
});
</script>
""", # noqa
template_name='timeControlScript'
)
)
def prepareMap(self):
center = [40.8, -86]
zoom = 8
self.map = folium.Map(location=[40.8, -86])
########################################################## scrollWheelZoom = false
self.map._template = Template(u"""
{% macro header(this, kwargs) %}
<style> #{{this.get_name()}} {
position : {{this.position}};
width : {{this.width[0]}}{{this.width[1]}};
height: {{this.height[0]}}{{this.height[1]}};
left: {{this.left[0]}}{{this.left[1]}};
top: {{this.top[0]}}{{this.top[1]}};
}
</style>
{% endmacro %}
{% macro html(this, kwargs) %}
<div class="folium-map" id="{{this.get_name()}}" ></div>
{% endmacro %}
{% macro script(this, kwargs) %}
{% if this.max_bounds %}
var southWest = L.latLng({{ this.min_lat }}, {{ this.min_lon }});
var northEast = L.latLng({{ this.max_lat }}, {{ this.max_lon }});
var bounds = L.latLngBounds(southWest, northEast);
{% else %}
var bounds = null;
{% endif %}
var {{this.get_name()}} = L.map(
'{{this.get_name()}}',
{center: [{{this.location[0]}},{{this.location[1]}}],
zoom: 8,
maxBounds: bounds,
scrollWheelZoom: false,
layers: [],
worldCopyJump: false,
crs: L.CRS.{{this.crs}}
});
{% if this.control_scale %}L.control.scale().addTo({{this.get_name()}});{% endif %}
{% endmacro %}
""") # noqa
self.map.get_root().header.add_child(Element(''' <style type=text/css>
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 2px;
color: #777;
}
.imgButton {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: transparent;
border-radius: 5px;
}
.legend {
line-height: 18px;
color: #555;
}
.legend i {
width: 22px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
.toggles {
width: 90px;
}
.radioLabel{
width: 60px;
padding-left: 5px;
}
#slider {
padding: 3px 180px;
}
''' + self.loadingCSS + '''
</style>'''),
name='map')
self.map.get_root().header.add_child(
JavascriptLink("https://code.highcharts.com/highcharts.js"),
name="highcharts")
self.map.get_root().header.add_child(
JavascriptLink("https://code.highcharts.com/modules/exporting.js"),
name="exporting")
self.map.get_root().header.add_child(
JavascriptLink("https://code.highcharts.com/highcharts-more.js"),
name="highcharts-more")
self.map.get_root().header.add_child(
JavascriptLink("https://code.jquery.com/jquery-1.12.4.js"),
name="jquery")
self.map.get_root().header.add_child(
JavascriptLink("https://code.jquery.com/ui/1.12.1/jquery-ui.js"),
name="jquery-ui")
# self.map.get_root().header.add_child(JavascriptLink("https://raw.githubusercontent.com/eligrey/FileSaver.js/master/FileSaver.min.js"), name="file-saver")
self.map.get_root().header.add_child(CssLink(
"https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"),
name="jquery-ui-css")
self.map.get_root().header.add_child(
Element("<script>" + self.fileSaverJS + "</script>"),
name='file-saver')
self.map.get_root().header.add_child(
Element("<script>" + self.jszipJS + "</script>"), name='jszip')
self.map.get_root().script.add_child(Element(self.leafletHeatJS),
name='leaflet-heat')
def render(self, **kwargs):
super(HeatMapWithTime, self).render(**kwargs)
figure = self.get_root()
assert isinstance(figure, Figure), (
'You cannot render this Element if it is not in a Figure.')
# Import Javascripts
for name, url in _default_js:
figure.header.add_child(JavascriptLink(url), name=name)
# Import Css
for name, url in _default_css:
figure.header.add_child(CssLink(url), name=name)
figure.header.add_child(
Element(
"""
<script>
var TDHeatmap = L.TimeDimension.Layer.extend({
initialize: function(data, options) {
var heatmapCfg = {
radius: 15,
maxOpacity: 1.,
scaleRadius: false,
useLocalExtrema: false,
latField: 'lat',
lngField: 'lng',
valueField: 'count',
defaultWeight : 1,
};
heatmapCfg = $.extend({}, heatmapCfg, options.heatmapOptions || {});
var layer = new HeatmapOverlay(heatmapCfg);
L.TimeDimension.Layer.prototype.initialize.call(this, layer, options);
this._currentLoadedTime = 0;
this._currentTimeData = {
data: []
};
this.data= data;
this.defaultWeight = heatmapCfg.defaultWeight || 1;
},
onAdd: function(map) {
L.TimeDimension.Layer.prototype.onAdd.call(this, map);
map.addLayer(this._baseLayer);
if (this._timeDimension) {
this._getDataForTime(this._timeDimension.getCurrentTime());
}
},
_onNewTimeLoading: function(ev) {
this._getDataForTime(ev.time);
return;
},
isReady: function(time) {
return (this._currentLoadedTime == time);
},
_update: function() {
this._baseLayer.setData(this._currentTimeData);
return true;
},
_getDataForTime: function(time) {
delete this._currentTimeData.data;
this._currentTimeData.data = [];
var data = this.data[time-1];
for (var i = 0; i < data.length; i++) {
this._currentTimeData.data.push({
lat: data[i][0],
lng: data[i][1],
count: data[i].length>2 ? data[i][2] : this.defaultWeight
});
}
this._currentLoadedTime = time;
if (this._timeDimension && time == this._timeDimension.getCurrentTime() && !this._timeDimension.isLoading()) {
this._update();
}
this.fire('timeload', {
time: time
});
}
});
L.Control.TimeDimensionCustom = L.Control.TimeDimension.extend({
initialize: function(index, options) {
var playerOptions = {
buffer: 1,
minBufferReady: -1
};
options.playerOptions = $.extend({}, playerOptions, options.playerOptions || {});
L.Control.TimeDimension.prototype.initialize.call(this, options);
this.index = index;
},
_getDisplayDateFormat: function(date){
return this.index[date.getTime()-1];
}
});
</script>
""", # noqa
template_name='timeControlScript'))
def render(self, **kwargs):
super(TimeSliderChoropleth, self).render(**kwargs)
figure = self.get_root()
assert isinstance(figure, Figure), ('You cannot render this Element '
'if it is not in a Figure.')
figure.header.add_child(JavascriptLink('https://d3js.org/d3.v4.min.js'), name='d3v4')
