Demo

LocationBox JavaScript Demos

Add Layer Coloring

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

Color Stops:  

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=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; }

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>
  <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>
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.