Demo

LocationBox JavaScript Demos

Add Coloring Analysis

Add City:     Add Town:     Add District:       Remove:  

Instructions

Use the "Add" button to add a predefined color analysis on the map. Use "Remove" button to remove the coloring. 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, 5);
  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 addCity() {
      analysis.createColoringAnalysis("IL", 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("IL", xml);
	  mapper.showMapCentered(40.2, 35.1, 1);  
      return;
    } 
	
    function addTown() {
      analysis.createColoringAnalysis("ILCE", mouseClick);
      var xml = "<table>"+
                "<tr><th>ILCE</th><th>COLOR</th><th>INFO-1</th><th>INFO-2</th></tr>"+
                "<tr><td>6000991000</td><td>0</td><td>1</td><td>2387</td></tr>"+
                "<tr><td>6000540000</td><td>1</td><td>2</td><td>3479</td></tr>"+
                "<tr><td>6000988000</td><td>2</td><td>3</td><td>4956</td></tr>"+
                "<tr><td>6000449000</td><td>3</td><td>4</td><td>32372</td></tr>"+
                "<tr><td>6000432000</td><td>4</td><td>5</td><td>3</td></tr>"+
                "<tr><td>6000981000</td><td>5</td><td>6</td><td>223</td></tr>"+
                "<tr><td>6000437000</td><td>6</td><td>7</td><td>123</td></tr>"+
                "<tr><td>6000463000</td><td>7</td><td>8</td><td>22</td></tr>"+
                "<tr><td>6000372000</td><td>3</td><td>9</td><td>1</td></tr>"+
                "</table>";
      analysis.setAnalysisColoringData(xml);
	  mapper.showMapCentered(39.94646, 32.66928, 4);
      return;
    } 
	
    function addDistrict() {
      analysis.createColoringAnalysis("MAHALLE");
      var xml = "<table>"+
                "<tr><th>MAHALLE</th><th>COLOR</th><th>INFO-1</th><th>INFO-2</th></tr>"+
                "<tr><td>6000432003</td><td>0</td><td>1</td><td>2387</td></tr>"+
                "<tr><td>6000432001</td><td>1</td><td>2</td><td>3479</td></tr>"+
                "<tr><td>6000432011</td><td>2</td><td>3</td><td>4956</td></tr>"+
                "<tr><td>6000432014</td><td>3</td><td>4</td><td>32372</td></tr>"+
                "<tr><td>6000432024</td><td>4</td><td>5</td><td>3</td></tr>"+
                "<tr><td>6000432023</td><td>5</td><td>6</td><td>223</td></tr>"+
                "<tr><td>6000432021</td><td>6</td><td>7</td><td>123</td></tr>"+
                "<tr><td>6000432022</td><td>7</td><td>8</td><td>22</td></tr>"+
                "<tr><td>6000432018</td><td>3</td><td>9</td><td>1</td></tr>"+
                "</table>";
      if (window.DOMParser) {
        parser=new DOMParser();
        xmlDoc=parser.parseFromString(xml,"text/xml");
      } else { // Internet Explorer
        xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async=false;
        xmlDoc.loadXML(xml);
      }

      var incrementVal = xmlDoc.getElementsByTagName("th").length;
     
      for(var i = 0 ; i < xmlDoc.getElementsByTagName("td").length; i = i + incrementVal) {
        var valStr = xmlDoc.getElementsByTagName("td")[i].childNodes[0].nodeValue;
        var numberRegex = /^[+-]?\d+(\.\d+)?([eE][+-]?\d+)?$/;
      if(numberRegex.test(valStr)) {
        if(parseInt(valStr) >= 3000000000 ) valStr = parseInt(valStr).toExponential().replace("+","");
          xmlDoc.getElementsByTagName("td")[i].childNodes[0].nodeValue = valStr;
        }
      }
  
      xml = new XMLSerializer().serializeToString(xmlDoc.documentElement);
		
      analysis.setAnalysisColoringData("MAHALLE", xml);
	    mapper.showMapCentered(39.94646, 32.66928, 7);
      return;
    } 

    function remove() {
      analysis.removeAnalysis();
      return;
    } 
					

Buttons:

  <a href="javascript:addCity()"><img src="images/add.gif" border=0></a>
  <a href="javascript:addTown()"><img src="images/add.gif" border=0></a>
  <a href="javascript:addDistrict()"><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.