Outage Heatmap Example
This is a sample outage map. To get a real one, you must first get an affiliateKey from zcorum. Then create an html page with the
following lines in the head of the html (using the affiliateKey you received from zcorum):
<![CDATA[
<link rel="stylesheet" href="https://truproxy.truvizion.net/resources/affiliateOutage.css"/>
<script src="https://truproxy.truvizion.net/resources/affiliateOutage.js"></script>
<script src="https://truproxy.truvizion.net/{affiliateKey}/affiliateOutageData"></script>
]]>
By default, this will show all outage data. If you would like to see only DOCSIS outage data, you would change the last
line to instead be:
<![CDATA[
<script src="https://truproxy.truvizion.net/{affiliateKey}/affiliateOutageData?accessType=DOCSIS"></script>
]]>
By default, this will show all outage data. If you would like to see only DSL outage data, you would change the last
line to instead be:
<![CDATA[
<script src="https://truproxy.truvizion.net/{affiliateKey}/affiliateOutageData?accessType=DSL"></script>
]]>
By default, this will show all outage data. If you would like to see only FTTX outage data, you would change the last
line to instead be:
<![CDATA[
<script src="https://truproxy.truvizion.net/{affiliateKey}/affiliateOutageData?accessType=FTTX"></script>
]]>
Then, in the body of the html you need to place a div tag with the id "outageMap".
<![CDATA[
<div id="outageMap"></div>
]]>
By default, this div will expand to fill 100% of the available area. Thus if you want the map the fill the entire page, simply
put the div in the body by it's self.
<![CDATA[
...
<body>
<div id="outageMap"></div>
</body>
...
]]>
If, however, you would like to limit the map to a certain size, you can do so by placing the outage map div inside another div
with the desired size.
<![CDATA[
<div style="width:800px;height:500px">
<div id="outageMap"></div>
</div>
]]>
Optionally, there are a few javascript functions that you can call to tweak the display of the outage map. You can call these
from a script tag in the head of the html under the script tags described above. setDefaultBounds allows you to define the
bounds of the map (latitude and longitude) in the event there there are no outages to report (it defaults to showing a map of
the entire globe). When there is an outage, these values are ignored. Latitude is represented as a floating point number from -90 to 90. Longitude is represented as a floating point number
from -180 to 180.
<![CDATA[
<script>
setDefaultBounds({minLatitude}, {minLongitude}, {maxLatitude}, {maxLongitude});
</script>
]]>
restrictBounds allows you to define the extream bounds of the map (latitude and longitude) when there are outages to report.
If the actual outage data is concentrated in a smaller area than the restricted bounds, then the map may 'zoom in' to that area,
but it will not 'zoom out' of the restricted area. The map will zoom so that it can display all of the bounds, thus if you are very
restrictive in one dimension, say latitude, but not very restrictive in the other (longitude), it will zoom to the least restrictive
dimension (longitude) and may therefore show data from outside the most restrictive dimension (latitude). Also, note that this
function only controls the initial view of the map. Once displayed, the user can manually zoom or move beyond these bounds.
Latitude is represented as a floating point number from -90 to 90. Longitude is represented as a floating point number from
-180 to 180.
<![CDATA[
<script>
restrictBounds({minLatitude}, {minLongitude}, {maxLatitude}, {maxLongitude});
</script>
]]>
configHeatMap allows you to tweak the look of heatmap. There are four values you can adjust:
-
maxValue - This defines the value that will be shown as red on the heatmap. The heatmap map is made of many points, each
with a value from 0 to 100. However, since the points overlap and where they do, these values are summed, the desired
maxValue is usually considerably larger than 100. A simple way to think about it is this:
the lower the number, the "hotter" the heatmap will appear to be for the same data. The default value is 1000.
- radius -
This is the radius in degrees of latitude/longitude that each point of the heatmap will affect. The default
value is 0.005.
-
maxOpacity - This defines how opaque the heatmap will be at most. It is a value between 0 and 1 where a high value will
show mostly heatmap and little of the map behind it and a lower value will show more of the map behind the heatmap. The
default value is 0.8.
-
blur - This defines how much blur there is between the colors of the heatmap. It is a value between 0 and 1 where a
high value means a lot of blur and a low value means a little blur. The default value is 0.4.
Note that the colors correspond to the following percentages of the maxValue:
100% = red
85% = yellow
55% = green
25% = blue