1

i tried leaflet search control. Searching works great, i can see list with my points names, but when I want search it, it does not work, not move to search point. My JSON data are points. ` var data = us_states;

var map = new L.Map('map', {zoom: 5, center: new L.latLng([37.8, 16]) });

map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); //base layer

var featuresLayer = new L.GeoJSON(data, {
        style: function(feature) {
            return {color: feature.properties.color };
        },
        onEachFeature: function(feature, marker) {
            marker.bindPopup('<h4 style="color:'+feature.properties.color+'">'+ feature.properties.OBJECTID +'</h4>');
        }
    });

map.addLayer(featuresLayer);

var searchControl = new L.Control.Search({
    layer: featuresLayer,
    propertyName: 'OBJECTID',
    marker: false,
    moveToLocation: function(latlng, OBJECTID, map) {

        var zoom = map.getBoundsZoom(latlng.layer.getBounds());
        map.setView(latlng, zoom); // access the zoom
    }
});

searchControl.on('search:locationfound', function(e) {

    //console.log('search:locationfound', );

    //map.removeLayer(this._markerSearch)`
1

Maybe this will help. I manually figured out a zoom level that I wanted it to go to and set it in the control, after all it's just a marker. I would do it different if it was a polygon.

    var searchControl = new L.Control.Search({
    layer: bbTeam,                //layer name to search
    propertyName: 'Name',         //Search field
    marker: false,
    moveToLocation: function(latlng, title, map) {
        map.setView(latlng, 7);    // set the zoom
    }
});
  • thanks, but it is still not working. My JSON are points. It looks that searching is ok ibb.co/eFSxfQ, but after enter(click) map is not move, not zoom nothing, i am very Frustrated... I have spant many hours, for this. I is for my school project. – komy Jul 26 '17 at 20:58
  • 1
    moveToLocation: function(latlng, title, map) { console.log(latlng); map.setView(latlng, 14); } }) //This should show your getting lat/long coordinates and from there a setview should work. – Bill Chappell Jul 27 '17 at 12:32
  • great excellent, it is working :) can you give one more advice, it it move to location, but i want mark serach point, circle around marker, or change color, can you help me with it ? – komy Jul 27 '17 at 16:27
0

You need these two code blocks, I have it set if you click on a marker to put a red circle at the base of the marker. And if you click another marker to remove the first circle.

onEachFeature: function (feature, layer) {
    layer.on('click', function (e) {
            // get coordinates from GeoJSON
            var coords = e.target.feature.geometry.coordinates
            //pass coords to function to create marker.
            onMapClick(coords)

//////////////////////////////////          


// click marker
  var clickmark;

  // When you click on a marker, it calls the onMapClick function and passes the layers coordinates.
  // I grab the coords which are X,Y, and I need to flip them to latLng for a marker, 

  function onMapClick(coords) {

        var thecoords = coords.toString().split(',');
        var lat = thecoords[1];
        var lng = thecoords[0];
        //if prior marker exists, remove it.
        if (clickmark != undefined) {
          map.removeLayer(clickmark);
        };

         clickmark = L.circleMarker([lat,lng],{
            radius: 10,
            color: "#red",
            fillColor:  "red",
            fillOpacity: 0.8}
         ).addTo(map);
    }
// end of code for click marker.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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