First, we need some geodata on which we shall listen for hover events.
We’ll start by displaying red a and blue line on our map.

varbrowser=null;varrenderer=null;varmap=null;vargeodata=null;varstatusDiv=null;functionstartDemo(){browser=vts.browser('map-div',{map:'https://cdn.melown.com/mario/store/melown2015/map-config/melown/VTS-Tutorial-map/mapConfig.json',position:['obj',15.096869,49.3843590,'float',0.00,2.70,-77.86,0.00,692772.54,55.00]});renderer=browser.renderer;browser.on('map-loaded',onMapLoaded);};functiononMapLoaded(){map=browser.map;geodata=map.createGeodata();//add line to geodata with id = 'blue-line'geodata.addLineString([[13.4836691,49.6285568,0],[13.8559398,49.2926023,0],[14.3590684,49.1136598,0],[15.2561336,49.0637509,0],[15.8564221,49.2444548,0],[16.2429312,49.5161402,0]],'float',{a:1,b:2},'blue-line');//add line to geodata with id = 'red-line'geodata.addLineString([[13.4836691,50.6285568,0],[13.8559398,50.2926023,0],[14.3590684,50.1136598,0],[15.2561336,50.0637509,0],[15.8564221,50.2444548,0],[16.2429312,50.5161402,0]],'float',{a:4,b:5},'red-line');geodata.processHeights('heightmap-by-precision',62,onHeightProcessed);}functiononHeightProcessed(){varstyle={'constants':{'@icon-marker':['icons',6,8,18,18]},'bitmaps':{'icons':'http://maps.google.com/mapfiles/kml/shapes/placemark_circle.png'},"layers":{"some-red-line":{"filter":["==","#id","red-line"],"line":true,"line-width":4,"line-color":[255,0,0,255],"zbuffer-offset":[-5,0,0],"z-index":-1},"some-blue-line":{"filter":["==","#id","blue-line"],"line":true,"line-width":4,"line-color":[0,0,255,255],"zbuffer-offset":[-5,0,0],},"line-shadow":{"line":true,"line-width":40,"line-color":[0,0,0,100],"zbuffer-offset":[-5,0,0]}}};//make free layervarfreeLayer=geodata.makeFreeLayer(style);//add free layer to the mapmap.addFreeLayer('geodatatest',freeLayer);varview=map.getView();view.freeLayers.geodatatest={};map.setView(view);}startDemo();

We added new div with id status-div and assigned it to variable
statusDiv. We are using our``getElement()`` to make sure we get the
right element in case more applications are embedded in the same page.

Now we are propagating mouse movements into browser. Next we’ll implement their
handling. We only need to listen to geo-feature-enter and geo-feature-leave.
There is another hover event geo-feature-hover emitted every time mouse moves
when over a feature. This is handy if we need to do different things when hovering
over different parts of the feature but it is unnecessary to use in our case.

First let’s implement onFeatureEnter to display above which geo feature we are
hovering and list it’s properties inside statusDiv element.

Next let’s add a glowing effect to shadow when we are hovering above a line. We can
achieve this by adding a style layer line-glow` with the glow and adding hover-layer:"line-glow"
to line-shadow which generates the hover events.