I have several maps. Is there a way to create a web page that has several maps showing at the same time?


Article Comments

One way of doing this is to use the code that is available at the map's Get HTML tab.

Create a new file called mymaps.htm in the \webroot folder of your PRTG installation and past the code mentioned above for every map you want to show on your web page.

The result will look something like this:

<iframe width=800 height=600 frameborder="1"
  src="http://[myprtgserver:port]/public/mapshow.htm?id=1234&mapid=mytestmap1">
</iframe>

<iframe width=800 height=600 frameborder="1"
  src="http://[myprtgserver:port]/public/mapshow.htm?id=4321&mapid=mytestmap2">
</iframe>

You can now access this page at:

http://[myprtgserver:port]/mymaps.htm

Change [myprtgserver:port] for the actual address and optional port number of your PRTG server.

Regards,


Aug, 2012 - Permalink

hallo, did you take a look at map rotation as well?

https://www.paessler.com/manuals/prtg/maps.htm

To show several maps in a rotation, mark the desired maps using multi-edit and then select Map Rotation from the multi-edit menu.

While a map rotation is shown, you can change the refresh interval any time when hovering the arrows symbol in the lower right corner. Choose between 10 , 30 , or 60 seconds, 10 minutes or Refresh now.


Aug, 2012 - Permalink

I was able to get several maps on to one page, but they are still full size. Is there another html tag to shrink them to 25% of full size?


Aug, 2012 - Permalink

Hi Haris.

Adding some CSS (Cascading Style Sheets) code allows you to place live thumbnails of several maps on your page. The code below places two scaled maps side by side.

<style>
.thumb{
   position:relative;
   width:265px;170px;
}
.thumb .iframe_thumb{
    position:absolute;
    z-index:95;
    left:0;top:0;
    height:100%;width:100%;
    background:#fff;
    opacity:0;
}
.thumb iframe{
    position:relative;
    -webkit-transform: scale(0.3, 0.29);
    -moz-transform: scale(0.3, 0.29);
    transform: scale(0.3, 0.29);
    -moz-transform-origin:0 0;
    -webkit-transform-origin:0 0;
    transform-origin:0 0;
    position:relative;
    z-index:90;
}
</style>

<div id="thumb0" class="thumb">
    <div class="iframe_thumb"></div>
    <iframe src="http://[myprtgserver:port]/public/mapshow.htm?id=1234&mapid=mytestmap1"
       width="800"
       height="600"
       scrolling="no"
       style="position:absolute;left:0;top:0">
    </iframe>
</div>

<div id="thumb1" class="thumb">
    <div class="iframe_thumb"></div>
    <iframe src="http://[myprtgserver:port]/public/mapshow.htm?id=4321&mapid=mytestmap2"
       width="800"
       height="600"
       scrolling="no"
       style="position:absolute;left:266;top:0">
    </iframe>
</div>

Regards,


Aug, 2012 - Permalink