Demo

LocationBox JavaScript Demos

Add Traffic Info (TMC) With Animation

Show:     Remove Traffic:   Stop Flow:  

Instructions

Use the "Show" button to show traffic info with flow on the map. Zoom into the map for details.
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();

function startup() {
      mapper.initMap(41.046179257461404, 29.02095794373928, 10); 
      mapper.addNavigationPanel();      
      return;
} // startup()
    


function beforeZoom() {
      mapper.removeTrafficTmc();
}
	
function afterZoom() {
     mapper.addTrafficTmc("41,-41,42,-42,43,-43,44,-44,45,-45,46,-46,47,-47,
     48,-48,49,-49,50,-50,51,-51,52,-52");
}

function show() {          
      mapper.addTrafficTmc();
	  
      mapper.animateMarkerFlow("41", 200, 'M.POINT', 4, 4, true, 6, false);
      mapper.animateMarkerFlow("-41", 300, 'M.POINT', 4, 4, true, 6, false);
      mapper.animateMarkerFlow("42", 200, 'M.POINT', 4, 4, true, 6, false);
      mapper.animateMarkerFlow("-42", 500, 'M.POINT', 4, 4, true, 6, false);
      mapper.animateMarkerFlow("43", 300, 'M.POINT', 4, 4, true, 6, false);
      mapper.animateMarkerFlow("-43", 200, 'M.POINT', 4, 4, true, 6, false);
      mapper.animateMarkerFlow("44", 500, 'M.POINT', 4, 4, true, 6, false);
      mapper.animateMarkerFlow("-44", 250, 'M.POINT', 4, 4, true, 6, false);
      mapper.animateMarkerFlow("45", 500, 'M.POINT', 4, 4, true, 6, true);
      mapper.animateMarkerFlow("-45", 300, 'M.POINT', 4, 4, true, 6, false);
      mapper.animateMarkerFlow("46", 500, 'M.POINT', 4, 4, true, 6, true);
      mapper.animateMarkerFlow("-46", 350, 'M.POINT', 4, 4, true, 6, false);
      mapper.animateMarkerFlow("47", 200, 'M.POINT', 4, 4, true, 6, true);
      mapper.animateMarkerFlow("-47", 500, 'M.POINT', 4, 4, true, 6, false);
      mapper.animateMarkerFlow("48", 250, 'M.POINT', 4, 4, true, 6, true);
      mapper.animateMarkerFlow("-48", 300, 'M.POINT', 4, 4, true, 6, false);
      mapper.animateMarkerFlow("49", 250, 'M.POINT', 4, 4, true, 6, true);
      mapper.animateMarkerFlow("-49", 500, 'M.POINT', 4, 4, true, 6, false);
      mapper.animateMarkerFlow("50", 200, 'M.POINT', 4, 4, true, 6, true);
      mapper.animateMarkerFlow("-50", 300, 'M.POINT', 4, 4, true, 6, false);
      mapper.animateMarkerFlow("51", 200, 'M.POINT', 4, 4, true, 6, true);
      mapper.animateMarkerFlow("-51", 250, 'M.POINT', 4, 4, true, 6, false);
      mapper.animateMarkerFlow("52", 300, 'M.POINT', 4, 4, true, 6, true);
      mapper.animateMarkerFlow("-52", 500, 'M.POINT', 4, 4, true, 6, false);

      return;
}
	
function removeTraffic() {
     mapper.removeTrafficTmc();
}
	
function stopFlow() {
    mapper.stopMarkerFlowAnimation();
}
 
    
</script>

Buttons:

  <a href="javascript:show()"><img src="images/add.gif" border=0></a>
  <a href="javascript:removeTraffic()"><img src="images/remove.gif" border=0></a>
  <a href="javascript:stopFlow()"><img src="images/remove.gif" border=0></a>
Download working page
Remember that you need to use your key code as Key attribute.