title: Style popups in Mapbox (table and image)
body: <p>I want to style my popups in Mapbox a certain way (see Example) but I'm not really sure how to go from a simple header and text, to image and table, etc. I've tried to put my html-code under .setHTML but that doesn't seem like the way to do it. If anyone could provide me some guidance on the best way to do this I'd really appreciate it. </p>
  
  <p>I'm no coding expert so I might need some in-dept explanation. Thanks in advance.</p>
  
  <p><a href="https://i.stack.imgur.com/eZgQ1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eZgQ1.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset='utf-8' /&gt;
      &lt;title&gt;Points on a map&lt;/title&gt;
      &lt;meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /&gt;
      &lt;script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.js'&gt;&lt;/script&gt;
      &lt;link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css' rel='stylesheet' /&gt;
      &lt;style&gt;
        body {
          margin: 0;
          padding: 0;
        }
  
        #map {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id='map'&gt;&lt;/div&gt;
      &lt;script&gt;
      mapboxgl.accessToken = 'token'; // replace this with your access token
      var map = new mapboxgl.Map({
        container: 'map',
        style: 'style-url' // replace this with your style URL
      });
      map.on('click', function(e) {
    var features = map.queryRenderedFeatures(e.point, {
      layers: ['visitors'] // replace this with the name of the layer
    });
  
    if (!features.length) {
      return;
    }
  
    var feature = features[0];
  
    var popup = new mapboxgl.Popup({ offset: [0, -15] })
      .setLngLat(feature.geometry.coordinates)
      .setHTML('&lt;h3&gt;' + feature.properties.title + '&lt;/h3&gt;&lt;p&gt;' + feature.properties.visitors + '&lt;/p&gt;')
      .setLngLat(feature.geometry.coordinates)
      .addTo(map);
  });
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>