Mapbox 搜索，打开弹出窗口/工具提示并更改自定义标记图像

Question

I have a mapbox map with custom marker images and a search field - when there is a full match between the search string and the marker's feature.properties - the map is zoomed in to the coordinates of the matched marker - in this case I failed to achieve two things:

1. The popup/tooltip of the matched marker to appear open; and
2. To change the matched marker's custom image.

Thanks in advance for any help!

Here is the code:

 L.mapbox.accessToken = 'pk.eyJ1IjoibmFkaiIsImEiOiJjaW43a2hyOXYwMDJrd29semd6bmZha2JuIn0.nE1hjNjGG2rlxm_oMrysyg'; var map = L.mapbox.map('map', 'mapbox.streets') .setView([38.13455657705411, -94.5703125], 4); var myLayer = L.mapbox.featureLayer().addTo(map); var geojson = { type: 'FeatureCollection', features: [{ type: 'Feature', properties: { id: 1, 'title': 'Washington, DC', "cityName": "washington", "icon": { "iconUrl": "https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png", "iconSize": [50, 50], "iconAnchor": [25, 25], "popupAnchor": [0, -25], "className": "dot" } }, geometry: { type: 'Point', coordinates: [-77.03201, 38.90065] } }, { type: 'Feature', properties: { id: 2, 'title': 'Chicago, M', "cityName": "chicago", "icon": { "iconUrl": "https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png", "iconSize": [50, 50], "iconAnchor": [25, 25], "popupAnchor": [0, -25], "className": "dot" } }, geometry: { type: 'Point', coordinates: [-87.71484375, 41.80407814427234] } }, { type: 'Feature', properties: { id: 3, 'title': 'Dallas, T', "cityName": "dallas", "icon": { "iconUrl": "https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png", "iconSize": [50, 50], "iconAnchor": [25, 25], "popupAnchor": [0, -25], "className": "dot" } }, geometry: { type: 'Point', coordinates: [-96.85546875, 32.80574473290688] } } ] }; var myLayer = L.mapbox.featureLayer().addTo(map); myLayer.on('layeradd', function(e) { var marker = e.layer, feature = marker.feature; marker.setIcon(L.icon(feature.properties.icon)); }); myLayer.setGeoJSON(geojson); // Search by city name $('#searchByName').keyup(cityMapSearch); function cityMapSearch() { var searchString = $('#searchByName').val().toLowerCase(); myLayer.setFilter(showCity); function showCity(feature) { if (feature.properties.cityName == searchString) { map.setView([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], 17); } else { return feature.properties.cityName .toLowerCase() .indexOf(searchString) !== -1; } return true; } }

 #map { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .search-field { position: absolute; right: 0; bottom: 15px; width: 250px; height: 30px; font-size: 12px; text-align: left; padding: 5px; z-index: 100; }

 <link href="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js"></script> <div id='map'></div> <input type="text" id="searchByName" class="search-field" placeholder="Washington, Chicago or Dallas">

And a Fiddle

Answer 1

Here's my solution which will zoom to, change the icon for, and open the popup of a feature that matches search field input. I used the .eachLayer() method to loop through myLayer 's features and test if they matched the search string. I also simplified the showCity() function you included. I'm not sure why, but for some reason the search() function would zoom to but not .openPopup() or .setIcon() when .eachLayer() came before .setFilter() . Hope this helps!

/* Goal: When full match between search string and feature:
1. Open tooltip of matched marker
2. Change the matched marker's custom image
*/

L.mapbox.accessToken = 'your_access_token';

//Create map object, set base tiles and view
var map = L.mapbox.map('map', 'mapbox.streets')
  .setView([38.13455657705411, -94.5703125], 4);

//Create an empty feature layer and add it to the map
var myLayer = L.mapbox.featureLayer().addTo(map);

//Define GeoJSON data
var geojson = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    properties: {
      id: 1,
      'title': 'Washington, D.C.',
      'cityName': 'washington',
      'icon': {
        'iconUrl': 'https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png',
        'iconSize': [50, 50],
        'iconAnchor': [25, 25],
        'popupAnchor': [0, -25],
        'className': 'dot'
      }
    },
    geometry: {
      type: 'Point',
      coordinates: [-77.03201, 38.90065]
    }
  },

    {
      type: 'Feature',
      properties: {
        id: 2,
        'title': 'Chicago, M',
        'cityName': 'chicago',
        'icon': {
          'iconUrl': 'https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png',
          'iconSize': [50, 50],
          'iconAnchor': [25, 25],
          'popupAnchor': [0, -25],
          'className': 'dot'
        }
      },
      geometry: {
        type: 'Point',
        coordinates: [-87.71484375, 41.80407814427234]
      }
    },

    {
      type: 'Feature',
      properties: {
        id: 3,
        'title': 'Dallas, T',
        'cityName': 'dallas',
        'icon': {
          'iconUrl': 'https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png',
          'iconSize': [50, 50],
          'iconAnchor': [25, 25],
          'popupAnchor': [0, -25],
          'className': 'dot'
        }
      },
      geometry: {
        type: 'Point',
        coordinates: [-96.85546875, 32.80574473290688]
      }
    }
  ]
};

//Set layer icons, create custom tooltips, populate myLayer with geojson data
myLayer.on('layeradd', function(e) {
  var marker = e.layer,
    feature = marker.feature;
  marker.setIcon(L.icon(feature.properties.icon));
  var content = '<h2>' + feature.properties.title + '</h2><p>' + feature.properties.cityName + '</p>';
  marker.bindPopup(content);
});
myLayer.setGeoJSON(geojson);

// Compare the 'cityName' property of each marker to the search string, seeing whether the former contains the latter.
function search() {
  //Get the value of the search input field
  var searchString = $('#search').val().toLowerCase();

  //Set filter needs to be declared first
  myLayer.setFilter(function(feature){
    //Return features whose city name contains the search string
    return feature.properties.cityName
      .toLowerCase()
      .indexOf(searchString) !== -1;
  });

  //Loop through each layer
  myLayer.eachLayer(function(marker) {
    //If user search input matches the feature's city name
    if (marker.feature.properties.cityName === searchString) {
      //Update icon url
      marker.setIcon(L.icon({iconUrl: 'https://www.mapbox.com/jobs/img/astro3.svg'}));
      //Zoom in and center on matching feature
      map.setView([marker.feature.geometry.coordinates[1], marker.feature.geometry.coordinates[0]], 17);
      //Open feature popup
      marker.openPopup();
    }
  });
}

//Event listener for user keyup within search field
$('#search').keyup(search);