Skip to content
This repository has been archived by the owner on Mar 31, 2024. It is now read-only.

Commit

Permalink
Merge pull request #2 from spenceralger/feature/tilemap
Browse files Browse the repository at this point in the history
Enhancements!
  • Loading branch information
Juan Thomassie committed Nov 7, 2014
2 parents 54da546 + c84bbe1 commit 027352d
Show file tree
Hide file tree
Showing 5 changed files with 110 additions and 39 deletions.
8 changes: 8 additions & 0 deletions src/kibana/components/vislib/lib/handler/handler.js
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,14 @@ define(function (require) {
.text(message);
};

Handler.prototype.destroy = function () {
this.charts.forEach(function (chart) {
if (_.isFunction(chart.destroy)) {
chart.destroy();
}
});
};

return Handler;
};
});
6 changes: 6 additions & 0 deletions src/kibana/components/vislib/lib/handler/types/tile_map.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ define(function (require) {
data: data
});

MapHandler.resize = function () {
this.charts.forEach(function (chart) {
chart.resizeArea();
});
};

return MapHandler;
};
};
Expand Down
7 changes: 7 additions & 0 deletions src/kibana/components/vislib/styles/_tilemap.less
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,13 @@
color: #444;
}

.leaflet-control-fit {
text-align: center;
background: #fff;
width: 26px;
height: 26px;
outline: 1px black;
}

/* over-rides leaflet popup styles to look like kibana tooltip */

