$(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/streets-v10",
      center: [35.5018, 33.8938],
      zoom: 8,
    });
  
    var geojson = {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [35.49625058061963, 33.89566282297383],
          },
        },
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [35.48328172001909, 33.88400456787358],
          },
        },
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [35.50068824706264, 33.90090557291979],
          },
        },
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [35.37893770592403, 33.568932727348646],
          },
        },
      ],
    };
  
    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"
            );
          });
      });
  });