Demo

LocationBox JavaScript Demos

Add Coloring Analysis (Advanced)

Add:     Remove:  

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=APIV2&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() {
  var render_style_l01 = mapper.createColorStyle("cs0", "FFFFFF", 120, "000000", 120, 1);
  var render_style_l02 = mapper.createColorStyle("cs1", "FF0000", 120, "FF0000", 120, 1);
  var render_style_l03 = mapper.createColorStyle("cs2", "00FF00", 120, "00FF00", 120, 1);
  var render_style_l04 = mapper.createColorStyle("cs3", "0000FF", 120, "0000FF", 120, 1);
  var render_style_l05 = mapper.createColorStyle("cs4", "00FFFF", 120, "00FFFF", 120, 1);
  var render_style_l06 = mapper.createColorStyle("cs5", "FF00FF", 120, "FF00FF", 120, 1);
  var render_style_l07 = mapper.createColorStyle("cs6", "FFFF00", 120, "FFFF00", 120, 1);
  var render_style_l08 = mapper.createColorStyle("cs7", "808080", 120, "808080", 120, 1);

  var styles = [render_style_l01, render_style_l02, render_style_l03, render_style_l04,
render_style_l05, render_style_l06, render_style_l07, render_style_l08 ]; var bucket0 = mapper.createCollectionBucket(["L0"],"string",true); var bucket1 = mapper.createCollectionBucket(["L1"],"string",true); var bucket2 = mapper.createCollectionBucket(["L2"],"string",true); var bucket3 = mapper.createCollectionBucket(["L3"],"string",true); var bucket4 = mapper.createCollectionBucket(["L4"],"string",true); var bucket5 = mapper.createCollectionBucket(["L5"],"string",true); var bucket6 = mapper.createCollectionBucket(["L6"],"string",true); var bucket7 = mapper.createCollectionBucket(["L7"],"string",true); var buckets = [bucket0, bucket1, bucket2, bucket3, bucket4, bucket5, bucket6, bucket7]; var styleScheme1 = mapper.createColorScheme("render_style", 9, 'equal',
mapper.createColorStyle("cs1", "efc0b8", 120, "0000FF", 120, 3), styles, buckets, "#ffe766" , null ,null); analysis.createColoringAnalysis("IL",null, styleScheme1); 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.