0

I have been playing with different Leaflet plugins. One I am especially interested in is the Leaflet search plugin (https://github.com/stefanocudini/leaflet-search). I have been able to implement it but here is my main issue, and I think I am having that issue because I am not understanding some fundamental things in Leaflet.

Here is a simple example I found online to get me started:

var url = 'BaseBallFinal.json';  

var map = L.map('map').setView([39.0, -98.26], 4); 

var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{ 
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
osm.addTo(map);

function forEachFeature(feature, layer) {
    
    var popupContent = "<p><b>League: </b>"+ feature.properties.League+
        "</br>Team: "+ feature.properties.Team +
        "</br>Name: "+ feature.properties.Name +
        "</br>Stadium: "+ feature.properties.Stadium +
        "</br>Capacity: "+ feature.properties.Capacity.toLocaleString() +'</p>';

    layer.bindPopup(popupContent);
}
    
var bbTeam = L.geoJSON(null, { onEachFeature:forEachFeature});

$.getJSON(url, function(data) {
    bbTeam.addData(data);
});

bbTeam.addTo(map);

    var searchControl = new L.Control.Search({
    layer: bbTeam,
    propertyName: 'Name',
    marker: false,
    moveToLocation: function(latlng) {
        console.log(latlng +" Coordinates");
        map.setView(latlng, 12); // set the zoom
    }
});

map.addControl( searchControl );    

var baseMaps = {
    "Open Street Map": osm
};

var overlayMaps = {"Baseball Team":bbTeam}; 

L.control.layers(baseMaps, overlayMaps).addTo(map);

The search works well (https://www.gistechsolutions.com/leaflet/DEMO/baseball/Baseball2.html), but all the markers are visible when the page is loaded. I'm trying to load the map without any visible markers. The search will then show the selected marker. The searched marker would stay visible until a new search is done and a new marker selected. It is not implemented in the example I sent, but the search bar could have a close button that would remove the last searched marker from the map. Also, when a search result is selected, the map should center on that result, show the marker, and potentially open a popup containing info about the marker.

0

1 Answer 1

0

One possible way to achieve this would be:

  • initially set markers icon to some hidden icon;
  • when feature is found, set it's icon to normal icon, zoom to marker and display popup;
  • when searched item is deleted in search box by clicking on X, set displayed marker icon again to hidden icon and close popup.

Relevant part of the code could then look something like this:
CSS

.hidden {
  display: none;
}

JS

var icon = new L.Icon.Default();
var hiddenIcon = new L.Icon.Default({className: 'hidden'});

function forEachFeature(feature, layer) {
  var popupContent = "<p><b>League: </b>"+ feature.properties.League+
    "</br>Team: "+ feature.properties.Team +
    "</br>Name: "+ feature.properties.Name +
    "</br>Stadium: "+ feature.properties.Stadium +
    "</br>Capacity: "+ feature.properties.Capacity.toLocaleString() +'</p>';
  layer.bindPopup(popupContent);
  layer.setIcon(hiddenIcon);
}
    
var bbTeam = L.geoJSON(null, {
  onEachFeature: forEachFeature
});

$.getJSON(url, function(data) {
  bbTeam.addData(data);
});

bbTeam.addTo(map);

var searchControl = new L.Control.Search({
  layer: bbTeam,
  propertyName: 'Name',
  marker: false,
  moveToLocation: function(latlng, title, map) {
    map.setView(latlng, 12); // set the zoom
  }
});

var selectedMarker = null;

function hideSelectedMarker() {
  if (!selectedMarker) return;

  selectedMarker.closePopup();
  selectedMarker.setIcon(hiddenIcon);
  selectedMarker = null;
}

searchControl.on('search:locationfound', function(evt) {
  hideSelectedMarker();
  var marker = evt.layer;
  marker.setIcon(icon);
  marker.openPopup();
  selectedMarker = marker;
});
searchControl.on('search:cancel', function() {
  hideSelectedMarker();
});

map.addControl(searchControl);    
3
  • Thank you! I think I can make that work. I will test it. How would you proceed if the json file contained points but also polygons (like building shapes). Could the polygons be highlighted and the popup still show up?
    – Bfox
    Nov 6, 2023 at 21:39
  • Yes, polygons can be highlighted and the popup still show up.
    – TomazicM
    Nov 6, 2023 at 21:52
  • If answer helped you solve you problem, it's customary on GIS SE site to mark it as accepted, to let others with similar problems know that problem was resolved.
    – TomazicM
    Nov 9, 2023 at 8:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.