Rafael.js - Interactive Map of Ukraine

by Oleg Rudoy

HTML

<script src="paths.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<div id="map"></div>

CSS

body {
    background: #EFEFEF;
}
#map {
    width: 700px;
    height: 700px;
    margin: 50px auto;
}

JavaScript

Raphael.fn.popup=function(x,y,text,size){txtattr={font:"12px Helvetica, Arial, sans-serif"}
    size=size||5;text=text||"";var res=this.set(),d=3;res.push(this.path().attr({fill:"#333333",stroke:"#333333"}));res.push(this.text(x,y,text).attr(txtattr).attr({fill:"#fff","font-family":"Helvetica, Arial"}));res.update=function(X,Y,WIDTH){X=X||x;Y=Y||y;var mmax=Math.max,mmin=Math.min,bb=this[1].getBBox(),w=bb.width/2,h=bb.height/2,dir=(X-bb.width<15)?3:1,X=(dir==1)?X:X+WIDTH,dx=[0,w+size*2,0,-w-size*2],dy=[-h*2-size*3,-h-size,0,-h-size],p=["M",X-dx[dir],Y-dy[dir],"l",-size,(dir==2)*-size,-mmax(w-size,0),0,"a",size,size,0,0,1,-size,-size,"l",0,-mmax(h-size,0),(dir==3)*-size,-size,(dir==3)*size,-size,0,-mmax(h-size,0),"a",size,size,0,0,1,size,-size,"l",mmax(w-size,0),0,size,!dir*-size,size,!dir*size,mmax(w-size,0),0,"a",size,size,0,0,1,size,size,"l",0,mmax(h-size,0),(dir==1)*size,size,(dir==1)*-size,size,0,mmax(h-size,0),"a",size,size,0,0,1,-size,size,"l",-mmax(w-size,0),0,"z"].join(","),xy=[{x:X,y:Y+size*2+h},{x:X-size*2-w,y:Y},{x:X,y:Y-size*2-h},{x:X+size*2+w,y:Y}][dir];xy.path=p;this.attr(xy);return this;};return res.update(x,y);};

var paths = {
    uzhhorod: {
        name: "Uzhhorod",
        slug: "uzhhorod",
        url: "#",
        path: "M45.570772,199.56338 c -1.050281,0.0232 -0.681979,1.35363 -1.565149,1.66049 -1.126945,1.48406 -0.403672,3.79071 -1.84322,5.14036 -2.23283,2.12704 -5.572357,4.04819 -5.625,7.53973 -0.226552,2.98096 -1.238756,6.12893 -3.257416,8.3501 -1.64831,1.41964 -4.047611,2.42952 -4.449152,4.83051 -0.06026,2.14006 -2.415886,3.73753 -1.779661,5.93485 0.931643,1.52859 3.142928,2.2056 3.337005,4.24023 0.735786,2.02103 0.873216,4.78336 3.209605,5.67503 1.765996,1.10067 3.994065,1.70646 5.594303,2.92372 0.719861,2.07869 1.873256,4.04376 3.017985,5.8713 1.703155,0.34435 3.559604,0.15025 5.09763,1.18626 1.032557,0.69737 2.73487,1.33605 2.13691,2.87884 0.08685,1.38259 -0.554208,3.00702 0.05095,4.26911 0.828625,0.58631 1.381942,-0.94148...