Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Worldmap feature: textbox scaling to zoom (scale_to_max_zoom)
  • Loading branch information
vpithart authored and LarsMichelsen committed May 28, 2020
1 parent 6f9462c commit 8da3953
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 3 deletions.
3 changes: 3 additions & 0 deletions ChangeLog
Expand Up @@ -2,6 +2,9 @@
Frontend:
* FIX: Fix random error "NotFoundError: Node.removeChild"

Worldmap:
* textbox scaling according to zoom (scale_to_max_zoom option)

1.9.20
Core:
* Drop some PHP < 5.2 compatibility code for json encoding / decoding
Expand Down
20 changes: 19 additions & 1 deletion docs/en_US/worldmap.html
Expand Up @@ -62,7 +62,8 @@ <h2>The first call</h2>
coordinates to use as initial center for the worldmaps viewport.</p>

<p>The <code>worldmap_zoom=6</code> specifies the initial zoom level to be used when rendering the worldmap.
NagVis allows zoom levels from 2 to 18.</p>
NagVis allows zoom levels from 2 (world) to 20 (building, detail).</p>


<p>The <code>worldmap_tiles_saturate=33</code> dims the colors of default OpenStreetMap so that red motorways or
large green forests don't interfere with actual map objects. Possible values are 0 (no colors, grayscale) through 100 (full colors).</p>
Expand All @@ -77,5 +78,22 @@ <h2>Create your own worldmap</h2>

<p>You can also create a new worldmap from an existing one by zoom and pan to create the viewport you like
to use for your new worldmap, then choose <i>Edit Map > Viewport > Save as new Map</i>.

<h2>Objects on worldmap and zoom</h2>
The map object (host, line, textbox, ...) may be configured to only show at certain zoom levels. Related object attributes are:
<table style="width:100%">
<tr>
<th>Parameter</th><th>Default</th><th>Description</th>
</tr>
<tr>
<td>min_zoom</td><td>2</td><td>Only show the object at specified zoom level or higher (more detailed view)</td>
</tr>
<tr>
<td>max_zoom</td><td>20</td><td>Only show the object at specified zoom levels or lower (wider view)</td>
</tr>
<tr>
<td>scale_to_max_zoom</td><td>No</td><td>Scale the object size down to 50% for every zoom level below <code>max_zoom</code>. Only applicable to textboxes.</td>
</tr>
</table>
</body>
</html>
12 changes: 11 additions & 1 deletion share/frontend/nagvis-js/js/ElementBox.js
Expand Up @@ -23,12 +23,22 @@

var ElementBox = Element.extend({
render: function() {
let scale = 1;
if (g_map && usesSource('worldmap') && this.obj.conf.scale_to_max_zoom == '1') {
let currentZoom = g_map.getZoom();
let maxZoom = Number(this.obj.conf.max_zoom)
if (currentZoom < maxZoom) {
scale = 1 / Math.pow(2, maxZoom-currentZoom)
}
}

this.dom_obj = renderNagVisTextbox(
this.obj.conf.object_id+'-label',
this.obj.conf.background_color, this.obj.conf.border_color,
0, 0, // coords are set by this.place()
this.obj.conf.z, this.obj.conf.w,
this.obj.conf.h, this.obj.getText(), this.obj.conf.style
this.obj.conf.h, this.obj.getText(), this.obj.conf.style,
scale
);
this.obj.trigger_obj = this.dom_obj;
this.place();
Expand Down
5 changes: 4 additions & 1 deletion share/frontend/nagvis-js/js/nagvis.js
Expand Up @@ -951,7 +951,7 @@ function hideStatusMessage() {
* @return Object Returns the div object of the textbox
* @author Lars Michelsen <lm@larsmichelsen.com>
*/
function renderNagVisTextbox(id, bgColor, borderColor, x, y, z, w, h, text, customStyle) {
function renderNagVisTextbox(id, bgColor, borderColor, x, y, z, w, h, text, customStyle, scale) {
var oLabelDiv = document.createElement('div');
oLabelDiv.setAttribute('id', id);
oLabelDiv.className = 'box';
Expand All @@ -969,6 +969,9 @@ function renderNagVisTextbox(id, bgColor, borderColor, x, y, z, w, h, text, cust

oLabelDiv.style.zIndex = parseInt(z) + 1;

if (scale)
oLabelDiv.style.transform = `scale(${scale})`;

/**
* IE workaround: The transparent for the color is not enough. The border
* has really to be hidden.
Expand Down
9 changes: 9 additions & 0 deletions share/server/core/mapcfg/default.php
Expand Up @@ -861,6 +861,12 @@ function listSources($MAPCFG, $objId, $attrs) {
'field_type' => 'color',
'match' => MATCH_COLOR,
),
'scale_to_max_zoom' => Array(
'must' => 0,
'default' => 0,
'match' => MATCH_BOOLEAN,
'field_type' => 'boolean',
),
'style' => Array(
'must' => 0,
'default' => '',
Expand Down Expand Up @@ -1427,6 +1433,9 @@ function listSources($MAPCFG, $objId, $attrs) {
'type' => null,
'use' => null,
),
'worldmap' => array(
'scale_to_max_zoom' => null,
)
);

$mapConfigVarMap['shape'] = Array(
Expand Down

0 comments on commit 8da3953

Please sign in to comment.