$(document).ready(function () {
    mapboxgl.accessToken = jQuery("#hdnMapAPI").val();
    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/light-v11",
      center: [35.5018, 33.8938],
      zoom: 8,
    });
  
    var geojson = {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [35.83687619442027, 34.43500278376713],
          },
        },
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [35.53120370003445, 33.782602398124006],
          },
        },
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [35.48920859515097, 33.89429941390846],
          },
        },
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [35.36404938280406, 33.517363688124725],
          },
        },
      ],
    };
  
    geojson.features.forEach(function (marker) {
      var el = document.createElement("div");
      el.className = "fa fa-map-marker 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 fa-map-marker fa-x map-marker-color"
            );
          });
      });
  });