0

How do I notify the search control about the layers that are added to the map?

This is my web viewer:

enter image description here

Actually, i can search only one layer, cannot search in the layers added from leaflet control layers. This is my code.

function loadWFSLayerWithAjax(workspace, capa, name, marker) {
    var ajax = $.ajax({
        url: URLLayer(workspace, capa),
        dataType: 'json',
        jsonpCallback: 'getJson',
        success: function (data) {
            WFSLayer = L.geoJson(data, {
                pointToLayer: function (feature, latlng) {
                    popupOptions = {maxWidth: 200};
                    return  L.marker(latlng, {icon: marker}).on("click", function (e) {
                        //fijar contenido al div del titulo
                        document.getElementById("t1").innerHTML = name + " " + feature.properties.nam;
                        //fijar contenido al parrafo 1
                        document.getElementById("p1").innerHTML = " ";
                        //fijar contenido al parrafo 2
                        document.getElementById("p2").innerHTML = " ";
                        //fijar contenido al div del video
                        document.getElementById("vid").innerHTML = " ";
                        nombre = feature.properties.nam;
                        //  sidebar.setContent("<h4>" + "<strong>" + name + " " + feature.properties.nam + "</strong>" + "</h4>");
                        sidebar.show();
                    });
                },
                style: {fillColor: 'FFFFFF', fillOpacity: 0, weight: 2},
                //muestra el popup al hacer clic en el marcador
//                onEachFeature: function (feature, layer) {
//                   
//                    popupOptions = {maxWidth: 200};
//                    layer.bindPopup("<h5>" + "<strong>" + name + " " + feature.properties.nam + "</strong>"//+"</h5><hr>"+"<strong>"+tatr1+" </strong>"+ feature.properties.msl+"<br/>"
//                            /* +"<strong>Estado: </strong>"+ feature.properties.efu+"<br/>"+"<strong>Latitud: </strong>"+ feature.properties.latitud+"<br/>"+"<strong>Longitud: </strong>"+ feature.properties.longitud*/, popupOptions);
//                }
                //   "<span style='color: blue'>" "</span> "
                // WFSLayer.addData(data);

            }); //.addTo(mapa);
            markers.addLayer(WFSLayer);
            selectorCapas.addOverlay(markers, name);

            markers = new L.markerClusterGroup();
        }
    });
    return ajax;
}

loadWFSLayerWithAjax('gadpo', 'sitio_turistico', 'Sitio Turístico', iconLayer('fa-cloud', 'violet', 'white', 'square'));
loadWFSLayerWithAjax('gadpo', 'clima_estacion', 'Estación Meteorológica', iconLayer('fa-cloud', 'green', 'white', 'star'));
//loadWFSLayerWithAjax('gadpo', 'puntos_monitoreo', 'Monitoreo de Calidad de Agua', iconLayer('fa-tint', 'yellow', 'white', 'square'));
//loadWFSLayerWithAjax('gadpo', 'poblado', 'Poblado', iconLayer('fa-male', 'purple', 'white', 'square'));
//console.log(WFSLayer);

var capasBase = {
    "Bing": bing,
    "Satelite": satelite,
    "OpenStreetMap": capaOSM,
    "Streets": streets,
    "Thunderforest": thunderforest
};
var overlayMaps = {
    "Límite Provincial": provincia,
    "Límite Cantonal": canton,
    "Límite Parroquial": parroquia,
    // "Estación Meteorológica": WFSLayer,
};
//L.control.layers({},{"Estación Meteorológica":ajax}).addTo(mapa);

var selectorCapas = new L.control.layers(capasBase, overlayMaps, {collapsed: true});
selectorCapas.addTo(mapa);
L.control.mousePosition().addTo(mapa);
L.control.scale({
    imperial: false
}).addTo(mapa);
//fija la capa por defecto en el Control de capas
bing.addTo(mapa);
var sidebar = L.control.sidebar('sidebar', {
    closeButton: true,
    position: 'left'
});
mapa.addControl(sidebar);
setTimeout(function () {
    sidebar.show();
}, 500);
//var marker = L.marker([-0.80, -76.45]).addTo(mapa).on('click', function () {
//    sidebar.toggle();
//});
//oculta la sidebar al hacer clic en el mapa
//mapa.on('click', function () {
//    sidebar.hide();
//})

sidebar.on('show', function () {
    console.log('Sidebar will be visible.');
});

sidebar.on('shown', function () {
    console.log('Sidebar is visible.');
});
//oculta sidebar al hacer clic en el marcador
//sidebar.on('hide', function () {
//  console.log('Sidebar will be hidden.');
//});
//oculta sidebar al hacer clic en el marcador
//sidebar.on('hidden', function () {
//    console.log('Sidebar is hidden.');
//});
//captura el evento de hacer clic en el boton cerrar de sidebar
L.DomEvent.on(sidebar.getCloseButton(), 'click', function () {
    console.log('Close button clicked.');
});
//aniade ventana emergente al iniciar el visor

//var poiLayers = L.layerGroup([
//    WFSLayer
//]);
var capasGroup = new L.LayerGroup().addLayer(markers);
function buscar(capa) {
    var searchControl = new L.Control.Search({ 
        //   container:'',
        layer: capa, //markers es un cluster group
        initial: false,
        propertyName: 'nam',
        circleLocation: true,
        textCancel: 'Cancelar',
        textErr: 'Objeto no encontrado',
        textPlaceholder: 'Buscar',
        minLength: 1,
        zoom: 15, //zoom al lugar buscado
        textPlaceholder: 'Digite el nombre del Proyecto',
        buildTip: function () {
            // var type = layer.feature.properties.nam;
            return '<a href="#" class="' + nombre + '">' + '</b></a>';
        }
//    moveToLocation: function (latlng, title, map) {
//        var zoom = map.getBoundsZoom(latlng.layer.getBounds());
//        map.setView(latlng, zoom); // access the zoom
//    }
    });
    return searchControl;
}
//define el estilo del resultado para casos en que las capas no son puntos
//searchControl.on('search:locationfound', function (e) {
//    e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});
//    if(e.layer._popup)e.layer.openPopup();
//    console.log("search event");
//}).on('search:collapsed', function (e) {
//    markers.eachLayer(function (layer) {
//        markers.resetStyle(layer);
//    });
//});

mapa.addControl(buscar(capasGroup));
  • Please add also your code, relevant to the quastion, otherwise answering is just guessing. – TomazicM Aug 20 at 15:21
  • There is a piece of code that makes no sense as it is presented now. First there are statements markers.addLayer(WFSLayer); and selectorCapas.addOverlay(markers, name), but markers is not defined before. Then follows statement markers = new L.markerClusterGroup(); which creates markers. Do you get any error in console? – TomazicM Aug 20 at 16:16
  • the markers is defined previous this code is a L.markersClusterGroup – Javier Aguilar Aug 20 at 16:30
  • Sorry, but code as it is makes no sense. – TomazicM Aug 20 at 16:36

Your Answer

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

Browse other questions tagged or ask your own question.