<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" href="theme/default/style.css" type="text/css" />
    <link href='style.css' rel='stylesheet' type='text/css' />

    <style type="text/css">
      #map {
        width: 100%;
        box-sizing:border-box;
      }
      .olPopup p { margin:0px; }
      .nodePopup { font-size: 0.8em; }
      .nodePopup .label { font-weight: bold; }
    </style>

    <title>Freifunk Lübeck - Knotenkarte</title>

    <script src="http://maps.burningsilicon.net/OpenLayers-2.8/OpenLayers.js"></script>
    <script src="http://maps.burningsilicon.net/OpenLayers-2.8/OpenStreetMap.js"></script>
    <script type="text/javascript" src="d3.v2.js"></script>
    <script type="text/javascript" src="links.js"></script>
    <script type="text/javascript" src="geomap.js"></script>

    <script type="text/javascript">
      var nodes_json = "nodes.json"

      window.onresize = resize

      function getOffset( el ) {
        var _x = 0, _y = 0

        while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
          _x += el.offsetLeft - el.scrollLeft
          _y += el.offsetTop - el.scrollTop
          el = el.offsetParent
        }
        return { top: _y, left: _x }
      }

      function resize() {
        var offset = getOffset(document.getElementById('map'))

        var w = window.innerWidth - offset.left
        var h = window.innerHeight - offset.top - 1

        d3.select("#map").style("width", w+"px").style("height", h+"px")
        resizeMap()
      }
    </script>
  </head>

  <body onload="resize(); init()">
    <header>
      <h1>luebeck.freifunk.net</h1>
      <ul>
        <li><a href="nodes.html">Knotengraph</a></li>
        <li><a href="geomap.html">Knotenkarte</a></li>
      </ul>
      <button id="gpsbutton">Koordinaten beim nächsten Klick anzeigen</button>
    </header>
    <div id="map"></div>
  </body>
</html>