Postal Code Demo

This is a simple map showing the main coordinates of dutch postal codes.

<svg width="1000" height="1030" version="1.1" xmlns="http://www.w3.org/2000/svg" onload="Init()"> 
 
  <script type="text/ecmascript">   <![CDATA[
    var evtT1;
    
    function Init(evt)
    {
       evtT1 = document.getElementById("evtText1");

    }
    function Highlight(evt)
    {
       evt.target.setAttribute("opacity", "1.0");
       evt.target.setAttribute("fill", "red");
       evt.target.setAttribute("r", "4");
       evtT1.firstChild.nodeValue = "Mouse over postcode: " + evt.target.getAttributeNS(null,"postcode");
    }
    function Unhighlight(evt)
    {
       evt.target.setAttribute("opacity", "0.8");
       evt.target.setAttribute("fill", "white");
       evt.target.setAttribute("r", "2");
       evtT1.firstChild.nodeValue = "";
    }
  ]]>
  </script> 
<rect x="0" y="0" width="100%" height="100%" fill="#101010"/>

<g font-size="24px" font-family="Arial" stroke="white" fill="white" > 
        <text x="20" y="20" id="evtText1"> </text> 
</g> 

<circle cx="442.1889343261719" cy="406.83635787963914" r="2" fill="white" opacity="0.8" postcode="1011" onmouseover="Highlight(evt);" onmouseout="Unhighlight(evt);"   />
<circle cx="440.47754669189453" cy="406.1656425476079" r="2" fill="white" opacity="0.8" postcode="1012" onmouseover="Highlight(evt);" onmouseout="Unhighlight(evt);"   />
....
<circle cx="845.1815605163574" cy="71.40501480102586" r="2" fill="white" opacity="0.8" postcode="9998" onmouseover="Highlight(evt);" onmouseout="Unhighlight(evt);"   />
<circle cx="836.4022636413574" cy="76.79995422363328" r="2" fill="white" opacity="0.8" postcode="9999" onmouseover="Highlight(evt);" onmouseout="Unhighlight(evt);"   />
</svg>
      

It will show up like (drag circles):