$( document ).ready(function() {
    
    //mapbox
    mapboxgl.accessToken = 'pk.eyJ1IjoiY2FqdSIsImEiOiJjamlscHJoZ3QwMGcxM2xvOXBhMnB0djd2In0.HSBAfA-67HLBDgd9VAOiiQ';
    var geojson = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "properties": {
                    "iconSize": [40, 57]
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        -34.8966590,
                        -7.8531530
                    ]
                }
            }
        ]
    };
    
    var map = new mapboxgl.Map({
        
        container: 'map',
        style: 'mapbox://styles/mapbox/dark-v9',
        center: [-34.8966590, -7.8531530],
        zoom: 13
    });
    // add markers to map
    geojson.features.forEach(function(marker) {
        // create a DOM element for the marker
        var el = document.createElement('div');
        el.className = 'marker';
        el.style.backgroundImage = 'url('+baseUrlImg+'/layout/marker.png)';
        el.style.width = marker.properties.iconSize[0] + 'px';
        el.style.height = marker.properties.iconSize[1] + 'px';
        
        // add marker to map
        new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .addTo(map);
    });
    
});
