In leaflet javascript library i can't get the style value of a layer.
I have looked at the documentation but i can't see any way to do this!
Here how i set the style :
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0,
opacity: 0.9,
});
There is a methode setStyle but not getStyle ... How can i check for those values?
I need this to know the state of a layer to know what to do if the layer is "red" etc ...
Thank you!
layer.options contains those values.
Related
I'm trying to style a map layer for a leafletJS map and have the following code but it doesn't seem to colour at all:
var vectorTileOptions = {
rendererFactory: L.canvas.tile,
vectorTileLayerStyles: {
weight: 2,
color: 'yellow',
},
};
var mapLayer = L.vectorGrid.protobuf("/tiles/admin_countries/{z}/{x}/{y}", vectorTileOptions)
It's just comes renders the standard blue, i'm not sure what i'm doing wrong, any suggestions would be great.
This would do it:
.setStyle({fillColor: '#dd0000', color: '#dd0000', weight: 1, opacity: 0.8, fillOpacity: 0.8});
actually, no I think you need to just adjust what you have there:
vectorTileLayerStyles: {
weight: 2,
fillColor: '#9bc2c4'
},
there is a lot about it here: https://leaflet.github.io/Leaflet.VectorGrid/vectorgrid-api-docs.html#styling-vectorgrids
The answer can be found here, by having a click log e.layer to console you can get the property which is used as the key for the vectorTileOptions and then style as appropriate.
I'm a bit new to leaflet, but I have spend hours without being able to solve this problem: I want to draw a line with arrows using a gpx file as source. This should be in a layer that can be displayed or not usin overlay.
I manage to style either the arrow or the line, but I did not manage to style both. Here is my code:
Can anyone give me advices on how to style the line ?
Many thanks.
var customLayer = L.geoJson(null, {onEachFeature: function (feature, layer) {
L.polylineDecorator(layer, {
patterns: [
{offset: 25, repeat: 15, symbol: L.Symbol.arrowHead({pixelSize: 10, pathOptions: {stroke: false, color: '#000', fillOpacity: 1, weight: 0}})}
]
}).addTo(customLayer); /// Adds each decorator to the map!!!!
}
}
);
var runLayer = omnivore.gpx('./FerneyGex.gpx', null, customLayer);
controlLayers2.addOverlay(runLayer, 'Ferney - Gex');
I'm trying to change the color of the coverage on hover (showCoverageOnHover) in the Leaflet markercluster plugin. I can't find this in the documentation.
What I want to achieve is to change the color of the coverage on hover from blue to something else. For example, when you hover with the mouse over a cluster icon in this example.
OK, using polygonOptions is the right answer, like that:
var markers = L.markerClusterGroup({
polygonOptions: {
fillColor: '#1b2557',
color: '#1b2557',
weight: 0.5,
opacity: 1,
fillOpacity: 0.5
}
});
Quoting from the docs:
polygonOptions: Options to pass when creating the L.Polygon(points,
options) to show the bounds of a cluster. Defaults to empty, which
lets Leaflet use the default Path options.
I am working with this example of US map http://leafletjs.com/examples/choropleth.html.
I am Highlighting the map of a state using a color. But the problem is there are some markers that were clickable before the addition of this highlighting color now becomes non clickable. How can I make the markers clickable even after keeping the map highlighted? Any solution? By the way I am using the following code to highlight the map:
function getColor(d) {
if(d === "Iowa")
return '#800026';
else
return '#ffffff';
}
function style(feature) {
return {
//fillColor: getColor(feature.properties.name),
weight: 4,
opacity: .1,
color: getColor(feature.properties.name),
dashArray: '3',
fillOpacity: 0.3
};
}
L.geoJson(statesData, {style: style}).addTo(map);
It seems you have the fillColor option commented out. If you remove the // before fillColor it should work.
I am trying to set style for related layers in a featureGroup using Leaflet API, here is my code:
var highlightStyle = {
color: '#9b1d41',
weight: 3,
opacity: 0.6,
fillOpacity: 0.65,
fillColor: '#9b1d41'
};
$wnd.mapareas.eachLayer(function(layerOnMap) {
layerOnMap.setStyle(highlightStyle);
console.log(layerOnMap);
});
I could see in the log that layer has new set style , but its not visible on map, like color is not changed.
For GeoJSON layers (which are FeatureGroups) you could do like this
new L.GeoJSON(mp, {
style: highlightStyle
});
For standard FeatureGroup
new L.FeatureGroup([mp1, mp2]).setStyle(highlightStyle);