Scripts In JMap Mouseover Bubbles

Mouseover bubbles in JMap are a quick and easy way to get information about an object on the map. Simply clicking or touching an object causes the mouseover bubbles to appear with different contents for each layer in the JMap project. As the JMap administrator, you decide the content of the mouseover bubbles. You can include text, attribute values for objects, hyperlinks, images, and among others. You have access to all the syntax of JMap mouseover bubbles to achieve the desired result.

But did you know that you can also include small JavaScript programs in mouseover bubbles?

Mouseover bubbles scripts can be used for all kinds of things like; making mathematical calculations, manipulating strings of characters or implementing a logic with conditions. They open the door to a wide range of possibilities.

In addition to mouseover bubbles, please note that JavaScript scripts can also be used in label configuration.

Here are some concrete examples :

 

Condition if else


ev(NAME)
<script>
if (ev(TYPE) == "") {
   print("Type: N/A");
} else {
   print("Type: " + ev(TYPE));
}
</script>

This script checks if the attribute TYPE is empty and if so, displays N/A, if not, displays the value of the attribute. Notice the print() function that displays content in the mouseover bubble.

The result is as follows.

1

2

 

 

 

 

 

Condition if else if


<b>ev(NAME)</b>
<script>
if (ev(TYPE) == "") {
   print("Type: N/A");
}  else if (ev(TYPE) == "roof") {
print("*** Roof ***");
}  else {
   print("Type: " + ev(TYPE));
}
</script>

This script shows the use of else if to test several conditions. If the value of the TYPE attribute is not empty and is equal to roof, then the script displays the text *** Roof ***.

The result is as follows.

3

 

 

 

 

 

Calculation on attribute - conversion


<b>ev(NAME)</b>
<script>
areaSqFt = ev(AREAM2) * 10.7639;
print(areaSqFt + " sq. feet");
</script>

This script demonstrates a mathematical calculation that converts an area in square meters to an area in square feet.

The result is as follows. Note that the result would need to be formatted to limit the number of decimal digits.

4

 

 

 

 


<b>ev(NAME)</b>
<script>
areaSqFt = ev(AREAM2) * 10.7639;
print(areaSqFt.toFixed(2) + " sq. feet");
</script>

This script is almost identical to the previous one, but adds a call to the JavaScript function toFixed() to determine the number of decimal digits.

The result is as follows.

5

 

 

 

 

 

Calculation between multiple attributes


<b>ev(NAME)</b>
<script>
valuePerSqMtr = ev(VALUATION) / ev(AREAM2);
print("Value per sq. meter : " + valuePerSqMtr.toFixed(2) + "$");
</script>

This script performs a mathematical calculation with 2 attributes by calculating the cost / surface ratio.

The result is as follows.

6

 

 

 

 

 

Text Manipulation


<b>ev(NAME)</b>
<script>
var text = ev(NAME);
if (text.startsWith("Hotel")) {
  text = text.substring(6);
}
print(text);
</script>

In this script, we check if the value of the NAME attribute start with Hotel and if this is the case, the substring() function is called to subtract Hotel from the string.

The result is as follows.

7

 

 

 

 

 

Limitations

As in the examples shown above, your scripts must be limited to manipulate local variables and the attributes of the objects on the map. For example, you cannot :

    • Refer to the DOM
    • Manipulate the styles (CSS)
    • Call the alert() function

 

For more information about mouseover bubbles in JMap, you can refer to the JMap Admin manual and this article that gives other examples of scripts.

 

Jean-Robert Desbiens-Haddad
CTO