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):

By default, this will show docsis outage data. If you would like to see DSL outage data, you would change the last line to instead be:

By default, this will show docsis outage data. If you would like to see FTTX outage data, you would change the last line to instead be:

Then, in the body of the html you need to place a div tag with the id "outageMap".

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.

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.

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.

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.

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