{##
 # @file history_json_wind.html
 # Copyright (C) 2015 Pressa. All rights reserved.
 #}

{% extends 'base.html' %}
{% block content %}
<script>hljs.initHighlightingOnLoad();</script>
{{ lang['dashboard']['history']['external']['map'] }}
<br/>
<br/>
<div id="map" style="width: 800px; height: 400px;"></div>
<br/>
{{ lang['dashboard']['history']['external']['event'] }} {{ hkey }}
<br/>
<br/>
<pre>
 <code class="json">{{ hist }}</code>
</pre>
<br/>
{{ lang['dashboard']['history']['external']['status'] }} {{ sid }}
<br/>
<br/>
<pre>
 <code class="json">{{ status }}</code>
</pre>
<br/>
{{ lang['dashboard']['history']['external']['comments'] }}
<br/>
<br/>
<pre>
 <code class="json">{{ comments }}</code>
</pre>

<script>
$(document).ready(function() {
    var map = $('#map');

    // Setup.
    var osm  = new L.TileLayer('http://190.210.81.120:8888/osm/{z}/{x}/{y}.png');
    var esri = new L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {});
    var map  = L.map('map');
    map.addLayer(osm);
    map.addControl(new L.Control.Layers({ 'Calles': osm, 'Aéreo': esri }, {}));

    // Add marker.
    var mapMarker = L.marker([ {{ lat }}, {{ lng }} ]);
    map.addLayer(mapMarker);
    map.fitBounds((new L.featureGroup([mapMarker])).getBounds());
    map.setZoom(14);
});
</script>
{% endblock %}