Next
Update
Prev

The DIV series in KoolMap can be used to display the HTML object on the map. You need to define <MapDivSeries> in the Layout. This example demonstrates how to display animated GIFs on the map.

...
<series>
  ...				
  <MapDivSeries ... customSeriesFunction="customSeries" ... >
    ...
  </MapDivSeries>
</series>
...

function customSeries(id, code, label, data) {
  var holder = document.createElement('div');
  holder.className = 'map-marker';
  holder.style.position = 'absolute';
	    
  var dot = document.createElement('div');
  var imgd = document.createElement('img');
  
  if ( code == 100 ) {
    dot.style.width = "34px";
    dot.style.height = "24px";
    imgd.src = 'KoolMap/Assets/Images/cloud.gif';
  } else if (code == 13000) {
    dot.style.width = "40px";
    dot.style.height = "24px";
    imgd.src = 'KoolMap/Assets/Images/suncloud.gif';
  } else if (code == 8000) {
    dot.style.width = "44px";
    dot.style.height = "39px";
    imgd.src = 'KoolMap/Assets/Images/rain.gif';
  } else if (code == 4000 || code == 23000 || code == 26000 ) {
    dot.style.width = "44px";
    dot.style.height = "39px";
    imgd.src = 'KoolMap/Assets/Images/thunder.gif';
  } else if (code == 2000) {
    dot.style.width = "44px";
    dot.style.height = "39px";
    imgd.src = 'KoolMap/Assets/Images/onlyrain.gif';
  } else {
    dot.style.width = "25px";
    dot.style.height = "25px";
    imgd.src = 'KoolMap/Assets/Images/sun.gif';
  }
  
  imgd.style.width = "100%";
  imgd.style.height = "100%";
  dot.className = 'twitterbird';
		
  dot.appendChild(imgd);
  holder.appendChild(dot);
	    
  return holder;
}

<MapDivSeries Properties>

mdivWidth This property is to set the width of <DIV>.
mdivHeight This property is to set the height of <DIV>.
customSeriesFunction This property is to set the user-defined function to be called to display the HTML object in <DIV>.
horizontalCenterGapField This property is to set the X-coordinate to which the conter point will move.
verticalCenterGapField This property is to set the Y-coordinate to which the conter point will move.

© 2017 KoolChart. All rights reserved.