From f23a445ee9c3326413d77be47721c9b3e023d933 Mon Sep 17 00:00:00 2001 From: Jacob Brandt Date: Tue, 10 Jan 2017 12:31:25 -0700 Subject: [PATCH 1/2] Offset tooltip popup so it fits inside the map bounds --- .../marker_types/base_marker.js | 46 ++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/src/ui/public/vis_maps/visualizations/marker_types/base_marker.js b/src/ui/public/vis_maps/visualizations/marker_types/base_marker.js index 5f330006ae58f..b39f8879b0171 100644 --- a/src/ui/public/vis_maps/visualizations/marker_types/base_marker.js +++ b/src/ui/public/vis_maps/visualizations/marker_types/base_marker.js @@ -221,6 +221,7 @@ export default function MarkerFactory() { if (!this.map) return; const lat = _.get(feature, 'geometry.coordinates.1'); const lng = _.get(feature, 'geometry.coordinates.0'); + latLng = latLng || L.latLng(lat, lng); const content = this._tooltipFormatter(feature); @@ -229,8 +230,51 @@ export default function MarkerFactory() { this._createTooltip(content, latLng); } + _getOffset(content, latLng) { + // Default maxWidth leaflet applies to popup is 300 + const popupWidth = 300; + + // We need to create the popup first to determine how tall it will be. Give + // it an out of map bounds offset as we don't want to see this one. It will + // get replaced on the next popup creation where we apply the correct offset + const popup = L.popup({ autoPan: false, offset: new L.Point(this.map.getSize().x * 2, this.map.getSize().y * 2) }) + .setLatLng(latLng) + .setContent(content) + .openOn(this.map); + const popupHeight = popup._contentNode.clientHeight; + + const east = this.map.getBounds().getEast(); + const west = this.map.getBounds().getWest(); + const north = this.map.getBounds().getNorth(); + const south = this.map.getBounds().getSouth(); + const width = Math.abs(east - west); + const height = Math.abs(north - south); + const xscale = this.map.getSize().x / width; + const yscale = this.map.getSize().y / height; + + const popupDistanceToLeftEdge = Math.abs(latLng.lng - west) * xscale; + const popupDistanceToRightEdge = Math.abs(latLng.lng - east) * xscale; + let widthOffset = 0; + if (popupDistanceToLeftEdge < popupWidth / 2) { + widthOffset = popupWidth / 2; + } + else if (popupDistanceToRightEdge < popupWidth / 2) { + widthOffset = -popupWidth / 2; + } + + // Default height offset leaflet applies to popup is 6 + let heightOffset = 6; + const popupDistanceToTopEdge = Math.abs(latLng.lat - north) * yscale; + if (popupDistanceToTopEdge < popupHeight + heightOffset) { + // 16 is the margin-bottom style that was added to the leaflet-popup in _tilemap.less + heightOffset += popupHeight + 16; + } + + return new L.Point(widthOffset, heightOffset); + } + _createTooltip(content, latLng) { - L.popup({ autoPan: false }) + L.popup({ autoPan: false, offset: this._getOffset(content, latLng) }) .setLatLng(latLng) .setContent(content) .openOn(this.map); From 7924e453434e6d9381ec07a757b6a10ee55bb3f0 Mon Sep 17 00:00:00 2001 From: Jacob Brandt Date: Thu, 12 Jan 2017 19:45:06 -0700 Subject: [PATCH 2/2] Changed tooltip formatter for geo_json --- .../agg_response/geo_json/_tooltip_formatter.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/ui/public/agg_response/geo_json/_tooltip_formatter.js b/src/ui/public/agg_response/geo_json/_tooltip_formatter.js index 3f1ba02775f13..b5cd84e320748 100644 --- a/src/ui/public/agg_response/geo_json/_tooltip_formatter.js +++ b/src/ui/public/agg_response/geo_json/_tooltip_formatter.js @@ -25,11 +25,12 @@ export default function TileMapTooltipFormatter($compile, $rootScope, Private) { value: metricAgg.fieldFormatter()(value) }, { - label: 'Center', - value: geoFormat.convert({ - lat: feature.geometry.coordinates[1], - lon: feature.geometry.coordinates[0] - }) + label: 'Latitude', + value: feature.geometry.coordinates[1], + }, + { + label: 'Longitude', + value: feature.geometry.coordinates[0], } ];