function render_measurement_stations(){
var mapplot={xlim:[],ylim:[]};
mapplot.xlim = [0,0];
mapplot.ylim = [0,0];
var measurementstations={name:[],hname:[],parameter:[],device:[],latitude:[],longitude:[],owner:[],public:[]};
var el = document.getElementById("svgframe"); // or other selector like querySelector()
//console.log (el);
var rect = el.getBoundingClientRect(); // get the bounding rectangle
wf = ;
hf = ;
//console.log( rect.width );
//console.log( rect.height);
//console.log( rect);
//console.log(measurementstations.name);
//document.getElementById("svgplotstations").innerHTML=""
for (i=0; i< measurementstations.name.length; i++)
{
document.getElementById("svgplotstations").innerHTML +="<head/><circle id=\""+measurementstations.name[i]+"icon\" cx=\""+Math.round(rect.width*(measurementstations.longitude[i]-mapplot.xlim[0])/(wf*(mapplot.xlim[1]-mapplot.xlim[0])))+"\" cy=\""+Math.round(rect.height-rect.height*(measurementstations.latitude[i]-mapplot.ylim[0])/(hf*(mapplot.ylim[1]-mapplot.ylim[0])))+"\" r=\"5\" stroke=\"black\" stroke-width=\"1\" fill=\"white\" onclick=\"modelunit.changeRegion(-1);modelunit.changeStation("+i+");modelunit.updatePlotArea()\"></circle>";
document.getElementById("svgplotstations").innerHTML +="<text id=\""+measurementstations.name[i]+"popup\" x=\""+Math.round(rect.width*(measurementstations.longitude[i]-mapplot.xlim[0])/(wf*(mapplot.xlim[1]-mapplot.xlim[0]))+10)+"\" y=\""+Math.round(rect.height-rect.height*(measurementstations.latitude[i]-mapplot.ylim[0])/(hf*(mapplot.ylim[1]-mapplot.ylim[0]))+5)+"\" font-size=\"20\" fill=\"white\" style=\"font-weight: bold;\" visibility=\"hidden\">"+measurementstations.hname[i]+" <set attributeName=\"visibility\" from=\"hidden\" to=\"visible\" begin=\""+measurementstations.name[i]+"icon.mouseover\" end=\""+measurementstations.name[i]+"icon.mouseout\"></set> </text>";
}
//alert($(document.getElementById("svgframe")).html());
console.log( $(document.getElementById("svgframe")).html());
}