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')