I want to select two or more markers in a chart and perform an action using their coordinates.
Selecting the points is the main problem since I didn't find anything on this topic and I'm not sure if it can be done.
I did something like this in a Pie Chart.
What I did was use "connectToPlot" to change the series color when the user click on it.
This is a resume of the work that I did: change series color when user click on it
See that when you click on the serie, the color changes to gray and if you click again the series returns to it original color (saved it in the attribute "originalColor").
pieChart.connectToPlot("default", function(evt) {
var shape = evt.shape;
var type = evt.type;
if (type == "onclick") {
var fillColor = "rgb("+shape.fillStyle.r+", "+shape.fillStyle.g+", "+shape.fillStyle.b+")"; console.log(shape.fillStyle);
if(shape.rawNode.getAttribute("originalColor")==null)
shape.rawNode.setAttribute("originalColor",fillColor);
var strokeColor = "rgb("+shape.strokeStyle.color.r+", "+shape.strokeStyle.color.g+", "+shape.strokeStyle.color.b+")";
if(fillColor=='rgb(238, 238, 238)'){
shape.setFill(shape.rawNode.getAttribute("originalColor"));
shape.setStroke(shape.rawNode.getAttribute("originalColor"));
}else{
shape.setFill('rgb(238, 238, 238)');
shape.setStroke(shape.rawNode.getAttribute("originalColor"));
}
}
Related
I have pieced together the following code using examples on Mapbox... https://codepen.io/charlie-enright/pen/ZExKOGB?editors=0010
What I want to do now is add another raster layer but have its visibility controlled by one of the existing buttons (the "geophys")button rather than to have to add an extra button.
Is it possible to have two separate raster layers controlled by the same toggle button with the script I have used? If so how will I go about doing this?
The code for the additional raster layer I want to add to be controlled by the geophys button is:
map.addSource('rudbaxton', {
'type': 'raster',
'url': 'mapbox://charlie-enright.chlrzasw'
});
map.addLayer({
'id': 'geophys1',
'source': 'rudbaxton',
'type': 'raster'
});
On top of this I would like the opacity control to adjust the opacity for the two raster layers controlled by the "geophys" button. is this possible to do as well?
Thanks,
The way the example you used is set up, the text in the button must exactly match the name of the layer you want to toggle.
This line gets the text from the button that was clicked:
const clickedLayer = this.textContent;
This line gets the current visibility of the layer with the same name const visibility = map.getLayoutProperty(clickedLayer, "visibility");`
To control two layers with one button click, you just need to add some logic to check for which button was clicked, and respond accordingly:
link.onclick = function (e) {
const clickedButtonText = this.textContent;
e.preventDefault();
e.stopPropagation();
if (clickedButtonText === "geophys") {
// assuming your two layers should always be on or off together, only check the current visibility of one of them
const visibility = map.getLayoutProperty("some-first-layer", "visibility");
// Toggle layer visibility by changing the layout object's visibility property.
if (visibility === "visible") {
map.setLayoutProperty("some-first-layer", "visibility", "none");
map.setLayoutProperty("some-second-layer", "visibility", "none");
this.className = "";
} else {
this.className = "active";
map.setLayoutProperty("some-first-layer", "visibility", "visible");
map.setLayoutProperty("some-second-layer", "visibility", "visible");
}
}
// repeat the above if statement for the other button(s)
};
As a bonus, this means you can use any text you want in the buttons, which might be a little more human-friendly than using the layer names!
I need to bind click event handler for the icon in the red rectangle zone,bind different click event handler for the blue rectangle zone.
right now ,i have no idea how to make it work, any help will be appreciate
example and codes
I figure out an solution.
You can add an icon dom after the label by manual, like below codes.
var myChart = echarts.init(document.getElementById('main'));
var option = {
// your options
};
const parent = myChart.getDom().parentElement;
const xPixel = myChart.convertToPixel({ xAxisIndex: 0 }, 2) // to get the x postion of target category
var div = document.createElement('img')
div.style = `position: absolute;top: 366px;height: 12px;left:${xPixel + 2 * 14}px` // 2 * 14 is in order to correct the left
div.src = 'image path'
div.addEventListener('click', () => {})
if (parent) parent.appendChild(div)
You can change top or left to correct the icon position.
If somebody have greater solution, plz let me know.
In my app I had to develop a system that allows the user, with a double click, to zoom in to a cluster.
Everything work, but the problem is that the double click add a feature on the map (a point) and it is persistent (it also replace the feature I selected in case I select not the cluster but the single element, even if I have specified that features.length>=2, so the double click should work only if the user doubles click on the cluster, but it is not like that ).
I would like the select interaction perform only the zoom into the cluster and not that the event adds also a feature on the map. How could I solve this?
var selectDoubleClick = new ol.interaction.Select({
multi: true,
condition: ol.events.condition.doubleClick,
layer: this.clusterLayer,
style: this.selectedClusterStyle
});
selectDoubleClick.on('select',function(event) {
var eventFeature = event.selected[0];
var features = eventFeature.get('features');
if (features.length>=2){
var extent = ol.extent.createEmpty();
features.forEach(function(feature) {
ol.extent.extend(extent, feature.getGeometry().getExtent());
});
this.getMap().getView().fit(extent, {padding: [150, 150, 150, 150]})
}
});
this.map.addInteraction(selectDoubleClick);
I also tried to set selectDoubleClick style:null but it doesn't solve my problem
Follow this discussion, I finally found a solution:
Openlayers 4 - Make layer invisible on feature click
In particular:
The ol.interaction.Select selected features are added to an internal
unmanaged layer.
This is why the selected feature is visible even if the underlying
layer is not.
You could unselect the selected features while you zoom on it using
select_interaction.getFeatures().clear() (just like clicking away).
So I edited my code like that:
selectDoubleClick.on('select',function(event) {
var eventFeature = event.selected[0];
var features = eventFeature.get('features');
if (features.length>1){
var extent = ol.extent.createEmpty();
features.forEach(function(feature) {
ol.extent.extend(extent, feature.getGeometry().getExtent());
});
this.getMap().getView().fit(extent, {padding: [150, 150, 150, 150]})
}else{
selectDoubleClick.getFeatures().clear()
}
});
this.map.addInteraction(selectDoubleClick);
I am trying to change the fill color of the State in the usa map when the marker on that state is clicked. I have been able to get the state color to change when clicking on the state but cannot get the color to change when clicking on the marker.
The map is here: https://www.thekeithcorp.com/map-properties/
I am trying to use a click event listener, the flyto is working as its supposed to but not the color change.
This is my code:
shelter1.addEventListener("click", function (e){
map.flyTo([35.7,-79.0], 7);
restyleLayer(name, layer);
});
function getColor(name) {
color: 'red'
}
function restyleLayer(name, layer) {
layer.feature.properties.name = 'North Carolina';
var myFillColor = getColor(name);
layer.setStyle(myFillColor);
}
Any help would be appreciated!!
I am using Leaflet.js to create a map. The data displayed on the map depends on user selection so I instantiate two empty feature groups on map load, one for the values, and one for a color marker behind the value ( color depends on the value ).
if( dHMT.dataColorLayer===undefined ){
dHMT.dataColorLayer = new L.featureGroup({}).addTo(dHMT.map);
}
if( dHMT.dataValueLayer===undefined ){
dHMT.dataValueLayer = new L.featureGroup({}).addTo(dHMT.map);
}
I then add the empty layers to the layer switcher.
dHMT.overlayMapsLS = {
"Bassins ": dHMT.bassinLayer,
"Couleurs ": dHMT.dataColorLayer,
"Données ": dHMT.dataValueLayer
};
Once the user selects data, the featureGroups are filled with the relevant values/markers.
var iconColor = L.divIcon({className: 'dataSpans',html:"<div style='text-align: center;border-radius: 50%;height:40px;width:40px;padding-top:9px;background:"+dHMT.siteinfo[x].color+"'></div>"});
var iconColorDiv = L.marker([dHMT.ecartArray[x].lat, dHMT.ecartArray[x].lon], {icon: iconColor})
.bindPopup(
'Nom : '+dHMT.siteinfo[x].name+'<br>'+
'Numéro : '+dHMT.siteinfo[x].stnm+'<br>'+
'Stid : '+dHMT.siteinfo[x].stid+'<br>'+
'LatLon : '+dHMT.siteinfo[x].lat+','+dHMT.ecartArray[x].lon+'<br>'+
'Valeur : '+dHMT.ecartArray[x].ecart+'<br>'
).on('mouseover', function (e) {
this.openPopup();
}).on('mouseout', function (e) {
this.closePopup();
});
var iconValue = L.divIcon({className: 'dataSpans',html:"<div style='text-align: center;height:40px;width:40px;padding-top:9px;'>"+value+"</div>"});
var iconValueDiv = L.marker([dHMT.ecartArray[x].lat, dHMT.ecartArray[x].lon], {icon: iconValue});
dataColorFeatures.push(iconColorDiv);
dataValueFeatures.push(iconValueDiv);
L.featureGroup(dataColorFeatures).addTo(dHMT.dataColorLayer);
L.featureGroup(dataValueFeatures).addTo(dHMT.dataValueLayer);
Both layers are fine, I have a nice map with a marker layer with colored circles with another layer displaying values over the marker. The goal being to deactivate the colors or the values using the layer switcher.
The problem is that if, for example, I toggle the color layer off, and turn it on again, the colored circles reappear over the values. The desired behavior would be to have them reappear in the original order, behind the values.
You can listen to the overlayadd event on your L.Map instance:
Fired when an overlay is selected through the layer control.
http://leafletjs.com/reference.html#map-overlayadd
When fired you can use the bringToFront method of L.FeatureLayer:
Brings the layer group to the top of all other layers.
http://leafletjs.com/reference.html#featuregroup-bringtofront
map.on('overlayadd', function () {
dHMT.dataValueLayer.bringToFront();
});