javascript - Running function on Mapbox click marker // Displaying SVGs in position relative to Mapbox coordinates -

i'm creating interactive website prototype travel-booking site, using mapbox first time. i've done lot of searching through mapbox site , elsewhere there's here's couple things can't figure out:

first problem: when marker on map clicked, js function should run reveal pane on right

i have code mapbox opens individual popup on each marker on click (i'll remove these popups later):

    // when click event occurs near place, open popup @ location of     // feature, description html properties.     map.on('click', function (e) {     var features = map.queryrenderedfeatures(e.point, { layers: ['places'] });      if (!features.length) {         return;     }      var feature = features[0];      // populate popup , set coordinates     // based on feature found.     var popup = new mapboxgl.popup()         .setlnglat(feature.geometry.coordinates)         .sethtml(feature.properties.description)         .addto(map);     }); 

based on how clicking handled in example, hoping along line of work:

    feature.on('click', function (e) {         **insert code display pane here**     }); 

but not work. it's harder figure these things out when you're using api you're not familiar with. need know how that.

the second problem: when user clicks @ popular trips through city, js function run run show svgs on map (from illustrator mockup)

the issue here need svg display @ coordinates of map, not position in screen. this, have no idea start.

any appreciated, !

i didn't understand "first problem", second problem, can add image @ given lat/lon using marker. see this example.

var el = document.createelement('div');     el.classname = 'marker';     el.style.backgroundimage = 'url(https://placekitten.com/g/' + marker.properties.iconsize.join('/') + '/)';     el.style.width = marker.properties.iconsize[0] + 'px';     el.style.height = marker.properties.iconsize[1] + 'px';      el.addeventlistener('click', function() {         window.alert(marker.properties.message);     });      // add marker map     new mapboxgl.marker(el, {offset: [-marker.properties.iconsize[0] / 2, -marker.properties.iconsize[1] / 2]})         .setlnglat(marker.geometry.coordinates)         .addto(map); 

edit

i see comment want image remain @ same scale map, when zooms in , out. want image source, not marker.

https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/

 "overlay": {             "type": "image",             "url": "https://www.mapbox.com/mapbox-gl-js/assets/radar.gif",             "coordinates": [                 [-80.425, 46.437],                 [-71.516, 46.437],                 [-71.516, 37.936],                 [-80.425, 37.936]             ]         } 

it doesn't support svg, however.