title: How to change marker Image in Mapbox?
body: <p>I am new to mapbox. I am getting trouble in marker image change in mapbox map.
  I got the code from <a href="https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/" rel="nofollow noreferrer">https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/</a>  I can't change  the marker image.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>var geojson = {
  "type": "FeatureCollection",
  "features": [
      {
          "type": "Feature",
          "properties": {
              "message": "IN",
              "iconSize": [30, 30]
          },
          "geometry": {
              "type": "Point",
              "coordinates":&lt;?php echo $in; ?&gt;
          }
      },
      {
          "type": "Feature",
          "properties": {
              "message": "Check IN",
              "iconSize": [30, 30]
          },
          "geometry": {
              "type": "Point",
              "coordinates":&lt;?php echo $c; ?&gt;
          }
      },
      {
          "type": "Feature",
          "properties": {
              "message": "OUT",
              "iconSize": [30, 30]
          },
          "geometry": {
              "type": "Point",
              "coordinates":&lt;?php echo $o; ?&gt;
          }
      }
      ]
  };
  
  geojson.features.forEach(function(marker) {
  
      var el = document.createElement('div');
      el.className = 'marker';
      el.style.backgroundImage = 'url(images/check_in.jpg)';
      el.style.width = marker.properties.iconSize[0] + 'px';
      el.style.height = marker.properties.iconSize[1] + 'px';
  
      el.addEventListener('click', function() {
          window.alert(marker.properties.message);
      });
  
      new mapboxgl.Marker(el, {offset: [-marker.properties.iconSize[0] / 2, -marker.properties.iconSize[1] / 2]})
          .setLngLat(marker.geometry.coordinates)
          .addTo(map);
  });
  </code></pre>