{{ define "title" }}
  CV by Location | {{ .Site.Title }}
{{ end }}

{{ define "main-class" }}--section location-map{{ end }}

{{ define "footer-scripts" }}
    <script src="https://www.openlayers.org/api/OpenLayers.js"></script>
    <script>
        map = new OpenLayers.Map("map");
        map.addLayer(new OpenLayers.Layer.OSM());

        var markers = new OpenLayers.Layer.Markers( "Markers" );
        map.addLayer(markers);
        
        {{ range $.Site.Data.locations }}
            markers.addMarker(
                new OpenLayers.Marker(
                    new OpenLayers.LonLat(
                        {{ .lon }},
                        {{ .lat }}
                    ).transform(
                        new OpenLayers.Projection("EPSG:4326"),
                        map.getProjectionObject()
                    )
                )
            );
        {{ end }}
        
        map.setCenter([0,0], 5);
    </script>
{{ end }}

{{ define "main-header" }}
    <header class="site-content__header">
      <h1 class="page-title">{{ .Title | safeHTML }}.</h1>
      {{ .Content }}
    </header>
{{ end }}

{{ define "main-body" }}
<article class="site-content__body site-content__body--chart">
      <div id="map" style="width: 100%; height: 500px; margin: 0; display: block;"></div>
</article>
{{ end }}