Change selected layer style in Openlayers - javascript

I need to change the style so that when I select a polygon from my layer it doesn't have the blue line as it is in this image. Does anyone know where I make this change with Openlayers?

I assume you are using the Select interaction - it has a style parameter as described in the docs:
https://openlayers.org/en/latest/apidoc/module-ol_interaction_Select-Select.html
There is also an example for this:
https://openlayers.org/en/latest/examples/select-features.html

Related

How move leafle control layers to above map?

I have a leaflet map, I use this Leaflet-Ruler plugin and add ruler control layer to map in this link. I want move ruler control layers to above map as shown as:
How Can I do?
Just need move one DIV element inside another DIV with JQuery $("#source").appendTo("#destination"); for example I move DIV ruler control that class name was leaflet-ruler move to the my special DIV <div id='move-control-layer-ruler-to-here'></div> .
You can move any control layer leaflet to any DIV.
This link is jsfiddle solved my problem.
]

Drawing a horizontal line on a stacked bar chart on hover (chart js)

I have a stacked bar chart as follows:
I want to draw a horizontal line that goes through all the bars of a specific color on hover. Basically, if I hover on the following purple/mauve color, I want the following:
I looked alot in online as well as the documentation, but couldn't find anything.
Any help is really appreciated; thank you!
In theory you should be able to pre-render 5 line charts in addition to your stacked bar chart. Give each line chart a unique id or class html attribute, and each segment of a specific color needs a corresponding html classname, eg 'chartSegmentPurple' (actually it would be better to name the class based upon what the color represents, eg 'chartSegmentEconomicInequality'). Keep each line chart hidden. Give your chart an event listener for hover, then in the event handler get the classname. Use the classname to make visible the corresponding line chart.

Setting click priority on google maps polygon array

I am coding in JavaScript using the Google Maps API, and I was curious if there was a way to set the priority of what polygon array info window is shown when I click on an area. I have two polygons that are overlapping, and I need to control which info bubble appears when you click on the overlapped area. Thank you!
The click will be triggered on the most top Polygon.
The order of the polygons usually depends on the order in which they have been added to the map(when the map-property has been set) or by setting a custom zIndex-property.
So when you want to define a priority you must define the zIndex for the Polygons.
When you want to be able to click on each polygon(and each part of each polygon) there is a simple approach:
Observe the mouseover of the polygons and set the zIndex of the hovered polygon to a value higher than the zIndex of the other polygons. This will bring the polygon into front and you now may also click on the previously covered area.
You may implement this by extending the polygon-prototype:
(function(){
var a=z=0;
google.maps.Polygon_=function(opts){
this.setValues(opts)
google.maps.event.addListener(this,'mouseover',function(){
this.set('zIndex',++z);
});
google.maps.event.addListener(this,'rightclick',function(){
this.set('zIndex',--a);
});
};
google.maps.Polygon_.prototype = google.maps.Polygon.prototype;
google.maps.Polygon = google.maps.Polygon_;}
)();
Demo: http://jsfiddle.net/doktormolle/wznd5nsy/
(Use rightclick to send a polygon to back, e.g. when it completely covers another polygon).

google maps api how to add circles around cities with url

I was reading this link but it is not the same
http://productforums.google.com/forum/#!category-topic/maps/base-map-data/M775Ry3-vNM
How can in google map makes circles and urls around cities?
See the following link
http://gmaps-samples-v3.googlecode.com/svn/trunk/circle-overlay/circle-overlay.html
Use new google.maps.Circle() constructor. You should set the centre and specify the radius of the circle. Hollow effect can be created using fillOpacity(0.0);
There is also a rectangle constructor new google.maps.Rectangle(). See https://developers.google.com/maps/documentation/javascript/reference#Rectangle
Use new google.maps.Circle() with a combination of listeners like mouseover and click.
There are display options like opacity and color.
https://developers.google.com/maps/documentation/javascript/reference#Circle
Your question is a bit too broad. If you have a more specific problem please edit it.

Change color of area chart programmatically in highcharts

I want to change the color of the area chart after it is initially rendered.
In the JSFiddle demo after clicking the button you can see the color has changed when you either mouseover the data point or toggle the display by clicking on the legend to hide and then show again.
In both of these the main area color has not updated but the data points and legend has.
JSFiddle Demo: http://jsfiddle.net/simonweston/tLwy5/
Any help would be greatly appreciated.
You can change it dynamically but you need to manipulate the SVG DOM elements instead of the chart object:
$($('.highcharts-series').children()[0]).attr('fill','blue')
Produces:
I have also tried changing it without luck, the only way is to re-create the chart as seen here

Categories

Resources