For example I have agm-map and two agm-circle's in my Angular HTML file. And fillColor for circles is set to red like this:
<agm-circle [latitude]="lat1" [longitude]="lng1"
[radius]="5000"
[fillColor]="'red'">
</agm-circle>
<agm-circle [latitude]="lat2" [longitude]="lng2"
[radius]="1000"
[fillColor]="'red'">
</agm-circle>
Now I want to remove duplicating of fillColor value. I know I can do it like this:
In HTML:
[fillColor]="circleFillColor"
In TS:
circleFillColor = 'red';
But I think the more appropriate place for colors is CSS file. So the question is: how to define this color in CSS.
Related
I have created a map with clusters created like so:
//create clustering markers
var markers = L.markerClusterGroup({
spiderfyOnMaxZoom: false,
showCoverageOnHover: false,
zoomToBoundsOnClick: false,
singleMarkerMode: true, //makes sure that single incidents looks the same as clusters (but are still treated as single markers)
iconCreateFunction: defineClusterIcon
});
var layer_group = L.geoJSON(geoJson);
markers.addLayer(layer_group);
map.addLayer(markers);
map.fitBounds(markers.getBounds());
In the defineClusterIcon function, I create a SVG which then is converted to HTML and defines the icon:
return L.divIcon({
iconSize: new L.Point(40, 45),
html: html,
classname: 'leaflet-div-icon'
});
I now want to be able to change the style of the cluster (or marker, which also is styled as a cluster), when pressing it - and I want it to return to the original styling when pressed again.
Instead of changing the style of the actual svg elements, I am thinking that it might be easier to just change the style of the class:
.leaflet-div-icon {
background: rgba(0,0,0,0);
border: none;
}
Where I then want to have a border when the cluster/marker has been pressed. I do not know, whether it is possible to change the class within the on clusterclick or click functions, or if it can be done in another way.
My code, as it is now can be found here - where the wanted effect also can be seen on the controls on the right side: http://bl.ocks.org/skov94/f006cd45d2daa2bc67e4f514774fdd0d
Instead of switching the outline property of the leaflet-interactive div, i would toggle a class as you did with the controls on the right side (say a outlined class).
This class toggling has to be done in a "onclick" event handler. Leaflet clustering provide its own cluster click events (clusterclick).
The possible targets of the clusterclick event seem to be either the text, circle, or svg nodes of the cluster. We want to get the enclosing div with class leaflet-interactive to add or remove the outlined class on it. This will be made easily possible with Element.closest:
Javascript file
markers
[...]
.on('clusterclick',function(c) {
console.log("pressed");
map.closePopup();
c.originalEvent.target.closest(".leaflet-interactive")
.classList.toggle("outlined");
});
Then, simply change the style of its circle descendants with css:
CSS file
.leaflet-interactive.outlined circle {
stroke-width: 2px;
stroke: blue;
}
Edit: If you're not familiar with css, the selector means: circle nodes that are descendants of nodes with classes leaflet-interactive AND outlined.
I have some buttons with simple black images on them. When my program switches to a black theme, I modify the images using a color adjust:
private ColorAdjust darkThemeButtons = new ColorAdjust(); {
darkThemeButtons.setSaturation( -1 );
darkThemeButtons.setHue( 1 );
darkThemeButtons.setBrightness( .75 );
}
I would love to be able to specify these values via CSS and read them into the color adjust rather than specifying them in code. Is that possible?
For example, Is there a way to generically ask a stylesheet for a selector's value? Maybe something like this (psuedocode):
HSB color = stylesheet.getSelector( ".darkThemeButtonColor" ).getHSB();
I am using TTTAttributedLabel and need to set background color. I can set text color like this.
[mutableAttributedString addAttribute:NSForegroundColorAttributeName
value:color
range:range];
self.lblContent.attributedText = mutableAttributedString;
But it is not working for background color.
[mutableAttributedString addAttribute:NSBackgroundColorAttributeName
value:color
range:range];
self.lblContent.attributedText = mutableAttributedString;
May I know what is wrong?
You should use kTTTBackgroundFillColorAttributeName. See TTTAttributedLabel.h for details on that constant and several other attribute constants that are specific to TTTAttributedLabel.
I have the color theme of a website I'm working on change on refresh and would like to display the css background color attribute in my HTML. Is that possible?
i.e.
<footer>The color of the moment is <insert the background color attribute>. Refresh for a makeover</footer>
would display something like
"The color of the moment is #DB0C0C. Refresh for a makeover"
Since the hex color changes based on the style sheet loaded, I don't want to hardcode it. If I had a ruby variable #color which = #ff0000 and wanted to display it in html I could do something like
<%= #color%>
I'm wondering if there is any way to do something similar to access a CSS attribute.
You don't even need jQuery for this.. you can use just vanilla javascript with .getComputedStyle():
<span id='color-map'></span>
var element = document.getElementById("id-goes-here");
var style = window.getComputedStyle(element);
document.getElementById('color-map').innerHTML = style.backgroundColor;
However, it would appear that this does not give the color as a hex, but rather an 'rpg(x, y, z)' string. To get the hex from that, you can parse it using regex and return the result:
function rgbsToHex(str) {
var hex = "#";
var matches = str.match(/rgb\((\d+),\s(\d+),\s(\d+)\)/);
hex += Number(matches[1]).toString(16);
hex += Number(matches[2]).toString(16);
hex += Number(matches[3]).toString(16);
return hex;
}
DEMO
You can use the .css() function in jQuery.
$('footer').find('span').text($('.bg').css('background-color'));
This will give you the color in rgb, if you would like to show it in HEX then check this for more info.
<degrafa:LinearGradientFill id="bluedream">
<degrafa:GradientStop color="#6ab5d0"/>
<degrafa:GradientStop color="#388aae"/>
</degrafa:LinearGradientFill>
<degrafa:GeometryComposition graphicsTarget="{[bgCanvas]}">
<degrafa:RoundedRectangle id="color_preset" fill="{bluedream}"/>
</degrafa:GeometryComposition>
I have issue with degrafa code which I have defined a set of different gradients for color_preset.fill to be dynamic change when user select different color in the combobox.
I replaced fill="{bluedream}" with fill="using_variable" and lead to error compiled message: Initializer for 'fill': values of type com.degrafa.core.IGraphicsFill cannot be represented in text.
Is there a solution to use this code as a color changer?
The fill property in your example is pointing to the LinearGradientFill with id "bluedream". You can either replace the fill with a different gradient (or solid or other fill) or change the colors of the gradient fill itself:
<degrafa:LinearGradientFill id="bluedream">
<degrafa:GradientStop color="{your_combobox.selectedItem}"/>
<degrafa:GradientStop color="{your_other_combobox.selectedItem}"/>
</degrafa:LinearGradientFill>
<degrafa:GeometryComposition graphicsTarget="{[bgCanvas]}">
<degrafa:RoundedRectangle id="color_preset" fill="{bluedream}"/>
</degrafa:GeometryComposition>
I haven't run that code, but it should work. The idea is to change the color of the GradientStop with your dropdown's selectedItem (provided that is a string).
This example does something very similar, but with a color picker instead of a dropdown:
http://degrafa.org/source/CS4IconPreviewer/CS4IconPreviewer.html