Leaflet With simplestyle Markers by ThomasG77

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
    <style>
      html, body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #map {
        /* configure the size of the map */
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id='map'></div>
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <script>
      var map = L.map('map').setView([37.9, -77], 10);

      // add the OpenStreetMap tiles
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
      }).addTo(map);

      var gj = {
        type: 'FeatureCollection',
        features: [{
          type: 'Feature',
          geometry: {
            coordinates: [-77, 37.9],
            type: 'Point'
          },
          properties: {
            'marker-color': '#000',
            'marker-symbol': 'star-stroked',
            'marker-size': 'large',
            'title': 'Example Marker',
            'description': 'This is a single marker.'
          }
        }, {
          type: 'Feature',
          geometry: {
            coordinates: [-77.1, 37.8],
            type: 'Point'
          },
          properties: {
            'marker-color': '#f00',
            'marker-symbol': 'star',
            'marker-size': 'small',
            'title': 'Example Marker',
            'description': 'This is a single marker.'
          }
        }]
      };
      // See //github.com/mapbox/simplestyle-spec
      (new L.GeoJSON(gj, {
        pointToLayer: function(f, latlon) {
          var sizes = {
            small: [20, 50],
            medium: [30, 70],
            large: [35, 90]
          };

          var fp = f.properties || {};
          var size = fp['marker-size'] || 'medium';
          var symbol = (fp['marker-symbol']) ? '-' + fp['marker-symbol'] : '';
          var color = fp['marker-color'] || '7e7e7e';
          color = color.replace('#', '');

          var url = '//ws.webgeodatavore.com/v4/marker/' +
            'pin-' +
            // Internet Explorer does not support the `size[0]` syntax.
            size.charAt(0) + symbol + '+' + color +
            ((window.devicePixelRatio === 2) ? '@2x' : '') +
            '.png';

          return new L.Marker(latlon, {
            icon: new L.icon({
              iconUrl: url,
              iconSize: sizes[size],
              iconAnchor: [sizes[size][0] / 2, sizes[size][1] / 2],
              popupAnchor: [sizes[size][0] / 2, 0]
            })
          });
        }
      })).addTo(map);
    </script>
  </body>
</html>