MBGL events & feature props

map.js

mbMap.on('click', 'prioritization-projects-update', function (e) {

  var tmpl = $.templates("#project-popup");

  var projectDetails = tmpl.render({
    projID: e.features[0].properties.Join_ID,
    name: e.features[0].properties.Street,
    location: e.features[0].properties.Location,
    pdesc1: e.features[0].properties.Primary_De,
    sdesc1: e.features[0].properties.Secondary_,
    source1: e.features[0].properties.Project_So,
    pdesc2: e.features[0].properties.Primary__1,
    sdesc2: e.features[0].properties.Secondary1,
    source2: e.features[0].properties.Project__1,
    pdesc3: e.features[0].properties.Primary__2,
    sdesc3: e.features[0].properties.Secondar_1,
    source3: e.features[0].properties.Project__2,
    type: e.features[0].properties.Project_Ty,
    destinations: e.features[0].properties.Destinatio,
    newDestinations: e.features[0].properties.New_destin,
    priority: e.features[0].properties.Priority_T,
    stops: e.features[0].properties.Stop_Serve,
    walkshed: e.features[0].properties.Walkshed_e ? (e.features[0].properties.Walkshed_e * 100).toFixed(2) + '%' : ''
  });

  new mapboxgl.Popup()
    .setLngLat(e.lngLat)
    .setHTML(projectDetails)
    .addTo(mbMap);

  if (e.features.length > 0) {
    mbMap.setFilter('prioritization-projects-update-highlight', ['==', 'Join_ID', e.features[0].properties.Join_ID]);
  }

});