How to return specific Geojson feature property using another property, e.g. return longitude property by name?

Question

I'm trying to create an interface with Mapbox that zooms to the polygon the user clicks on using this function while also updating a dropdown menu value in an non-map div.

When the user clicks on a polygon/town in the map, it will zoom to that correct feature by using this map.on('click...) script.

   map.on('click', 'Map Layer', function (e) {
            townnames = e.features[0].properties.Object_Name;
            townlat = e.features[0].properties.Object_latitude;
            townlong = e.features[0].properties.Object_longitude;
      map.setFilter('LayerFiltered', ['==', 'TOWN_NAME', Object_Name]);
      map.setFilter('LayerClicked', ['!=', 'TOWN_NAME', Object_Name]);
      map.setLayoutProperty('LayerFiltered', 'visibility', 'visible');
      map.flyTo({
      center: [
        townlong, townlat], 
        zoom : 11.5
});

However I'm trying to trigger the same function using the dropdown menu.

I've figured out how to filter the layer using the inner HTML value from options in the dropdown menu, and setting them equal to the "Object_Name" in setFilter. But is there any way to return other properties from the geojson associated with a feature based on one of its properties like "TOWN_NAME"?

In other words can I use a variable from the dropdown menu so instead of returning e.features[0].properties.Object_longitude when a user clicks on a feature, when they click on its associated value in the dropdown menu it will return something to the effect of-"features.TOWN_NAME=DROPDOWN_VALUE_NAME".properties.Object_longitude"?

I apologize if this is unclear.

Twalsh Twalsh · Accepted Answer · 2018-11-26T21:33:57

~~The dropdown does not fire the load event.~~ You have to break the work above into general methods to be called by a handler for the map and for the dropdown.

Edit: The drop down is not being assigned the click event and would need to be given a listener to call a function that is also called by the map objects click listener.

demo

// Add an event listener for the links in the sidebar listing
                listings.addEventListener('change', function () {
                    // Update the currentFeature to the store associated with the clicked link
                    var clickedListing = data.features[listings.selectedIndex];
                    // 1. Fly to the point associated with the clicked link
                    flyToStore(clickedListing);
                    // 2. Close all other popups and display popup for clicked store
                    createPopUp(clickedListing);
                });
        }


// Add an event listener for when a user clicks on the map
        map.on('click', function (e) {
            // Query all the rendered points in the view
            var features = map.queryRenderedFeatures(e.point, { layers: ['locations'] });
            if (features.length) {
                var clickedPoint = features[0];
                // 1. Fly to the point
                flyToStore(clickedPoint);
                // 2. Close all other popups and display popup for clicked store
                createPopUp(clickedPoint);

            // Find the index of the store.features that corresponds to the clickedPoint that fired the event listener
            var selectedFeature = clickedPoint.properties.address;

            for (var i = 0; i < stores.features.length; i++) {
                if (stores.features[i].properties.address === selectedFeature) {
                    selectedFeatureIndex = i;
                }
            }
            // Select the correct list item using the found index
            var listings = document.getElementById('mySelect').selectedIndex = selectedFeatureIndex ;
        }
    });

How to return specific Geojson feature property using another property, e.g. return longitude property by name?

1 Answers