マップボックスの検索、開いているポップアップ/ツールヒント、カスタムマーカー画像の変更

Question

私はカスタムマーカー画像と検索フィールドを持つマップボックスマップを持っています - 検索文字列とマーカーのfeature.propertiesの完全一致があるとき - 地図はマッチしたマーカーの座標にズームイン - このケースでは、私は2つのことを達成するために失敗しました：

1. 開い表示されるマッチしたマーカーのポップアップ/ツールチップ。 および
2. マッチしたマーカーのカスタムイメージを変更するには

ご協力いただきありがとうございます！

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, 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] 
 
     } 
 
    } 
 
    ] 
 
}; 
 

 
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 \t 
 
$('#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

はここに私のソリューションです、にズームのアイコンを変更し、検索にマッチする機能のポップアップが開きます。ここでは

コードですフィールド入力。 myLayerの機能をループして検索文字列と一致するかどうかをテストするには、 .eachLayer()メソッドを使用しました。私も含めた showCity()機能を簡略化しました。理由はわかりませんが、何らかの理由で search()の機能が .openPopup()または .setIcon()にズームすると、 .eachLayer()が .setFilter()の前に来たときにズームされます。お役に立てれば！

/* 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);