<html>
<head>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css" rel="stylesheet" />
<style>
.mapboxgl-popup {
    max-width: 200px;
}
#map canvas {
    cursor: crosshair;
}
.legend {
    background-color: rgba(255,255,255, 0.75);
    border-radius: 3px;
    position: absolute;
    left: calc(100% - 172px);
    top: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
    font-size: 12px;
    line-height: 18px;
    padding: 10px;
    z-index: 1;
}
.legend h4 {
    margin: 0 0 10px;
}
.legend div span {
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    margin-right: 5px;
    width: 10px;
}
body { background-color:#333; margin:0px !important; overflow: hidden;font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<div id="map{{prefix}}" style="width:calc({{prefwidth}}px - 4px);height:calc({{prefheight}}px - 4px)" />

{%if this.options.get("showLegend") == "true" and this.options.get("kind") != "simple"%}
<div class="legend">
    <h4>{{this.options.get("mapValueField")}}</h4>
    {% for bin in bins %}
    <div><span style="background-color: {{bin[1]}}"></span>{{bin[0]}}</div>
    {% endfor %}
</div>
{%endif%}

<script>
    window.maploadtime = 1;
    mapboxgl.accessToken="{{this.options.get("mapboxtoken")}}";
    var map = new mapboxgl.Map({
        container: "map{{prefix}}",
        style: "mapbox://styles/mapbox/light-v9"
    });
    var popup = new mapboxgl.Popup({closeButton: false,closeOnClick: true});
    
    map.on("mousemove", function (e) {
        var fs = map.queryRenderedFeatures(e.point,{layers:["pxlayer"]});
        map.getCanvas().style.cursor=(fs.length)?"pointer":"";
        if (!fs.length) {popup.remove();return;};
        var f = fs[0];
        var keylength = Object.keys(f.properties).length;
        popuphtml = "";
        for (var key in f.properties) {
            popuphtml += "<b>"+key+": </b> "+f.properties[key]+"<br/>"
        }
        popup.setLngLat(f.geometry.coordinates).setHTML(popuphtml).addTo(map);
    });
        
    map.on("load", function() {
        var mapdata={{this.options.get("mapData")}};
        {% if this.options.get("kind") != "densitymap" %}
        map.addSource("pxdatasource", {
            "type":"geojson",
            "data":mapdata,
            "cluster": true, 
            "clusterMaxZoom": 14, 
            "clusterRadius": 20
        });
        map.addLayer({
            "id":"pxlayer",
            "type":"circle", 
            "source": "pxdatasource", 
            "paint": {{this.options.get("mapStyle")}}
        });
        map.addLayer({
            "id": "cluster-count-labels", 
            "type": "symbol", 
            "source": "pxdatasource", 
            "paint": {
                "text-color": "#FFF"
            },
            "layout": {
                "text-field": "{point_count}", 
                "text-font": [
                    "DIN Offc Pro Medium", 
                    "Arial Unicode MS Bold"
                ],
                "text-size": 12
            }
        });
        {% else %}
        map.addSource("pxdatasource", {
            "type":"geojson",
            "data":mapdata,
            "cluster": true, 
            "clusterMaxZoom": 11, 
            "clusterRadius": 20
        });
        var layers = [];
        {% for bin in bins %}
        layers.push([{{bin[0]}}, "{{bin[1]}}"]);
        {% endfor %}

        layers.forEach(function(layer,i) {
            map.addLayer({
                "id": "cluster-" + i, 
                "type": "circle", 
                "source": "pxdatasource", 
                "paint": {
                    "circle-color": layer[1],
                    "circle-radius": 70, 
                    "circle-blur": 1
                }, 
                "filter": i === layers.length-1 ? [">=", "{{this.options.get("mapValueField")}}", layer[0]] : 
                    ["all", [">=", "{{this.options.get("mapValueField")}}", layer[0]], ["<", "{{this.options.get("mapValueField")}}", layers[i+1][0]]]

            }, "waterway-label");
        });
        
        map.addLayer({
            "id": "pxlayer", 
            "type": "circle", 
            "source": "pxdatasource", 
            "paint": {
                "circle-color": "rgba(0,255,0,0.5)", 
                "circle-radius": 20, 
                "circle-blur": 1
            }, 
            "filter": ["!=", "cluster", true]
        }, "waterway-label");

        {% endif %}
        map.fitBounds({{this.options.get("mapBounds")}});
    });
</script>
</body>
</html>
