title: Running function on Mapbox click marker // Displaying SVGs in position relative to Mapbox coordinates
body: <p>I'm creating an interactive website prototype for a travel-booking site, using mapbox for the first time. I've done a lot of searching through the mapbox site and elsewhere but there's here's a couple things I just can't figure out:</p>
  
  <p><strong>First problem</strong>: when a marker on the map is clicked, a js function should be run to reveal the pane on the right </p>
  
  <p><img src="https://i.stack.imgur.com/YbCru.png" alt="fig 1"></p>
  
  <p>I already have this code from mapbox that opens an individual popup on each marker on click (I'll remove these popups later):</p>
  
  <pre><code>    // When a click event occurs near a place, open a popup at the location of
      // the feature, with description HTML from its properties.
      map.on('click', function (e) {
      var features = map.queryRenderedFeatures(e.point, { layers: ['places'] });
  
      if (!features.length) {
          return;
      }
  
      var feature = features[0];
  
      // Populate the popup and set its coordinates
      // based on the feature found.
      var popup = new mapboxgl.Popup()
          .setLngLat(feature.geometry.coordinates)
          .setHTML(feature.properties.description)
          .addTo(map);
      });
  </code></pre>
  
  <p>Based on how the clicking is handled in that example, I was hoping something along the line of this would work:</p>
  
  <pre><code>    feature.on('click', function (e) {
          **Insert code to display the pane here**
      });
  </code></pre>
  
  <p>But that does not work. It's harder to figure these things out when you're using an api you're not familiar with. So I need to know how I would do that.</p>
  
  <p><strong>The second problem</strong>: When the user clicks to look at popular trips through the city, a js function will run run to show svgs over the map (from an Illustrator mockup) </p>
  
  <p><img src="https://i.stack.imgur.com/mStW9.png" alt="fig 2"></p>
  
  <p>The issue here is that I need the svg to display at certain coordinates of the map, not just a position in the screen. This, I have no idea where to start.</p>
  
  <p>Any help is appreciated, thanks !</p>