Demo

LocationBox JavaScript Demos

Add Layer Coloring

Add Layer 1:     Add Layer 2:     Add Layer 3:     Remove Layers:  

Instructions

Use the "Add" button to add a layer coloring on the map. Use "Remove" button to remove the layers. 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();
var layer1 = new ILayer();
var layer2 = new ILayer();
var layer3 = new ILayer();


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 sym = mapper.createColorStyle("cs1", "FF0000", 120, "0000FF", 120, 3);
  layer1.createLayer(ILayer.MAP_IL, "iller", "IL_ID IN (1)", null, sym, true, mouseClick);
  var sym2 = mapper.createColorStyle("cs1", "FFFF00", 120, "0000FF", 120, 3);
  layer2.createLayer(ILayer.USER_REGION, "rgn", "", null, sym2, true, mouseClick);
  layer3.createLayer(ILayer.USER_POINT, "pnt", "", null, "M.PIN_1", true, mouseClick);
  return;
} 

function add2() {
  // Create basic color styles to be used
  var sym1 = mapper.createColorStyle("cs1", "FF0000", 120, "0000FF", 120, 3);
  var sym2 = mapper.createColorStyle("cs2", "00FF00", 120, "0000FF", 120, 3);
  var sym3 = mapper.createColorStyle("cs3", "FFFF00", 120, "0000FF", 120, 3);
  var sym4 = mapper.createColorStyle("cs4", "00FFFF", 120, "0000FF", 120, 3);
  var sym5 = mapper.createColorStyle("cs5", "FF00FF", 120, "0000FF", 120, 3);
  var sym6 = mapper.createColorStyle("cs6", "808080", 120, "0000FF", 120, 3);

  // List of symbol assignments
  var symlist = [
      {list: '1',       label: 'L1', sym: sym1},
      {list: '35,45',   label: 'L2', sym: sym2},
      {list: '6',       label: 'L3', sym: sym3},
      {list: '34',      label: 'L4', sym: sym4},
      {list: '41',      label: 'L5', sym: sym5},
      {list: '54,48',   label: 'L6', sym: sym6}
    ];

  var sym = mapper.createAdvancedStyle("advanced_style", symlist);
  layer1.createLayer(ILayer.MAP_IL, "iller", "IL_ID IN (1,6,35,45,34,48,54,23,33)", 
                     "IL_ID", sym, true, mouseClick);
  return;
}

function add3() {
  // Create basic marker styles to be used
  var sym1 = mapper.createVectorMarkerStyle("ms1", "FF0000", 120, "000000", 255, 1, 20, 20, null);
  var sym2 = mapper.createVectorMarkerStyle("ms2", "FFFF00", 120, "000000", 255, 1, 20, 20, null);
  var sym3 = mapper.createVectorMarkerStyle("ms3", "FF00FF", 120, "00FF00", 255, 1, 20, 20, null);
  var sym4 = mapper.createIconMarkerStyle("ms4", "http://www.locationbox.com.tr/web/css/images/add.gif", 
                                          20, 20);


  // List of symbol assignments
  var symlist = [
      {list: '1', label: 'L1', sym: sym1},
      {list: '2', label: 'L2', sym: sym2},
      {list: '3', label: 'L3', sym: sym3},
      {list: '4', label: 'L4', sym: sym4}
    ];

  var sym = mapper.createAdvancedStyle("advanced_style", symlist);
  layer3.createLayer(ILayer.USER_POINT, "pnt", "", null, sym, true, mouseClick);
  return;
}

function remove() {
  layer1.removeLayer();
  layer2.removeLayer();
  layer3.removeLayer();
  return;
}

Buttons:

  <a href="javascript:add()"><img src="images/add.gif" border=0></a>
  <a href="javascript:add2()"><img src="images/add.gif" border=0></a>
  <a href="javascript:add3()"><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 layer. See this post on LocationBox blog.

Download working page
Remember that you need to use your key code as Key attribute.