anchor.diff:  </head>
   <body>
   
  +<style>
  +
  +#marker {
  +    background-image: url('https://www.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg');
  +    background-size: cover;
  +    width: 50px;
  +    height: 50px;
  +    border-radius: 50%;
  +    cursor: pointer;
  +}
  +
  +.mapboxgl-popup {
  +    max-width: 200px;
  +}
  +
  +</style>
   
   <!-- <div id="map-placeholder"> -->
     <script>
  
positive.code: 
  
  map.on('click', function(event) {
    var el = document.createElement('div');
    var marker = new mapboxgl.Marker(el)
    .setLngLat(event.lngLat)
  
negative.code:   map.addSource('pins', {
     type: 'geojson',
     data: {
       "type": "FeatureCollection",
         "features": pinFeatures
      }
    });
  