I am adding a list of markers to my chart based of certain conditions, these conditions are varying and therefore I will need to have markers that look different:
(using the setGridStrokeXStyle function doesn't seem to have an effect. What is the correct way to accomplish this?)
Markers.map((marker) => {
const chartMarker = chart.addChartMarkerXY()
.setPosition({ x: new Date(marker.x) - startDate, y: marker.y });
chartMarker
.setResultTableVisibility(UIVisibilityModes.always)
.setResultTable((table) => table
.setContent([
['Type']
])
)
.setGridStrokeXVisibility(UIVisibilityModes.whenDragged)
.setGridStrokeYVisibility(UIVisibilityModes.whenDragged)
.setTickMarkerXVisibility(UIVisibilityModes.whenDragged)
.setTickMarkerYVisibility(UIVisibilityModes.whenDragged)
.setDraggingMode(UIDraggingModes.notDraggable)
.setGridStrokeXStyle(new SolidLine({ fillStyle: new SolidFill({ color: ColorHEX("#FF69B4"), thickness: 2 }) })); //This doesn't seem to change the marker's appearance.
console.log("style", chartMarker.getGridStrokeXStyle());
});
The reason why in your code snippet the setGridStrokeXStyle is seemingly not having an effect is because the X grid stroke is not visible.
I have highlighted which element the "X grid stroke" is in the below picture with red to make sure:
As per why this is not visible in your example code, it is due to this method call which makes it so it is only displayed when the Chart Marker is being dragged.
.setGridStrokeXVisibility(UIVisibilityModes.whenDragged)
Furthermore, this other method call makes it so that the Chart Marker can not be dragged, which results in the X grid stroke never being visible.
.setDraggingMode(UIDraggingModes.notDraggable)
Here are some examples of styling different parts of the Chart Marker properly:
Related
Hi, I need help in changing a bunch of styling properties for the ChartXY and Axis. I tried the methods from the documentation but its either the function is not found or it is not clear which method in the API doc.
changing the default x and y ticks font properties (family, size, style) - In the API doc I only see the title and for custom ticks.
changing the chart bg color - ChartXY.setChartBackgroundFillStyle returns a function not found error
changing the chart border props - ChartXY.setChartBackgroundStroke returns a function not found error
Please help.
changing the default x and y ticks font properties (family, size, style)
All modification of automatically placed Axis ticks is done via TickStrategy. Since, different tick strategies can have different tick structures, this modification must be at the same time when the tick strategy is specified. It looks like this:
chart.getDefaultAxisX()
// Specify tick strategy and configure it via callback function.
.setTickStrategy(AxisTickStrategies.Numeric, (ticks) => ticks
.setMinorTickStyle((style) => style
.setLabelFont((font) => font.setStyle('italic'))
)
)
In this case, ticks is of type NumericTickStrategy.
Note for TypeScript users, tick style currently has to be casted to VisibleTicks, like this: ticks.setMinorTickStyle((style: VisibleTicks) => style...)
changing the chart bg color
chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
changing the chart border props
chart.setSeriesBackgroundStrokeStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) }) }))
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'm using leaflet to draw layers of circles (so there are several layers, each consisting of several circles) on a map.
I've saved all the layers on a featuregroup:
this.globalLayer = L.featureGroup();
I'm adding new circles to it by creating a new featuregroup of the circles, and adding the featuregroup to the globalLayer:
let circleLayer: L.featureGroup();
let point1 = L.circle([pos_lat, pos_long], {color: color, opacity: 1,
radius: radius});
let point2 = L.circle([pos_lat, pos_long], {color: color, opacity: 1,
radius: radius});
circleLayer.addLayer(point1);
circleLayer.addLayer(point2);
// etc.
this.globalLayer.addLayer(circleLayer);
Now I want to add a css class to some of the layers:
for (let cssLayer of cssLayers) { // cssLayers is a L.featureGroup[]
this.globalLayer.removeLayer(cssLayer);
cssLayer.setStyle({className: 'animate'});
this.globalLayer.addLayer(cssLayer);
}
This works, but since the layers contain a lot of circles, this takes a while to compute. Is there a way to just add a css Class without removing and adding them again?
I've tried
this.globalLayer.eachLayer(layer => {
layer.setStyle({className: 'animate'})
});
But setStyle() does not exist on type L.Layer
JsFiddle with my current, workaround solution
You will need to add a class to the corresponding layer before you add it to other labels, like
circleLayer1.setStyle({className: 'myListener'});
and then you can find this class anytime you want:
$('#blink').click(function() {
$(".myListener").addClass("blink");
});
Fiddle.
I'm not sure if this is the best practice but I found that you can use the layer's _path attribute:
this.globalLayer.eachLayer(layer => {
layer._path.classList.add('animate')
});
In paperjs I can not find a way to re size the text item pointText. I would like my users to be able to click to select the text item, then when the handles appear be able to drag to re size the text (keeping the aspect ratio). No where in the docs is it clear or doable. I have a feeling that I'm missing something or its not possible.
You could do a hitTest only on the bounds of PointText items.
var text = new PointText({
point: [50, 50],
content: 'The contents of the point text',
fillColor: 'black',
fontSize: 25,
selected: true
});
function onMouseDown(event){
text.res = project.hitTest(event.point, {
type: 'PointText',
bounds:true
}
);
console.log(text.res.name);
}
Then parse the result to make sure it's a corner and perform a scale centered on the opposite corner on the next onMouseUp.
Pardon my noobishness, but, although I've seen this issue discussed, I haven't found an answer. I am trying to draw concentric circles on a Google Map using the API v3, making each clickable as on a bullseye target, but always the largest one ends up on top, which means it is the only clickable one.
The following uses an array called "subjects" that consists of increasing radii and various fillcolors.
for (i=0;i<subjects.length;i++) {
radi = subjects[i][0];
fillcolr = subjects[i][1];
zindx = subjects.length - i;
newcircle = new google.maps.Circle({
radius: radi,
center: centerPoint,
strokeWidth: 1,
fillOpacity: 1.0,
fillColor: fillcolr,
zIndex: zindx
});
// display it
newcircle.setMap(map);
// make outer circle clickable
google.maps.event.addListener(newcircle, 'click', function() {
circleClickedInfo(i);
});
The circles are there, the zIndex is set, but the biggest circle is always on top. I have tried setting zIndex on a pass afterwards, boosting each zIndex by 10000, reversing the order in which I create the circles, not setting the zIndex explicitly, etc. I'm sure I am missing something obvious (see the aforementioned noobishness), but I can't figure out what it is. TIA for any pointers...
Try this for every shape you need:
selectedShape.setOptions({zIndex:0});