Add Coloring Analysis (Advanced)
Instructions
Use the "Add" button to add a stylish color analysis on the map. Use "Remove" button to remove the coloring analysis.
Edit the source code to .
See the JavaScript API for more information.
Source Code
The Javascript code for the above map is:
<script language="Javascript"
src="http://www.locationbox.com.tr/locationbox/services?
Key=key&Cmd=API&Typ=JS"></script>
<script language="JavaScript">
var mapper = new IMapper();
var analysis = new IAnalysis();
function startup() {
mapper.initMap(40.2, 35.1, 4);
mapper.addNavigationPanel();
return;
}
function mouseClick(pos, info) {
var html = '<table border="0" height="100%" width="100%">';
for( var i = 0; i < info.data.length; i++ ) {
var data = info.data[i];
var color = "#BBBBBB";
if( (i & 1) != 0 ) color = "#DDDDDD";
html += '<tr bgcolor=' + color + '><td>' + data.name + '</td><td>' + data.value + '</td></tr>';
} // for()
html += '</table>';
mapper.displayInfoWindow(pos.y, pos.x, html, 180, 100, "Bilgi: " + info.id);
return;
}
function add() {
// Create basic color styles to be used
var sym0 = mapper.createColorStyle("cs0", "FFFFFF", 0, "000000", 255, 1);
var sym1 = mapper.createColorStyle("cs1", "FF0000", 120, "FF0000", 255, 1);
var sym2 = mapper.createColorStyle("cs2", "00FF00", 120, "00FF00", 255, 1);
var sym3 = mapper.createColorStyle("cs3", "0000FF", 120, "0000FF", 255, 1);
var sym4 = mapper.createColorStyle("cs4", "00FFFF", 120, "00FFFF", 255, 1);
var sym5 = mapper.createColorStyle("cs5", "FF00FF", 120, "FF00FF", 255, 1);
var sym6 = mapper.createColorStyle("cs6", "FFFF00", 120, "FFFF00", 255, 1);
var sym7 = mapper.createColorStyle("cs7", "808080", 120, "808080", 255, 1);
// List of symbol assignments
var symlist = [
{list: '0', label: 'L0', sym: sym0},
{list: '1', label: 'L1', sym: sym1},
{list: '2', label: 'L2', sym: sym2},
{list: '3', label: 'L3', sym: sym3},
{list: '4', label: 'L4', sym: sym4},
{list: '5', label: 'L5', sym: sym5},
{list: '6', label: 'L6', sym: sym6},
{list: '7', label: 'L7', sym: sym7}
];
var sym = mapper.createAdvancedStyle("advanced_style", symlist);
analysis.createColoringAnalysis("IL", sym, mouseClick);
var xml = "<table>"+
"<tr><th>IL</th><th>COLOR</th><th>INFO-1</th><th>INFO-2</th></tr>"+
"<tr><td>34</td><td>1</td><td>2</td><td>3479</td></tr>"+
"<tr><td>42</td><td>2</td><td>3</td><td>4956</td></tr>"+
"<tr><td>35</td><td>3</td><td>4</td><td>32372</td></tr>"+
"<tr><td>23</td><td>4</td><td>5</td><td>3</td></tr>"+
"<tr><td>9</td><td>5</td><td>6</td><td>223</td></tr>"+
"<tr><td>48</td><td>6</td><td>7</td><td>123</td></tr>"+
"<tr><td>44</td><td>7</td><td>8</td><td>22</td></tr>"+
"<tr><td>55</td><td>3</td><td>9</td><td>1</td></tr>"+
"</table>";
analysis.setAnalysisColoringData(xml);
return;
}
function remove() {
analysis.removeAnalysis();
return;
}
Buttons:
<a href="javascript:add()"
><img src="images/add.gif" border=0></a> <a href="javascript:remove()"
><img src="images/remove.gif" border=0></a>
Notes
You may get "Request string is too long for Oracle Maps' non-AJAX remoting" error while creating a coloring analysis. See this post on LocationBox blog.
Download working page
Remember that you need to use your key code as Key attribute.