1

I'm using Leaflet with realtime-leaflet to show real-time bookmarks, but I need to add the search control on the bookmarks that are real time, I'm using an AJAX request and I doubled the bookmarks on the map. I need you to look for the markers that are already displayed on the map by realtime.

I have tried with the example of: https://labs.easyblog.it/maps/leaflet-search/examples/simple.html

But it is not the same since the example uses static data and does not use realtime-leaflet. I want to insert the search control on the realtime-leaflet. enter image description here

//Init Overlays
        var overlays = {};
        //Init BaseMaps
        var basemaps = {
            "OpenStreetMaps": L.tileLayer(
                "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
                    minZoom: 2,
                    maxZoom: 19,
                    id: "osm.streets"
                }
            ),
            "GoogleMap": L.tileLayer(
                "https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}", {
                    minZoom: 2,
                    maxZoom: 19,
                    id: "google.street"
                }
            ),
            "GoogleSatellite": L.tileLayer(
                "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", {
                    minZoom: 2,
                    maxZoom: 19,
                    id: "google.satellite"
                }
            ),
            "GoogleHybrid": L.tileLayer(
                "https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}", {
                    minZoom: 2,
                    maxZoom: 19,
                    id: "google.hybrid"
                }
            ),
            "EsriMap": L.tileLayer(
                "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
                    minZoom: 2,
                    maxZoom: 19,
                    id: "esri"
                }
            )
        };
        //Map Options
        var mapOptions = {
            zoomControl: false,
            attributionControl: false,
            center: [-29.0529434318608, 152.01910972595218],
            zoom: 13,
            layers: [basemaps.GoogleMap]
        };

        var map = L.map('map', mapOptions); //location for default of the monitor system
        var baseLayers = {
            "Google ": basemaps.GoogleMap,
            "Satelite ": basemaps.GoogleSatellite,
            "Hybrid ": basemaps.GoogleHybrid,
            "OSM": basemaps.OpenStreetMaps,
            "Esri": basemaps.EsriMap
        };
        L.control.layers(baseLayers).addTo(map);

        var iconStyle;
        var shipLayer = L.layerGroup();
        var red = L.icon({
            iconUrl: 'http://real.gpscenter.xyz/V2/dist/static/images/car/gray_22.png',
            iconSize: [30, 30]
        });
        var green = L.icon({
            iconUrl: 'http://real.gpscenter.xyz/V2/dist/static/images/car/gray_22.png',
            iconSize: [30, 30]
        });
        var dkgreen = L.icon({
            iconUrl: 'http://real.gpscenter.xyz/V2/dist/static/images/car/gray_22.png',
            iconSize: [30, 30]
        });
        var yellow = L.icon({
            iconUrl: 'http://real.gpscenter.xyz/V2/dist/static/images/car/gray_22.png',
            iconSize: [30, 30]
        });
        var orange = L.icon({
            iconUrl: 'http://real.gpscenter.xyz/V2/dist/static/images/car/gray_22.png',
            iconSize: [30, 30]
        });

        var realtime = L.realtime({
            url: ruta + '/gps/jsonData',
            crossOrigin: true,
            type: 'json'
        }, {
            interval: 3 * 1000,
            getFeatureId: function(featureData) {
                return featureData.properties.id;
            },
            pointToLayer: function(feature, latlng) {
                return L.marker(latlng, {
                    'icon': L.icon({
                        iconUrl: ruta + '/public/img/cupe.png',
                        iconSize: [40, 40], // size of the icon
                        shadowSize: [50, 64], // size of the shadow
                        iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
                        popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
                    })
                });
            },
            onEachFeature: function(feature, layer) {
                layer.bindPopup(feature.properties.id + '<br />' + feature.properties.name);

            },
            updateFeature: function(feature, oldLayer, newLayer) {
                /*switch(feature.properties.Verspaetung){
                            case "0": marker.setIcon(dkgreen); break;
                            case "1": case "2": case "3": marker.setIcon(green); break;
                            case "4": case "5": case "6": marker.setIcon(yellow); break;
                            case "7": case "8": case "9": marker.setIcon(orange); break;
                            //default: marker.setIcon(red);
                        }*/
                return L.Realtime.prototype.options.updateFeature(feature, oldLayer, newLayer);
            }
        }).addTo(map);

        $.getJSON(ruta + "/gps/jsonData", function(geo) {
            info = geo;

            var featuresLayer = new L.GeoJSON(info, {
                onEachFeature: function(feature, layer) {
                    layer.bindPopup(feature.properties.id + '<br />' + feature.properties.name);

                }
            });
            var searchControl = new L.Control.Search({
                layer: featuresLayer,
                propertyName: 'name',
                marker: false,
                moveToLocation: function(latlng, title, map) {
                    //map.fitBounds( latlng.layer.getBounds() );
                    //var zoom = map.getBoundsZoom(latlng.layer.getBounds());
                    //var zoom = map.getBounds().contains(layer.getLatLng());
                    map.setView(latlng); // access the zoom
                }
            });
            searchControl.on('search:locationfound', function(e) {

                //console.log('search:locationfound', );
                //map.removeLayer(this._markerSearch)
                //e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});
                if (e.layer._popup)
                    e.layer.openPopup();
            }).on('search:collapsed', function(e) {
                featuresLayer.eachLayer(function(layer) { //restore feature color
                    //featuresLayer.resetStyle(layer);
                });
            });
            map.addControl(searchControl); //inizialize search control
        });
  • Cross-posted from stackoverflow.com/questions/57152673/… – IvanSanchez Jul 23 at 7:36
  • Why are you defining dynamic layer twice? Did you try using realtime layer as input layer for L.Control.Search? – TomazicM Jul 23 at 18:27
  • Yes, what I am trying is for realtime to be the default layer and look for the markers within it. – JuanBautista Jul 23 at 18:32
  • @TomazicM Hello, I want you to help me with this, I am stuck with this and your help would be very useful, please. – JuanBautista Jul 24 at 13:48

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.