I would like to add custom text labels to a map view, but I can only find predefined images.
How can I create a map object that shows a custom text box?
Last change on Jan 4, 2023 9:14:08 AM by
How to add text to a map?
Votes:
0
Best Answer
Accepted Answer
Votes:
1
This article applies as of PRTG 22
Adding a textbox to a map
You can add a simple textbox to your map using a Custom HTML element. With this method, you are able to style your text the way you want.
The article shows you all necessary steps to create your custom textbox.
Add plain text
- Open an existing map or create a new one.
- Open the Map Designer.
- In section Properties on the right side of the designer window, look for Custom HTML at the end of the list and expand it.
Click to enlarge. - Choose Custom HTML Element and drag and drop it on your map. Click the added element so it is highlighted.
Click to enlarge. - You will now see available options for this element under Properties.
- Enter your text in HTML format into the HTML Before field.
For example, let us imagine that you want to add a simple text like "Hello World" to your map. Your HTML in the HTML Before field will look like this: Hello World
Now let us get more advanced and edit the text, add formats, and add some color to the text, for example.
Add text with style
You can use any HTML to show text in your desired style, for example, bold format, font size, and color.
Font size
To change the font size to 14px, for example, add <font size="14"> to the HTML Before field. Your HTML might look like this: <font size="14">Hello World
But perhaps it would look better in the Courier New font. So, let us change your font.
Font style
To change the font style to Courier New, for example, add <face="Courier New"> to the HTML Before field. Your HTML might look like this: <font size='14' face='Courier New'>Hello World
But perhaps it would look better in bold format. So, let us change the text to bold.
Bold text
To show text in bold letters, use the tag <b>. Don't forget to enter a closing tag, for bold: </b>. Your HTML in the HTML Before field will look like this: <font size='14' face='Courier New'><b>Hello World</b>
But perhaps it would look better with a line break. So, let us add a line break.
Line break
You can add line breaks to your textboxes with the HTML tag <br>. To add the line break between "Hello" and "World", insert the tag after "Hello": <font size="14" color="blue"><b>Hello<br>World</b>
Text color
To change the text color, we add another HTML tag to the HTML Before field. In this example, we go on with blue color and use the browser default blue. So, add color="blue" to your HTML code: <font size="14" color="blue"><b>Hello World</b>
Background color
To add a background color, we add another HTML tag to the HTML Before field. First, we will change the text color to white and the background color to blue. Add style='color: white; background-color: blue' '='' to your HTML code: <font size='14' style='color: white; background-color: blue' '=''><b>Hello<br>World</b>
Add Custom HTML objects to a map
- Add an image with border
- Add text in double quotes
- Draw a rectangle
1. Add an image with border
To add an image with border use the following HTML code:
<img src='<enter_image_file_as_jpg>" alt="anytext"width="50" height="60" style="border: 5px solid red">
For example, an image after the application of borders looks like this:
2. Add text in double quotes
To add a text in double quotes you can use the following HTML code:
<font size="5">"Hello World"
You can also type a single quote two times without a space in between. The text should appear with "...."
3. Draw a rectangle
To draw a rectangle you can use the following HTML codes:
<iframe src='' style='border:3px solid Yellow;' name='myiFrame' scrolling='no' frameborder='10' height='100px' width='340px' allowfullscreen=''></iframe>
<svg width='200' height='100'> <rect width='200' height='100' style='fill:transparent;Stroke:Yellow;Stroke-Width:10;'></rect></svg>
Conclusion
Because PRTG uses standard HTML code to insert and edit text in maps, you have many options to adjust the text to your needs and to the design of your map. So, start creating your individual dashboards with PRTG.
Created on Dec 11, 2017 5:34:29 PM by
Last change on Oct 31, 2024 1:57:44 PM by
21 Replies
Votes:
0
Use the Custom HTML Object Type.
For more information, please see PRTG Manual: Maps Designer and look for Custom HTML.
Created on Nov 9, 2010 1:12:47 PM by
Last change on Mar 25, 2013 12:28:58 PM by
Votes:
0
there is no need for images!
in the Map Designer select Add Map Item, select the Custom HTML tab on the very right side
and enter the html code.
The example in the manual with the link to include an image is just an example!
Created on Nov 9, 2010 2:59:25 PM by
Votes:
0
drop a Custom HTML Element on your map
while the element is still marked, look at the top right of the map editor where you can see the properties of the element
Top: Left: Width: Height: Layer: HTML:
use the little arrow at left to HTML
now enter your text in the HTML Before field and save.
now you should see the text in the Custom HTML Element on your map.
<font size="8">This is some text!</font>
if you want it to be bold
<b><font size="8">This is some text!</font></b>
Created on Feb 19, 2014 8:06:30 AM by
Votes:
0
adding a simple text box to the map is already on our wish list, as well are transparent elements.
Created on Dec 11, 2014 8:57:37 AM by
Votes:
0
What is so difficult about adding the custom map object to the map and simply entering the text in the HMTL Before box (no tags necessary for plain text)? A dedicated text object would not be different.
Created on Nov 2, 2016 1:45:12 PM by
Votes:
0
Dear andu337
As anything on a PRTG map is an object. Entering custom text is only possible using a map object as well. You can use the otherwise empty "Custom HTML / Custom HTML Element" for this.
Created on Jan 5, 2017 5:42:27 PM by
Votes:
0
Dear Mr. Mayershofer
We agree, the usage of the Custom HTML Element (at the bottom of the object list) is a rather complex solution for a text box. However one can enter text this way, we try to avoid redundancy.
One of the reasons we don't want to implement enter a label object at this time is that this would require some options for text size, bold font and so on. We would have to implement several different pre-configured label objects, or implement an option box. With the HTML input this can be avoided as the user can format using HTML.
A label object would require a text input field. That would be redundant since there is HTML Before/After.
To ease the process of using such objects, we now always show the HTML Before and HTML After field (this was hidden in previous versions and needed to be opened first.)
Created on Jul 25, 2017 1:26:35 PM by
Last change on Jul 25, 2017 1:30:01 PM by
Accepted Answer
Votes:
1
This article applies as of PRTG 22
Adding a textbox to a map
You can add a simple textbox to your map using a Custom HTML element. With this method, you are able to style your text the way you want.
The article shows you all necessary steps to create your custom textbox.
Add plain text
- Open an existing map or create a new one.
- Open the Map Designer.
- In section Properties on the right side of the designer window, look for Custom HTML at the end of the list and expand it.
Click to enlarge. - Choose Custom HTML Element and drag and drop it on your map. Click the added element so it is highlighted.
Click to enlarge. - You will now see available options for this element under Properties.
- Enter your text in HTML format into the HTML Before field.
For example, let us imagine that you want to add a simple text like "Hello World" to your map. Your HTML in the HTML Before field will look like this: Hello World
Now let us get more advanced and edit the text, add formats, and add some color to the text, for example.
Add text with style
You can use any HTML to show text in your desired style, for example, bold format, font size, and color.
Font size
To change the font size to 14px, for example, add <font size="14"> to the HTML Before field. Your HTML might look like this: <font size="14">Hello World
But perhaps it would look better in the Courier New font. So, let us change your font.
Font style
To change the font style to Courier New, for example, add <face="Courier New"> to the HTML Before field. Your HTML might look like this: <font size='14' face='Courier New'>Hello World
But perhaps it would look better in bold format. So, let us change the text to bold.
Bold text
To show text in bold letters, use the tag <b>. Don't forget to enter a closing tag, for bold: </b>. Your HTML in the HTML Before field will look like this: <font size='14' face='Courier New'><b>Hello World</b>
But perhaps it would look better with a line break. So, let us add a line break.
Line break
You can add line breaks to your textboxes with the HTML tag <br>. To add the line break between "Hello" and "World", insert the tag after "Hello": <font size="14" color="blue"><b>Hello<br>World</b>
Text color
To change the text color, we add another HTML tag to the HTML Before field. In this example, we go on with blue color and use the browser default blue. So, add color="blue" to your HTML code: <font size="14" color="blue"><b>Hello World</b>
Background color
To add a background color, we add another HTML tag to the HTML Before field. First, we will change the text color to white and the background color to blue. Add style='color: white; background-color: blue' '='' to your HTML code: <font size='14' style='color: white; background-color: blue' '=''><b>Hello<br>World</b>
Add Custom HTML objects to a map
- Add an image with border
- Add text in double quotes
- Draw a rectangle
1. Add an image with border
To add an image with border use the following HTML code:
<img src='<enter_image_file_as_jpg>" alt="anytext"width="50" height="60" style="border: 5px solid red">
For example, an image after the application of borders looks like this:
2. Add text in double quotes
To add a text in double quotes you can use the following HTML code:
<font size="5">"Hello World"
You can also type a single quote two times without a space in between. The text should appear with "...."
3. Draw a rectangle
To draw a rectangle you can use the following HTML codes:
<iframe src='' style='border:3px solid Yellow;' name='myiFrame' scrolling='no' frameborder='10' height='100px' width='340px' allowfullscreen=''></iframe>
<svg width='200' height='100'> <rect width='200' height='100' style='fill:transparent;Stroke:Yellow;Stroke-Width:10;'></rect></svg>
Conclusion
Because PRTG uses standard HTML code to insert and edit text in maps, you have many options to adjust the text to your needs and to the design of your map. So, start creating your individual dashboards with PRTG.
Created on Dec 11, 2017 5:34:29 PM by
Last change on Oct 31, 2024 1:57:44 PM by
Votes:
0
Dear nirwana,
that is right, the current Map Editor has limitations. A new Map Editor is something we want to do in the future (see our roadmap. A feature set of that has not yet been determined.
As Visio is just one of many designer programs, I don't expect Visio import. The developing time would be better used if we instead make our own Editor better.
Created on Dec 13, 2019 12:37:08 PM by
Last change on Dec 13, 2019 12:38:10 PM by
Votes:
0
Hello,
there is no such list. Using <center> in HTML before and </center> in HTML after, should work to center text.
Created on Sep 21, 2022 2:40:55 PM by
Disclaimer: The information in the Paessler Knowledge Base comes without warranty of any kind. Use at your own risk. Before applying any instructions please exercise proper system administrator housekeeping. You must make sure that a proper backup of all your data is available.
Add comment