'leaflet geojson color on Downtime

I have this old code where I unfortunately no longer get on.

    <script>

    // initialize the map on the "map" div with a given center and zoom
    var map = L.map('map', {
        center: {lon: 11.411919, lat: 46.886993},
        zoom: 5
    });
    // MAP info https://leaflet-extras.github.io/leaflet-providers/preview/
    // add OpenStreetMap France
    L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services'+ '/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
    }).addTo(map);
    // test google Overlay
    L.tileLayer('https://{s}.google.com/vt/lyrs=m,h&x={x}&y={y}&z={z}',{
    subdomains:['mt0','mt1','mt2','mt3']
    }).addTo(map);
    // add OpenStreetMap Pists
    L.tileLayer('https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png', {
    attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors & ODbL, &copy; <a href="https://www.opensnowmap.org/iframes/data.html">www.opensnowmap.org</a> <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
    }).addTo(map);

    // show the scale bar on the lower left corner
    L.control.scale().addTo(map);

    // show a marker on the map
    //L.marker({lon: "13.514725816667", lat: "47.436573106667"}).bindPopup('test<br>Last update:<br>lat: "13.514725816667"<br>lon: "47.436573106667"').addTo(map);
    //marker = new <?php echo $Marker; ?>
    

    var stations = {
      "type": "FeatureCollection",
      "features": [
        <?php echo $Points; ?>
      ]
    };

    var myGeoJsonLayer = L.geoJson(stations, {
      onEachFeature: function (feature, layer) {
        layer.addEventListener("click", () => {
          layer.bindPopup("<b>" + feature.properties.STATION + "</b></br> Last Update: " + feature.properties.LASTUPDATE + "</br><a href=https://maps.google.com/?q=" + feature.properties.MAP + " target=_blank>Maps</a>");
        });
      }
    }).addTo(map);

    /// Patch Leaflet-search plugin.

    L.Control.Search.mergeOptions({
        minLength: 0
    });

    L.Control.Search.include({

      _handleKeypress: function(e) {

        switch (e.keyCode) {
          case 27: //Esc
            this.collapse();
            break;
          case 13: //Enter
            if (this._countertips == 1)
              this._handleArrowSelect(1);
            this._handleSubmit(); //do search
            break;
          case 38: //Up
            this._handleArrowSelect(-1);
            break;
          case 40: //Down
            this._handleArrowSelect(1);
            break;
          case 37: //Left
          case 39: //Right
          case 16: //Shift
          case 17: //Ctrl
            //case 32://Space
            break;
          case 8: //backspace
          case 46: //delete
            this._autoTypeTmp = false;
            if (this._collapsing) { 
                break;
            }
          default:

            this._doSearch();
        }
      },

      _doSearch: function() {
        if (this._input.value.length)
          this._cancel.style.display = 'block';
        else
          this._cancel.style.display = 'none';

        if (this._input.value.length >= this.options.minLength) {
          var that = this;

          clearTimeout(this.timerKeypress);
          this.timerKeypress = setTimeout(function() {

            that._fillRecordsCache();

          }, this.options.delayType);
        } else
          this._hideTooltip();
      },
      
      expand: function(toggle) {
            toggle = typeof toggle === 'boolean' ? toggle : true;
            this._input.style.display = 'block';
            L.DomUtil.addClass(this._container, 'search-exp');
            if ( toggle !== false ) {
                this._input.focus();
                this._map.on('dragstart click', this.collapse, this);
            }
            this.fire('search_expanded');
        this._doSearch();
            return this;    
        },
      
      collapse: function() {
            this._hideTooltip();
        this._collapsing = true;
            this.cancel();
        this._collapsing = false; 
            this._alert.style.display = 'none';
            this._input.blur();
            if(this.options.collapsed)
            {
                this._input.style.display = 'none';
                this._cancel.style.display = 'none';            
                L.DomUtil.removeClass(this._container, 'search-exp');       
                if (this.options.hideMarkerOnCollapse) {
                    this._markerLoc.hide();
                }
                this._map.off('dragstart click', this.collapse, this);
            }
            this.fire('search_collapsed');
            return this;
        }

    });

    var mySearchControl = new L.Control.Search({
      layer: myGeoJsonLayer,
      propertyName: "STATION"
    });

    map.addControl(mySearchControl);

    </script>

I have in the "feature.properties.LASTUPDATE" the timestamp of the last update. If the timestamp is older than 6h I would like to color the marker in the color orange at the place of the default blue. Unfortunately I do not manage this even after week by week search with google.

Furthermore, I have as an open point that I would like to be zoomed as soon as a station is searched to this instead of only the red circle is displayed. is there a solution to this?

Thank you and sorry, I'm a Javascript and HTML Beginner :-)



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source