mapboxgl.accessToken = 'pk.eyJ1IjoiYmNhbXBlciIsImEiOiJWUmh3anY0In0.1fgSTNWpQV8-5sBjGbBzGg';

var showAttributes = [
    'name',
    'official_name',
    'opening_hours',
    'website',
    'image'
];

var label = {
    official_name: 'Oficialus pavadinimas'
};

var icons = {
    opening_hours: "glyphicon glyphicon-time",
    website: 'glyphicon glyphicon-globe'
};

var attributeType = {
    name: 'bold',
    website: 'link',
    image: 'image'
};

var map = new mapboxgl.Map({
    container: 'map',
    style: 'styles/map.json',
    zoom: 8,
    minZoom: 8,
    maxZoom: 18,
    center: [24.07, 54.96],
    hash: true
});

map.addControl(new mapboxgl.NavigationControl(), 'top-left');
map.addControl(new mapboxgl.GeolocateControl({
    positionOptions: {
        enableHighAccuracy: true
    },
    trackUserLocation: true
}), 'top-left');

map.on('data', function () {
    if(map.isStyleLoaded()) {
        poiInteractive();
    }
});

$('#layers button').on('click', function(e) {
    if ($(this).hasClass('active')) {
        return false;
    }
    $('#layers button').removeClass('active');
    $(this).addClass('active');
    map.setStyle('styles/' + $(e.target).data('style') + '.json');
});

function poiInteractive()
{
    var poiLayer = map.getLayer('label-amenity');
    if (!poiLayer) {
        map.off('mouseenter', 'label-amenity', addMousePointerCursor);
        map.off('mouseleave', 'label-amenity', removeMousePointerCursor);
        map.off('click', 'label-amenity', poiOnClick);

        return false;
    }

    map.on('mouseenter', 'label-amenity', addMousePointerCursor);
    map.on('mouseleave', 'label-amenity', removeMousePointerCursor);
    map.on('click', 'label-amenity', poiOnClick);
}

function addMousePointerCursor()
{
    map.getCanvas().style.cursor = 'pointer';
}

function removeMousePointerCursor()
{
    map.getCanvas().style.cursor = '';
}

function poiOnClick(e)
{
    var poi = e.features[0];
    var html = getHtml(poi).join('<br />');

    new mapboxgl.Popup()
        .setLngLat(poi.geometry.coordinates)
        .setHTML(html)
        .addTo(map);
}

function getHtml(poi)
{
    return showAttributes
        .filter(function (prop_name) {
            return poi.properties[prop_name];
        })
        .map(function (prop_name) {
            var formatedValue = getFomatedValue(prop_name, poi.properties[prop_name]);

            if (icons[prop_name]) {
                return '<i class="' + icons[prop_name] + '"></i> ' + formatedValue;
            }

            if (label[prop_name]) {
                return '<strong>' + label[prop_name] + ':</strong> ' + formatedValue;
            }

            return formatedValue;
        });
}

function getFomatedValue(attribute, value)
{
    switch (attributeType[attribute]) {
        case 'bold':
            return '<strong>' + value + '</strong>';
        case 'link':
            return '<a href="' + value + '" target="_blank">' + value + '</a>';
        case 'image':
            return '<img src="' + value + '" />';
    }

    return value;
}
@@ -1245,24 +1245,15 @@
 ayer
- = map.getLayer(
+Name = 
 'lab
@@ -1267,36 +1267,11 @@
 ity'
-)
 ;%0A
-    if (!poiLayer) %7B%0A    
+%0A
     
@@ -1288,39 +1288,36 @@
 ouseenter', 
-'label-amenity'
+poiLayerName
 , addMousePo
@@ -1322,36 +1322,32 @@
 PointerCursor);%0A
-    
     map.off('mou
@@ -1352,39 +1352,36 @@
 ouseleave', 
-'label-amenity'
+poiLayerName
 , removeMous
@@ -1397,20 +1397,16 @@
 ursor);%0A
-    
     map.
@@ -1414,39 +1414,36 @@
 ff('click', 
-'label-amenity'
+poiLayerName
 , poiOnClick
@@ -1454,33 +1454,46 @@
     
-    return false;
+if (map.getLayer(poiLayerName)) %7B
 %0A    
-%7D%0A%0A
     
@@ -1513,31 +1513,28 @@
 enter', 
-'label-amenity'
+poiLayerName
 , addMou
@@ -1543,32 +1543,36 @@
 PointerCursor);%0A
+    
     map.on('mous
@@ -1580,31 +1580,28 @@
 leave', 
-'label-amenity'
+poiLayerName
 , remove
@@ -1621,24 +1621,28 @@
 ursor);%0A    
+  
+  
 map.on('clic
@@ -1645,31 +1645,28 @@
 click', 
-'label-amenity'
+poiLayerName
 , poiOnC
@@ -1672,16 +1672,22 @@
 Click);%0A
+    %7D%0A
 %7D%0A%0Afunct
@@ -1940,24 +1940,50 @@
 '%3Cbr /%3E');%0A%0A
+    if(html.length) %7B%0A    
     new mapb
@@ -1995,16 +1995,20 @@
 Popup()%0A
+    
         
@@ -2048,24 +2048,28 @@
 es)%0A        
+   
+ 
 .setHTML(htm
@@ -2079,16 +2079,20 @@
         
+    
 .addTo(m
@@ -2096,16 +2096,22 @@
 o(map);%0A
+    %7D%0A
 %7D%0A%0Afunct

Change map popup