<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();
var layer  = new ILayer();
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 render_style_l01 = mapper.createColorStyle("cs1", "FF0000", 120, "0000FF", 120, 3);
  var render_style_l02 = mapper.createColorStyle("cs2", "00FF00", 120, "0000FF", 120, 3);
  var render_style_l03 = mapper.createColorStyle("cs3", "FFFF00", 120, "0000FF", 120, 3);
  var render_style_l04 = mapper.createColorStyle("cs4", "00FFFF", 120, "0000FF", 120, 3);
  var render_style_l05 = mapper.createColorStyle("cs5", "FF00FF", 120, "0000FF", 120, 3);
  var render_style_l06 = mapper.createColorStyle("cs6", "808080", 120, "0000FF", 120, 3);
  var render_style_l07 = mapper.createColorStyle("cs4", "00FFFF", 120, "0000FF", 120, 3);
  var render_style_l08 = mapper.createColorStyle("cs5", "FF00FF", 120, "0000FF", 120, 3);
  var render_style_l09 = mapper.createColorStyle("cs6", "808080", 120, "0000FF", 120, 3);
  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, render_style_l09];
    
  var bucket0 = mapper.createRangedBucket(0, 0, 10);
  var bucket1 = mapper.createRangedBucket(1, 10, 20);
  var bucket2 = mapper.createRangedBucket(2, 20, 30);
  var bucket3 = mapper.createRangedBucket(3, 30, 40);
  var bucket4 = mapper.createRangedBucket(4, 40, 50);
  var bucket5 = mapper.createRangedBucket(5, 50, 60);
  var bucket6 = mapper.createRangedBucket(6, 60, 70);
  var bucket7 = mapper.createRangedBucket(7, 70, 81);

  var buckets = [bucket0, bucket1, bucket2, bucket3, bucket4, bucket5, bucket6, bucket7];
  var styleScheme = mapper.createColorScheme("render_style", 9, 'equal', 
 mapper.createColorStyle("cs1", "efc0b8", 120, "0000FF", 120, 3), styles, buckets, "#ffe766" , null ,null);

  layer1.createLayer(ILayer.MAP_IL, "iller", null,"IL_ID",styleScheme,true, null);
  return;
} 

function add2() {
  // Create basic color styles to be used
  var myc = new OM.style.Color({
            styleName: "mycolor1",
            stroke: "#0000FF",
            strokeOpacity: 1.0,
            fill: "#F2EFE9",
            fillOpacity: 1.0
            });
  var bucket1 = mapper.createRangedBucket(1, 10, 20);
  var bucket2 = mapper.createRangedBucket(2, 20, 30);
  var bucket3 = mapper.createRangedBucket(3, 30, 40);
  var bucket4 = mapper.createRangedBucket(4, 40, 50);
  var bucket5 = mapper.createRangedBucket(5, 50, 60);
  var bucket6 = mapper.createRangedBucket(6, 60, 70);
  var bucket7 = mapper.createRangedBucket(7, 70, 81);

  var buckets = [bucket1, bucket2, bucket3, bucket4, bucket5, bucket6, bucket7];

  layer1.createLayer(ILayer.MAP_IL, "iller", null,"IL_ID",myc,true, null);
  return;
}

function add3() {
  // Create basic marker styles to be used
  var styleScheme = mapper.createColorScheme("render_style", 81, null, null,null,null,"#ccd6f5", null,null);
  layer1.createLayer(ILayer.MAP_IL, "iller", null,"IL_ID",styleScheme,true, null);
  return;
}

function selectColor(element) {
  var doc = document;
  var text = doc.getElementById(element);    
  console.log(text);
  var selectedColor = text.style.backgroundColor;
  console.log(rgb2hex(selectedColor));

  var myc1 = new OM.style.Color({
        styleName: "mycolor1",
        stroke: "#0000FF",
        strokeOpacity: 1.0,
        fill: rgb2hex(selectedColor),
        fillOpacity: 1.0
    });

  layer.createLayer(ILayer.MAP_IL, "iller", null,"IL_ID",myc1,true, null);
}

function rgb2hex(rgb) {
  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  var hexDigits = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}

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

  <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>
  <a href="javascript:selectColor('color1')"><img src="../css/images/layercoloringc1.png"
   style="background-color:#C6DBEF" id="color1" border=0></a>
  <a href="javascript:selectColor('color2')"><img src="../css/images/layercoloringc2.png"
   style="background-color:#A50F15" id="color2" border=0></a>
  <a href="javascript:selectColor('color3')"><img src="../css/images/layercoloringc3.png"
   style="background-color:#ffff00" id="color3" border=0></a>