Demo

LocationBox JavaScript Demos

Add Layer With Various Styles

Set Color Schema:     Set Linear Gradient:     Set Radial Gradient:     Set Range Buckets:  

Instructions

Use the buttons to add layer to a various styles on the map. Use "Remove" button to remove the marker. Edit the source code to add more markers to any other point.
See the JavaScript API for more information.

Source Code

The Javascript code for the above map is:

<script language="Javascript" 
	src="http://www.locationbox.net/locationboxus/services?
	Key=key&Cmd=APIV2&Typ=JS"></script>

<script language="JavaScript">
var mapper  = new IMapper();

function startup() {
  mapper.initMap(40.7, 29.1, 7);
  mapper.addNavigationPanel();
  layer.createVectorLayer(ILayer.MAP_IL, "iller","IL_ID IN (34,41)","IL_ID",render_style_l01,true);
  return;
} 

function setColorSchema(){
  var styleScheme1 = mapper.createColorScheme("render_style", 52, null, null,null,null,"#ccd6f5", null, null, "#4d70db", 0.9, 0.5);
  layer.setJDBCRenderingStyle("iller", styleScheme1);    
}

function setLinearGradient(){
  linearGradient = mapper.createLinearGradient();
  layer.setJDBCRenderingStyle("iller", linearGradient);
}

function setRadialGradient(){
  radialGradient = mapper.createRadialGradient();
  layer.setJDBCRenderingStyle("iller", radialGradient);
}

function setRangeBuckets(){
  var render_style_l01 = mapper.createColorStyle("cs1", 0xfee5d9, 1, 0xd3d3d3, 0.1, 3);
  var render_style_l02 = mapper.createColorStyle("cs2", 0xfcae91, 1, 0xd3d3d3, 0.1, 3);
  var render_style_l03 = mapper.createColorStyle("cs3", 0xfb6a4a, 1, 0xd3d3d3, 0.1, 3);
  var render_style_l04 = mapper.createColorStyle("cs4", 0xde2d26, 1, 0xd3d3d3, 0.1, 3);
  var render_style_l05 = mapper.createColorStyle("cs5", 0xa50f15, 1, 0xd3d3d3, 0.1, 3);

  var styles = [render_style_l01, render_style_l02, render_style_l03, render_style_l04, render_style_l05];
      
  var bkt1 = mapper.createRangedBucket(0, -99999, 3273622);
  var bkt2 = mapper.createRangedBucket(1, 3273622, 6261310);
  var bkt3 = mapper.createRangedBucket(2, 6261310, 11288619);
  var bkt4 = mapper.createRangedBucket(3, 11288620, 30971320);

  var buckets = [bkt1, bkt2, bkt3, bkt4];
 
  var bucketStyle = mapper.createBucketStyle('my_adv_buckets', styles , buckets, 'custom', 4, 'linear');
  
  layer.setJDBCRenderingStyle("iller", bucketStyle);
}

function remove() {
  mapper.removeFeature('id_1');
  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.