<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
   integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
   crossorigin=""></script>

<style type="text/css">
    html, body, #mapid {
        height: 100%;
        width: 100%;
        font-family: Roboto, Arial, sans-serif;
        color: rgb(51, 51, 51);
        font-size: 15px;
        font-weight: 400;
        margin: 0;
    }
</style>

<title>EcoShard Visualizer</title>
</head>
<body>
    <div id="mapid"></div>
</body>
<script type="text/javascript">
    var map = L.map('mapid', {
        center: new L.LatLng(0,0),
        zoom: 1
    });
    $('.leaflet-container').css('cursor','crosshair');
    var cp_wms_url = 'http://viewer.ecoshard.org:8080/geoserver/{{ datastore_id }}/wms';
    var wmsOptions = {
        layers: '{{ layer_id}}',
        format: 'image/png',
        styles: ['{{ style_id }}'],
    };
    var wmsLayer = L.tileLayer.wms(cp_wms_url, wmsOptions);
    map.addLayer(wmsLayer);
</script>
</html>
