'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 © Esri — 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: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors & ODbL, © <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 |
|---|
