I'm trying to create some Famo.us items and having problems with the approach and wondered if anyone can help.
I am trying to create a View, within which is a Surface. I would like the background of that Surface to be transparent, but I want the Text to be fully visible.
I can solve this with 2 Surfaces on top of each other but that sounds silly, so wondered if anyone can help. My code is:
var infobarContent = new Surface({
size: [true, true],
properties: {
cursor: 'pointer',
borderRadius: '5px',
padding: '10px',
backgroundColor: 'rgb(71,3,101)',
color: 'white',
textAlign: 'center'
}
});
var infobarContentModifier = new StateModifier({ /*opacity: 0.4,*/ align: [0.05, 0.1], origin: [0.05, 0.8] });
I did try adding a Class to the Surface, but it seems to ignore any background opacity. I also tried to use "rgb(71,3,101, 0.4)" in the Properties of the Surface - as would work in normal websites - but this does not work either.
Any help would be brilliant :)
Thanks, and hope you are enjoying your Weeekend.
:)
The problem is your BackgroundColor rgb(71,3,101, 0.4)
The correct CSS value is rgba(71,3,101, 0.4)
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 have a Vue application using Leaflet as a map library. On the map, I've added a toolbar using Leaflet Draw and a button with Leaflet EasyButton. I give an image in order to illustrate below:
Development
The problem has started to appear when I created a build version of my Vue application to save on my server. The Leaflet Draw icons do not appear anymore. Just the Leaflet EasyButton icon is showing.
Production
My code is as follows:
this.llmap = L.map('map-id', {...})
let vectorLayerDraw = L.featureGroup([])
this.llmap.addControl(new L.Control.Draw({
position: 'topright',
draw: {
...
rectangle: {
shapeOptions: {
color: '#000000',
opacity: 0.2,
fillOpacity: 0.1
}
}
},
edit: {
featureGroup: vectorLayerDraw,
poly: {
allowIntersection: false
}
}
}))
Would anyone know what can be happening?
Thank you in advance.
I was looking for the question on the internet and I've found the following solution:
.leaflet-draw-toolbar a {
background-image: url('../assets/spritesheet.png');
background-repeat: no-repeat;
color: transparent !important;
}
Where I add the image manually on my static folder and I overwrite the background-image.
Sources: 1 and 2
Thank you so much.
I upgraded from OL4 to OL5 and now to select a polygon I must click exclusively on the border, whereas before I could click anywhere inside the polygon. For circles I can still click anywhere within the circle to select it. This is confusing our end users, and they think that selecting objects is no longer working.
Is this intentional in the upgrade? If so, how can I make a polygon selectable by clicking anywhere inside its area?
I have not been able to find any references online to this issue yet.
This https://github.com/openlayers/openlayers/pull/7750 is referenced in the upgrade notes for version 5.0.0.
If you are using a style without a fill in OL4, for example
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#3399CC',
width: 1.25
})
})
you will need add a transparent fill for OL5:
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#3399CC',
width: 1.25
}),
fill: new ol.style.Fill({
color: 'transparent'
})
})
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.
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.