I want to reuse my basic style function to create an select style by overwriting some of the properties.
This approach is working for fill/stroke colors of linestrings, polygons and texts, but not for images (a circle in my case).
I don't want to create a new image since other properties should be retained.
var selectStyleFunction = function(feature, resolution) {
var style = styleFunction(feature, resolution)[0];
style.getImage().getFill().setColor("magenta");
console.log(style.getImage().getFill().getColor());
return [style];
};
In this fiddle you can see, that the above code doesn't change the feature style on selection although the log output is correct.
Is there any way to overwrite this property?
I found an answer to my question in the api dokumentation of openlayers. It was too obvious to find it in the first place.
https://openlayers.org/en/latest/apidoc/ol.style.Style.html
ol.style.Style
Container for vector feature rendering styles. Any changes made to the style or its children through set*() methods will not take effect until the feature or layer that uses the style is re-rendered.
So rendering is not triggered by the setters.
Related
I'm trying to draw an img to a canvas. However, styles aren't carrying over, whether I set the style attribute or do it in the CSS.
Here's a JSFiddle showing what I'm trying to do.
I've also tried applying the styles to the canvas itself. This displays correctly, but when I perform canvas.toDataURL(...) it doesn't get the styles.
Is there some other way to apply styles to the generated data?
To apply filters to your canvas content, you can use the cutting-edge filter property, which uses the same syntax the CSS filter property. Before you draw your image, do
context.filter = "grayscale(1)";
And you can reset it for anything else you do in the future by
context.filter = "none";
Your filtered image will remain correctly filtered -- the filter property basically tells the canvas context, "Whatever I draw from now on should have this filter applied," so changes only affect future drawing operations.
I would like to dynamically set the shadow of a custom marker icon at runtime, because I want to emphasize the currently clicked icon. I'm using Leaflet 1.0. Things I've tried:
Adding a shadow at runtime with the createShadow function
Adding a blank png shadow image to the custom icon and changing it at runtime by either the createShadow function or directly modifying the shadow's image source
Here's some psuedocode:
function addMyShadow(marker) {
/* try Leaflet's `createShadow` function */
// directly modify marker: Uncaught TypeError: marker.createShadow is not a function
marker.createShadow('lib/images/shadow.png');
// the createShadow is available under options.icon,
// but this doesn't seem to change anything
marker.options.icon.createShadow('lib/images/shadow.png');
/* try directly modifying the shadow's image source */
// Successfully changes the `currectSrc` property,
// but also doesn't do anything to the icon on the map
marker._shadow.currentSrc = 'lib/images/shadow.png';
}
I also tried appending a custom class with -webkit-filter: drop-shadow, but I'm already using -webkit-filter to color a set of icons. I only want to change the selected icon, not the entire class. Apparently nesting -webkit-filter overwrites the outside -webkit-filter instead of stacking filters. So this isn't a viable option for me.
Currently I'm experimenting with adding a custom class that uses css drop-shadow; it seems like I can manually change the class at runtime, but I'm hoping there's some better built-in way to add a shadow. It's also not very pretty, because it makes the shadow square even if the image has transparency.
EDIT: I want the marker to be draggable (and have the shadow follow as the marker is dragged). So any solution with two icons would need to bind both icons together somehow.
I think you should have 2 L.icon objects: one without shadow and one with a shadow.
To show the shadow, you just switch L.Icon
marker.on('click', function(e) {
if(selectedMarker) {
if(selectedMarker !== e.target) { // selected marker is NOT this one
selectedMarker.setIcon(greenIcon);
e.target.setIcon(greenIconWithShadow);
selectedMarker = e.target;
}
else { // selected marker is this one
selectedMarker.setIcon(greenIcon);
selectedMarker = false;
}
}
else { // no marker selected
selectedMarker = e.target;
e.target.setIcon(greenIconWithShadow);
}
});
The shadow is part of the L.Icon and should follow when dragged
See example http://plnkr.co/edit/PNxzJqMbcRTuo0jWPGyj?p=preview
How do I apply a graphic style (called 'line1') to a PathItem using ExtendScript in Adobe illustrator?
// Get the style named "line1"
var style = app.activeDocument.graphicStyles.getByName("line1");
// Apply the style to your path item
style.applyTo(pathItem);
Here's what the Illustrator Scripting Guide has to say about applying graphic styles (page 17):
Your script can apply a graphic style to artwork using the graphic style object. To apply a graphic style, use the graphic styles property of the document object to access the apply to method of the graphic style object.
Note that the object names given are for AppleScript. It looks like in ExtendScript uses slightly different names: the graphic style object is, instead, the ArtStyle object. Use its .applyTo() method.
Hi is there a way of using javascript for example using buttons to change colour of an svg shape? If so could someone please guide me in the right direction thanks
If you have a number of these shapes, then look at the d3 library, which is designed explicitly to allow you to bind data to svg attributes. A good explanation of the way it works is the Three little circles tutorial.
If you want to just change an attribute of an svg shape on a button click, then you need an onclick handler for the button:
function handleClick() {
// code to modify svg here, e.g.:
document.getElementById('svgShapeId').setAttribute('cx',150);
}
document.getElementById('buttonId').onclick = handleClick;
Here's an example of using JS to create animation elements to highlight colors based on mouse over/out:
http://phrogz.net/SVG/change-color-on-hover.svg
Here's an example of an SVG that changes lots of colors, and house some silly mouseover buttons:
http://phrogz.net/SVG/rgbhsv.svg
Here's an example that shows SVG in XHTML, with both native HTML widgets (an HTML5 slider) as well as draggable SVG elements (the path handles):
http://phrogz.net/SVG/area_of_path.xhtml
In general:
Find elements
Attach event handlers
In the event handlers, adjust properties (either via setting XML attributes or via the SVG DOM)
I was playing with Google maps for last two days and started understanding little bit about its functionality.
I was using Large Map i.e. 700 X 300 resolution map size and i was trying to implement controls used in small maps.
eg.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 18);
map.setMapType(G_HYBRID_MAP);
**map.setUIToDefault();**
map.enableContinuousZoom();
var customUI = map.getDefaultUI();
customUI.controls.smallzoomcontrol3d=true; //1. trying to override largezoomcontrol3d
customUI.controls.menumaptypecontrol=true; //2. trying to override largezoomcontrol3d
map.setUI(customUI);
map.enableRotation(); //3. Enabling rotation
Here in 1(a). Small zoom control is not getting visible until i remove the line map.setUIToDefault() and add one more line customUI.controls.largezoomcontrol3d=false. Although I was expecting that by writing above code those control will get overridden.
1(b). I tried to use map.removeControl(Control:GControl) where i was not able to pass the correct parameter. I wanted to remove largezoomcontrol3d from map but i was not able to make out how to refer to this control in the current map.
Same overriding problem is occuring here also. The only difference here is that both the controls are visible here menumaptypecontrol and maptypecontrol, here menumaptypecontrol is overlapping on maptypecontrol
I am trying to enable rotation on map but it is not working for me.
thinking about map.removeControl you were quite closely to solution (if I got what you need). take a look here:
Controls
so, you need just use map.addControl function to add exactly what you need instead of what you did.
sorry, forgot about map rotation. I think the following simple example of Google Map can help you (I just never played with rotation, but example looks very simple to learnt from it):
Google Map rotation example