Expand Down
39 changes: 24 additions & 15 deletions src/kibana/components/vislib/vis.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,7 @@ define(function (require) {

this.data = data;
this.handler = handlerTypes[chartType](this) || handlerTypes.column(this);

try {
this.handler.render();
} catch (error) {
// If involving height and width of the container, log error to screen.
// Because we have to wait for the DOM element to initialize, we do not
// want to throw an error when the DOM `el` is zero
if (error instanceof errors.ContainerTooSmall) {
this.handler.error(error.message);
} else {
console.error(error.stack);
}
}
this._runOnHandler('render');
};

/**
Expand All @@ -77,7 +65,27 @@ define(function (require) {
// TODO: need to come up with a solution for resizing when no data is available
return;
}
this.render(this.data);

if (_.isFunction(this.handler.resize)) {
this._runOnHandler('resize');
} else {
this.render(this.data);
}
};

Vis.prototype._runOnHandler = function (method) {
try {
this.handler[method]();
} catch (error) {
// If involving height and width of the container, log error to screen.
// Because we have to wait for the DOM element to initialize, we do not
// want to throw an error when the DOM `el` is zero
if (error instanceof errors.ContainerTooSmall) {
this.handler.error(error.message);
} else {
console.error(error.stack);
}
}
};

/**
Expand All @@ -89,9 +97,10 @@ define(function (require) {
* @method destroy
*/
Vis.prototype.destroy = function () {
d3.select(this.el).selectAll('*').remove();
this.resizeChecker.off('resize', this.resize);
this.resizeChecker.destroy();
this._runOnHandler('destroy');
d3.select(this.el).selectAll('*').remove();
};

/**
Expand Down
89 changes: 65 additions & 24 deletions src/kibana/components/vislib/visualizations/tile_map.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,15 @@ define(function (require) {
var _ = require('lodash');
var $ = require('jquery');
var L = require('leaflet');

var Chart = Private(require('components/vislib/visualizations/_chart'));
var errors = require('errors');

require('css!components/vislib/styles/main');

var mapData;
var mapCenter = [15, 5];
var mapZoom = 2;


/**
* Tile Map Visualization: renders maps
Expand All @@ -30,15 +29,11 @@ define(function (require) {
return new TileMap(handler, chartEl, chartData);
}
TileMap.Super.apply(this, arguments);

// add allmin and allmax to geoJSON
var mapDataExtents = handler.data.mapDataExtents(handler.data.data.raw);
chartData.geoJSON.properties.allmin = mapDataExtents[0];
chartData.geoJSON.properties.allmax = mapDataExtents[1];

// turn off resizeChecker for tile maps
this.handler.vis.resizeChecker.off('resize', this.resize);
this.handler.vis.resizeChecker.destroy();
}

/**
Expand All @@ -53,7 +48,12 @@ define(function (require) {
var $elem = $(this.chartEl);
var div;
var worldBounds = L.latLngBounds([-200, -220], [200, 220]);


// clean up old maps
_.invoke(self.maps, 'destroy');
// create a new maps array
self.maps = [];

return function (selection) {
selection.each(function (data) {
div = $(this);
Expand Down Expand Up @@ -88,16 +88,35 @@ define(function (require) {
zoom: mapZoom,
continuousWorld: true,
noWrap: true,
maxBounds: worldBounds
maxBounds: worldBounds,
scrollWheelZoom: false,
fadeAnimation: false
};

var map = L.map(div[0], mapOptions);
self.maps.push(map);

// switch map types
L.control.layers({
'Map': mapLayer,
'Satellite': satLayer
}).addTo(map);
function fitBounds() {
if (data.geoJSON) {
map.fitBounds(_.map(data.geoJSON.features, function (feature) {
return _.clone(feature.geometry.coordinates).reverse();
}));
}
}

// Add button to fit container to points
var fitControl = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-control-zoom leaflet-control-fit');
$(container).html('<a class="leaflet-control-zoom fa fa-crop"></a>');
$(container).on('click', fitBounds);
return container;
}
});
map.addControl(new fitControl());

map.on('zoomend dragend', function () {
mapZoom = self._attr.lastZoom = map.getZoom();
Expand All @@ -112,7 +131,6 @@ define(function (require) {
}
}

// if sub agg split, add labels
if (data.geoJSON.properties.label) {
self.addLabel(data.geoJSON.properties.label, map);
}
Expand Down Expand Up @@ -143,7 +161,7 @@ define(function (require) {
var featureLayer = L.geoJson(mapData, {
pointToLayer: function (feature, latlng) {
var count = feature.properties.count;

var rad = zoomScale * self.radiusScale(count, max, precision);
return L.circleMarker(latlng, {
radius: rad
Expand Down Expand Up @@ -183,17 +201,17 @@ define(function (require) {
*/
TileMap.prototype.shadedCircleMarkers = function (map, mapData) {
var self = this;

// TODO: add UI to select local min max or all min max

// min and max from chart data for this map
// var min = mapData.properties.min;
// var max = mapData.properties.max;

// super min and max from all chart data
var min = mapData.properties.allmin;
var max = mapData.properties.allmax;

var length = mapData.properties.length;
var precision = mapData.properties.precision;
var zoomScale = self.zoomScale(mapZoom);
Expand Down Expand Up @@ -285,6 +303,20 @@ define(function (require) {
legend.addTo(map);
};

/**
* Invalidate the size of the map, so that leaflet will resize to fit.
* then moves to center
*
* @return {undefined}
*/
TileMap.prototype.resizeArea = function () {
this.maps.forEach(function (map) {
map.invalidateSize({
debounceMoveend: true
});
});
};

/**
* Redraws feature layer markers
*
Expand All @@ -299,10 +331,10 @@ define(function (require) {
TileMap.prototype.resizeFeatures = function (map, min, max, precision, featureLayer) {
var self = this;
var zoomScale = self.zoomScale(mapZoom);

featureLayer.eachLayer(function (layer) {
var latlng = L.latLng(layer.feature.geometry.coordinates[1], layer.feature.geometry.coordinates[0]);

var count = layer.feature.properties.count;
var rad;
if (self._attr.mapType === 'Shaded Circle Markers') {
Expand Down Expand Up @@ -363,7 +395,7 @@ define(function (require) {

/**
* radiusScale returns a circle radius from
* approx. square root of count
* approx. square root of count
* which is multiplied by a factor based on the geohash precision
* for relative sizing of markers
*
Expand Down Expand Up @@ -413,7 +445,7 @@ define(function (require) {
};

/**
* returns a number to scale circle markers
* returns a number to scale circle markers
* based on the geohash precision
*
* @method quantRadiusScale
Expand Down Expand Up @@ -496,6 +528,15 @@ define(function (require) {
return darker;
};

/**
* tell leaflet that it's time to cleanup the map
*/
TileMap.prototype.destroy = function () {
this.maps.forEach(function (map) {
map.remove();
});
};

return TileMap;

};
Expand Down

0 comments on commit 027352d

Please sign in to comment.