var map = null;
var type = 'polygons';

var customControl =  L.Control.extend({

    options: {
        position: 'topright'
    },

    onAdd: function (map) {
        var container = L.DomUtil.create('input');
        container.type = "button";

        if(type == 'polygons'){
            container.title = "Вместо значков будет отмечена территория";
            container.value = "Показать территорию";
        }

        if(type == 'points'){
            container.title = "Вместо очертаний будут значки, рекомендуется для iPad, планшетов и смартфонов";
            container.value = "Показать метки";
        }

        container.style.backgroundColor = 'white';
        container.style.backgroundSize = "30px 30px";
        container.style.width = '200px';
        container.style.height = '30px';

        container.onmouseover = function(){
            container.style.cursor = 'pointer';
        }

        container.onclick = function(){

            if(type == 'polygons'){
                getPolygons();
            }else{
                getPoints();
            }

        }

        return container;
    }
});

function getPoints(){
    if(map){
        map.remove();
    }
    map = L.map('map', {
        center: [37.989650, -0.675068],
        zoom: 14,
        maxZoom: 18
    });

    L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    type = 'polygons';
    map.addControl(new customControl());

    $.get("/lib/getMarker.php", function(data) {

        var markers = null;
        markers = L.markerClusterGroup({
            showCoverageOnHover: false,
            maxClusterRadius: 20
        });

        var myIcon = L.icon({
            iconSize: [25, 25],
            iconUrl: '/images/dom.png',
        });

        for (marker in data) {
            var lat = parseFloat(data[marker].lat);
            var lng = parseFloat(data[marker].lng);

            markers.addLayer(L.marker([lat,lng],{
                icon: myIcon
            }).bindPopup('<a href="'+data[marker].url+'" target="_blank">'+data[marker].tip+data[marker].price+'</a>'));
            map.addLayer(markers);
        };

    }, 'json');

}

function getPolygons(){

    if(map){
        map.remove();
    }
    map = L.map('map', {
        center: [37.989650, -0.675068],
        zoom: 14    });

    L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    type = 'points';
    map.addControl(new customControl());

    $.get("/lib/getMarker.php", function(data) {

        for (marker in data) {

            var points = [];

            if(data[marker].points){
                for (point in data[marker].points) {
                    var lat = parseFloat(data[marker].points[point].lat);
                    var lng = parseFloat(data[marker].points[point].lng);

                    points.push([lat, lng]);
                }
            }

            var customPolygone = L.Polygon.extend({
                options: {
                    url: data[marker].url,
                }
            });

            var polygon = new customPolygone(points, {

                color: '#000000',
                opacity: 0.8,
                weight: 1,
                fillColor: '#00FF00',
                fillOpacity: 0.5

            }).bindTooltip(data[marker].tip+data[marker].price, {direction: 'top'}).addTo(map);

            polygon.on("click", function (event) {
                id=window.open("","_blank");
                id.location.href=this.options.url;
            });

            polygon.on("mouseout", function() {
                this.closeTooltip();
            });

            polygon.on("mouseover", function(event) {
                this.openTooltip();
            });

        };

    }, 'json');
}


    getPoints();