Demo

LocationBox JavaScript Demos

Add Layer By Category

Add Layer Pharmacy:     Add Layer Hospital:     Add Layer Grocery Store:  

Add Layer Pharmacy (vector marker):  

Remove Layers:  

Instructions

Use the "Add" buttons to add layers by category on the map. Use "Remove" button to remove the layers.

See Category List for list of categories available.

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 layer = new ILayer();
var layer1 = new ILayer();
var layer2 = new ILayer();


function startup() {
  mapper.initMap(41.1, 29.1, 10, IMapper.BASEMAP_POI);
  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, 240, 100, "Bilgi: " + info.id);
  return;
}

function add() {
  layer.createCategoryLayer("ECZANE", "eczler", null, true, mouseClick);
  return;
}

function add12() {
  layer1.createCategoryLayer("HASTANE", "hstler", null, true, mouseClick);
  return;
}

function add13() {
  layer2.createCategoryLayer("MARKET", "mrkler", null, true, mouseClick);
  return;
}

function add2() {
  var vector = "0, 0, 0, 10, 10, 10, 10, 0, 0, 0";
  var sym = mapper.createVectorMarkerStyle("ms1", "FF0000", 120, "000000", 255, 1, 10, 10, vector);
  layer.createCategoryLayer("ECZANE", "eczler", sym, true, mouseClick);
  return;
} 

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

Buttons:

  <a href="javascript:add()"><img src="images/add.gif" border=0></a>
  <a href="javascript:add12()"><img src="images/add.gif" border=0></a>
  <a href="javascript:add13()"><img src="images/add.gif" border=0></a>
  <a href="javascript:add2()"><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.