$(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"
          );
        });
    });
});
