$(document).ready(function () {
    mapboxgl.accessToken = jQuery('#hdnMapAPI').val();
    var parts=jQuery('.map-container').attr('data-location').split(" ").join("").split(",");
    var parts0=Number(parts[0]);
    var parts1=Number(parts[1]);
    mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js');
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v10',
        center: [parts0, parts1],
        zoom: 12
    });
  
    var geojson = {
        type: 'FeatureCollection',
        features: [{
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [parts0, parts1]
            }
        }, ]
    };
  
    geojson.features.forEach(function (marker) {
        var el = document.createElement('div');
        el.className = 'fa-solid fa-location-dot fa-2x map-marker-color';
        new mapboxgl.Marker(el)
            .setLngLat(marker.geometry.coordinates)
            .addTo(map);
    });
    
    map.scrollZoom.disable();
    map.addControl(new mapboxgl.NavigationControl());
    var el = jQuery('<div>').width(40).height(40).append(function () {
        return jQuery('<span>').addClass('map-marker').append(function () {
            return jQuery('<span>').addClass('fa-solid fa-location-dot fa-2x map-marker-color');
        });
    });
  })