Demo

LocationBox JavaScript Demos

Add Heat Map (UserPoint)

Add UserPoint Heat :     Remove Layer:  

Color Stops:


Instructions

Use the "Add" buttons to add heatmap by your user points 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 layer = new ILayer();


function startup() {
  mapper.initMap(41.0, 29.0, 8);
  mapper.addNavigationPanel();
  return;
} 

function add() {
  layer.createHeatmapLayer(ILayer.HEATMAP_IL, "pnt", ILayer.USER_POINT, null, true);
  return;
}     

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

function selectColor(element) {
  var doc = document;
  var text = doc.getElementById(element);    
  var selectedColor = text.style.backgroundColor;
  var colorStops;
	
  if (rgb2hex(selectedColor) == "#f9c7d1" ) 
    colorStops = [rgb2hex(selectedColor),"#e0b3bc","#ae8b92","#ae8b92","#95777d",
    "#7c6368","#634f53","#4a3b3e","#312729","#181314"];
  else if (rgb2hex(selectedColor) == "#717bff" ) 
    colorStops = [rgb2hex(selectedColor),"#656ee5","#5a62cc","#4f56b2","#434999",
    "#383d7f","#2d3166","#21244c","#161833","#0b0c19"];
  else colorStops = [rgb2hex(selectedColor),
    "#86ae00","#779b00","#688700","#597400","#4a6100","#3b4d00","#2c3a00","#1d2600","#0e1300"];
  layer.createHeatmapLayer(ILayer.HEATMAP_IL, "pnt", ILayer.USER_POINT, null, true,colorStops);
}

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

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>
  <a href="javascript:selectColor('color1')"><img style="background-color:#f9c7d1" 
  src="../css/images/heatmapuserpointc1.png" id="color1" border=0></a>
  <a href="javascript:selectColor('color1')"><img style="background-color:#717bff" 
  src="../css/images/heatmapuserpointc2.png" id="color2" border=0></a>
  <a href="javascript:selectColor('color1')"><img style="background-color:#95c200" 
  src="../css/images/heatmapuserpointc3.png" 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.