index.html

<!-- css will be leaked through inside shadow dom -->
<!-- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

<script src="http://d3js.org/d3.v3.min.js"></script>
 -->

<!-- FOR LOCAL -->
<link rel="stylesheet" href="css/leaflet.css" />
<script src="js/leaflet.js"></script>
<script src="js/d3.v3.min.js"></script>

<script defer src="html5geomap.js"></script>
<script defer src="html5geomap.domobserver.js"></script>
<script defer src="d3stuff.js"></script>

<style>
  html, body {
  	margin: 0;
  	height: 100%;
  }

  .template {
    display: none;
  }

  geomap {
    display: block;
    height: 100%;
    width: 100%;
  }

  button {
  	z-index: 1;
  	position: absolute;
  	top: 1em;
  	right: 1em;
  }
</style>

<template id="geomapDivTemplate">
  <style>
    /* this causes glitches; instead, we leak leaflet css from the host */
    /*@import url("http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css");*/
    div.geomap {
      width: 100%;
      height: 100%;
    }
  </style>
  <div class="geomap"></div>
</template>

<div id="disruptive-template" class="template">
  <div id="%ID%">
    <input type="text" name="disruptive-reason" placeholder="explain?" autofocus />
    <button onclick="disruptiveOK(this)">ok</button>
  </div>
</div>

<!-- MOSCONE 37.7839431,-122.4012887 -->
<!-- LOHJA lat="60.2497278" lon="24.0649247" -->
<geomap lat="37.7839431" lon="-122.4012887" zoomlevel="14">
	<marker id="moscone" lat="37.7839431" lon="-122.4012887">Graphical Web on Moscone Center</marker>
</geomap>