Demo

LocationBox JavaScript Demos

Add Multiple Analysis Style

Add Layer:     Remove:  

Instructions

Use the "Add" button to add a predefined circle to the map.
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 layer = new ILayer();
  
  function startup() {
    mapper.initMap(41.1, 29.1, 6);
    mapper.addNavigationPanel(); 
    return;
  } 
  
  function add() {
   var xml_data = "<nsdp_xml>"+
    "<table>"+
    "<tr><th>IL_ID</th><th>Item 1</th><th>Item 2</th><th>Item 3</th><th>Item 4</th><th>Item 5</th></tr>"+
    "<tr><td>10</td><td>500.0</td><td>200.0</td><td>1000.0</td><td>345.0</td><td>100.0</td></tr>"+
    "<tr><td>11</td><td>624.0</td><td>275.0</td><td>800.0</td><td>154.0</td><td>199.0</td></tr>"+
    "<tr><td>16</td><td>200.0</td><td>396.0</td><td>900.0</td><td>347.0</td><td>40.0</td></tr>"+
    "<tr><td>34</td><td>100.0</td><td>458.0</td><td>10.0</td><td>369.0</td><td>70.0</td></tr>"+
    "<tr><td>41</td><td>375.0</td><td>10.0</td><td>800.0</td><td>245.0</td><td>51.0</td></tr>"+
    "<tr><td>54</td><td>469.0</td><td>999.0</td><td>60.0</td><td>545.0</td><td>150.0</td></tr>"+
    "<tr><td>59</td><td>50.0</td><td>167.0</td><td>200.0</td><td>45.0</td><td>142.0</td></tr>"+
    "<tr><td>77</td><td>400.0</td><td>234.0</td><td>1500.0</td><td>845.0</td><td>96.0</td></tr>"+
    "<tr><td>81</td><td>100.0</td><td>555.0</td><td>100.0</td><td>35.0</td><td>144.0</td></tr>"+
    "</table>"+
    "</nsdp_xml>";
          
      layer1.setNSDP("iller","STY",xml_data);
  
      var slices = new Array(5);
      slices[0] = mapper.createPieSlice("Item 1", "#ffff00"); 
      slices[1] =  mapper.createPieSlice("Item 2", "#000000");
      slices[2] =  mapper.createPieSlice("Item 3", "#ff00ff");
      slices[3] =  mapper.createPieSlice("Item 4", "#0000ff");
      slices[4] =  mapper.createPieSlice("Item 5", "#ffffff");
      
      var piechart = mapper.createPieChartStyle("pie", slices , true , 90 , "CW", 80 ,
      "kilometer" , {max:20,min:1}); layer1.addSecondaryStyle("iller",piechart); var bars = new Array(5); bars[0] = mapper.createBar("Item 1", "#FF0000"); bars[1] = mapper.createBar("Item 2", "#FFC800"); bars[2] = mapper.createBar("Item 3", "#0000FF"); bars[3] = mapper.createBar("Item 4", "#00FF00"); bars[4] = mapper.createBar("Item 5", "#00FFFF"); var barchart = mapper.createBarChartStyle("bar", bars, 160 , 160 ,
      "kilometer", true, {max:20, min:1}); layer1.addSecondaryStyle("iller",barchart); return; } function remove() { layer1.removeLayer(); return; }
</script>

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>
					
Download working page
Remember that you need to use your key code as Key attribute.