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!!
Related
My function is supposed to display a marker over an existing icon (US Cities) when clicked/selected. The marker is an image file. Then when the user clicks on another icon, the previous marker should disappear.
It seems to work fine at first. The first marker is created when the icon is clicked. When the second icon is clicked, the marker is created and the original marker disappears. When a third icon is clicked, the marker does not appear. The console says "marker is not defined".
Here is my code:
map.on('click', 'usa_cities', function(highlightMarker) {
var markerCoordinates = highlightMarker.features[0].geometry.coordinates.slice();
var markerElement = document.createElement('div');
markerElement.id = 'marker';
// create the marker
new mapboxgl.Marker(markerElement)
.setLngLat(markerCoordinates)
.addTo(map);
map.on('click', 'usa_cities', function() {
marker.remove()
});
}),
Thank you
You don't need to create a new marker each time the user clicks. You can simply call marker.setLngLat(markerCoordinates).
I am using leaflet.js for my application.
The click event is not triggering alongwith the mouseover event.
layer.on({
mouseover: function (e) {
L.popup().setLatLng(e.latlng)
.setContent("Test")
.openOn(map);
},
click: function () {
alert("Click");
map.fire("click", e);
}
});
I am using the custom marker instead of circle marker
option.pointToLayer = function (feature, latlng) {
var marker = L.marker(latlng);
var icon = L.icon({
iconUrl: 'Image/InvestmentIcons/environmentalflow.png',
iconSize: [12, 12], // size of the icon
});
marker.options.icon = icon;
return marker;
}
What happens is that when a user tries to click on your Marker (which would trigger your "click" event listener, i.e. display your alert), they have to move first their mouse over the Marker, which opens a Popup at this position (accordingly with your "mouseover" event listener), so the Popup is now receiving the click, instead of your Marker.
You can see that your "click" listener is still working properly by positioning your mouse cursor just besides the Popup "tip", where it does not cover the Marker icon, but the mouse cursor is still somehow a little bit on the Marker:
To try it live: https://plnkr.co/edit/8Zu0cYeYATp2qY6ltn7N?p=preview
To avoid this UX issue, you could try using a Tooltip instead of a Popup for example. By default it will appear on the side of the coordinates, instead of above it (which makes the Popup cover the Marker).
Original-markerIcon = leaflet/images/marker-icon-2x.png
current-markerIcon = leaflet/images/map-marker.png
I have many markers and I want to change marker icon of the current clicked marker.If I click again on another marker change all marker Icon to original marker and current marker with current Icon.
I also have label attached with each marker.
When I click on current Icon I want to change also the label of that marker or remove the label.
How can I achieve this ?
thank you.
Image with marker visible with original-markerIcon
EDIT-1
L.Icon.Change = L.Icon.Default.extend({
options: {
iconUrl: 'leaflet/images/map-marker.png',
iconSize: new L.Point(150, 75),
}
});
var changeIcon = new L.Icon.Change();
L.Icon.Original = L.Icon.Default.extend({
options: {
iconUrl: 'leaflet/images/marker-icon-2x.png',
iconSize: new L.Point(45, 81),
}
});
var originalIcon = new L.Icon.Original();
marker.on('click',function(e){
for(var i = 0 ; i < $scope.markers.length ; i++){
$scope.markers[i].setIcon(originalIcon);
}
})
// marker click event to show the center pano
$scope.markers[index].on('click',function(e){
$scope.markers[index].setIcon(changeIcon);
});
If i am not mistaking there is a function named as "eachLayer" in map. I think when you create a marker, leaflet gives an automatic ID for that. So you have to give that ID in "eachLayer" function. And when it finds appropriate marker, there should be a function "popupclose". To add it will be better if you show your code...!
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();
});
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"));
}
}