title: MapBox GL pure CSS markers with numbers
body: <p>Based on the <a href="https://docs.mapbox.com/help/tutorials/custom-markers-gl-js/" rel="noreferrer">mapbox example</a> of how to add markers</p>
  
  <p>I would like to make a teardrop marker that is pure css, not an image. I would also like to number the markers from a for loop index. Is it possible to create tear drop markers? Can anyone help with this? I can't seem to find a good example from mapbox.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset='utf-8' /&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt;
      &lt;script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'&gt;&lt;/script&gt;
      &lt;link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' /&gt;
      &lt;style&gt;
          body { margin:0; padding:0; }
          #map { position:absolute; top:0; bottom:0; width:100%; }
          .marker {
              background-image: url('mapbox-icon.png');
              background-size: cover;
              width: 50px;
              height: 50px;
              border-radius: 50%;
              cursor: pointer;
          }
          .mapboxgl-popup {
              max-width: 200px;
          }
          .mapboxgl-popup-content {
              text-align: center;
              font-family: 'Open Sans', sans-serif;
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id='map'&gt;&lt;/div&gt;
  
  &lt;script&gt;
  
  mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2lqbmpqazdlMDBsdnRva284cWd3bm11byJ9.V6Hg2oYJwMAxeoR9GEzkAA';
  
  var geojson = {
      "type": "FeatureCollection",
      "features": [{
           "type": "Feature",
           "geometry": {
               "type": "Point",
               "coordinates": [-77.032, 38.913]
           },
           "properties": {
               "title": "Mapbox",
               "description": "Washington, D.C."
           }
       },
       {
           "type": "Feature",
           "geometry": {
           "type": "Point",
           "coordinates": [-122.414, 37.776]
          },
           "properties": {
               "title": "Mapbox",
               "description": "San Francisco, California"
           }
       }]
  };
  
  var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v9',
      center: [-96, 37.8],
      zoom: 3
  });
  
  // add markers to map
  geojson.features.forEach(function(marker) {
  
      // create a HTML element for each feature
      var el = document.createElement('div');
      el.className = 'marker';
  
      // make a marker for each feature and add it to the map
      new mapboxgl.Marker(el)
          .setLngLat(marker.geometry.coordinates)
          .setPopup(new mapboxgl.Popup({offset: 25}) // add popups
              .setHTML('&lt;h3&gt;' + marker.properties.title + '&lt;/h3&gt;&lt;p&gt;' + marker.properties.description + '&lt;/p&gt;'))
          .addTo(map);
  });
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>