Norske fylker

//--------------------------------
// filling a SVG-element with hexagon paths,
// one for each fylke
// hexagon surrounding circle radius
var R=70;
var pattern=
'<path style="fill:#dddddd;stroke:red" id="ID" label="name"\
 d="M x1,y1 L x2,y2 x3,y3 x4,y4 x5,y5 x6,y6 z" \>'; 
// convenient
var sin60=Math.sin(Math.PI*(60.0/360.0));
var cos60=Math.cos(Math.PI*(60.0/360.0));
// toggling content
var showId=true;
// the svg element
var svgE=null;
function hexagon(x,y,id,name) {
    var T=pattern;
    T=T.replace("x1",x)            .replace("y1",y-R);
    T=T.replace("x2",x+cos60*R)    .replace("y2",y-sin60*R);
    T=T.replace("x3",x+cos60*R)    .replace("y3",y+sin60*R);
    T=T.replace("x4",x)            .replace("y4",y+R);
    T=T.replace("x5",x-cos60*R)    .replace("y5",y+sin60*R);
    T=T.replace("x6",x-cos60*R)    .replace("y6",y-sin60*R);
    T=T.replace("ID",id);
    T=T.replace("name",name);
    //console.log(T);
    var sv=document.getElementById("svg1").innerHTML+=T;    
}
function setUp(svgId){
    // adjust viewBox to set radius
    // the drawing w:h is approx is 3:4
    svgE=document.getElementById(svgId);
    svgE.setAttribute("viewBox",'0 0 '+R*12+' '+ R*16);
    // top-right hexagon center
    var rootX=10*R;//250;
    var rootY=2*R//50;
    // strategy is to draw hexagons in down-left series
    // steplengths
    var dx=R*cos60;
    var dy=(R+R*sin60);
    
    hexagon(rootX        ,rootY,'20','Finnmark');
    rootX-=2*R*cos60;
    hexagon(rootX        ,rootY,'19','Troms');
    hexagon(rootX-1*dx     ,rootY+1*dy,'18','Nordland');
    hexagon(rootX-2*dx     ,rootY+2*dy,'17','Nord Trøndelag');
    hexagon(rootX-3*dx    ,rootY+3*dy,'15','Møre og Romsdal');
    hexagon(rootX-4*dx    ,rootY+4*dy,'14','Sogn og Fjordane');
    hexagon(rootX-5*dx    ,rootY+5*dy,'12','Hordaland');
    hexagon(rootX-6*dx    ,rootY+6*dy,'11','Rogaland');
    rootX=rootX-1*dx;
    rootY=rootY+3*dy;
    hexagon(rootX         ,rootY,'16','Sør Trøndelag');
    hexagon(rootX-1*dx    ,rootY+1*dy,'05','Oppland');
    hexagon(rootX-2*dx    ,rootY+2*dy,'06','Buskerud');
    hexagon(rootX-3*dx    ,rootY+3*dy,'08','Telemark');
    hexagon(rootX-4*dx    ,rootY+4*dy,'10','Vest Agder');
    rootX=rootX+1*dx;
    rootY=rootY+1*dy;
    hexagon(rootX        ,rootY,'04','Hedmark');
    hexagon(rootX-1*dx    ,rootY+1*dy,'03','Oslo');
    hexagon(rootX-2*dx    ,rootY+2*dy,'07','Vestfold');
    hexagon(rootX-3*dx    ,rootY+3*dy,'09','Aust Agder');
    rootX=rootX+1*dx;
    rootY=rootY+1*dy;
    hexagon(rootX        ,rootY,'02','Akershus');
    hexagon(rootX+1*dx    ,rootY+1*dy,'01','Østfold');
    
    // add text holder
    svgE.innerHTML+='<g id="textkeeper"></g>';
    showID();
    //showName();
}
function findCenterInHexagonPath(FP){
    // conpare pattrn, assuming start with absolute move: M
    var pos= FP.getAttribute("d").split("M")[1].split(",");
    pos[0]=parseInt(pos[0]);
    pos[1]=parseInt(pos[1])+R;
    return pos;
}
function showID(){
    var fyPaths=document.querySelectorAll("#svg1 path");
    //console.log(fyPaths.length);
    var tKeeper=document.querySelector("#svg1 #textkeeper");
    tKeeper.innerHTML="";
    for (var i=0; i< fyPaths.length;i++){
        var FP=fyPaths[i];
        var ID=FP.getAttribute("id");
        var pos=findCenterInHexagonPath(FP);
        //console.log(ID,pos);
        tKeeper.innerHTML+= 
          '<text text-anchor="middle" x="'+
          pos[0]+'" y="'+pos[1]+
          '" font-size="40px" fill="blue" >'+ID+'</text>';
    }
}
function showName(){
    var fyPaths=document.querySelectorAll("#svg1 path");
    //console.log(fyPaths.length);
    var tKeeper=document.querySelector("#svg1 #textkeeper");
    tKeeper.innerHTML="";
    for (var i=0; i< fyPaths.length;i++){
        var FP=fyPaths[i];
        var pos=findCenterInHexagonPath(FP);
        var words=FP.getAttribute("label").split(" ");
        var LH=0;
        if(words.length >1)
            LH=26;
        for(var wix=0;wix < words.length;wix++){
        tKeeper.innerHTML+= 
            '<text  text-anchor="middle" x="'+
            pos[0]+'" y="'+parseInt(pos[1]+LH*(wix-1))+
            '" font-size="26px" fill="blue" >'+words[wix]+'</text>';
        }
    }
}
function toggleContent(){
    if(showId)
        showName();
    else
        showID();
    showId=!showId;
}