We Keep Coding

Leaflet Toggle groupLayer of markers with jquery

I'd like to create a click function to show and hide my markers (clicking in a img logo next to my map).
I have an img logo:
<a title="Curieux" id="folieLogo"><img class="logo deuz" src="Icons/icons8-trampoline-96.png"></a>
I have my layer group in a var "nordLayer":
var nordLayer = L.layerGroup([markerA,markerB, markerC])
The function to show markers :
$("#folieLogo").click(function() {var nordLayer = L.layerGroup([markerA,markerB, markerC]).addTo(mymap).toggle("slow");
});
When i click on my logo it shows my markers but does not hide them on second click.
Please help. Thanks a lot for taking time.
My map with logos around it

You need to add and remove the layerGroup each time the user clicks the image.
var nordLayer = L.layerGroup([markerA,markerB,markerC]).addTo(mymap);
$("#folieLogo").click( function () {
//check if the nordLayer is defined
//if defined, remove the layer from the map
if (nordlayer) {
nordlayer.removeLayer();
//if the nordlayer is not defined
//this will added to the map
} else {
nordLayer = L.layerGroup([markerA,markerB,markerC]).addTo(mymap);
}
});

Finally did it with the help of a friend, big up to you EDEN!
Still have my layerGroup of markers called "nordLayer"
var nordLayer = L.layerGroup([markerA,markerB, markerC])
So we have to set a new variable with =0 for status we'll call it "clickFolie":
var clickFolie = 0;
and then create a function incliding the click change status:
document.getElementById("folieLogo").onclick = function() {
if(clickFolie%2===0){
nordLayer.addTo(mymap);
}
else{
nordLayer.remove();
}
clickFolie+=1;
}
Working well for me now. Thanks to my buddy. Hope it'll help sbdy.

Javascript - AmCharts hide and show graph using legends

I am using Amcharts plugins in making a graph. But I am having issues in hiding and showing the graph using legends.
This is my function code:
function handleLegendClick( graph ) {
var chart = graph.chart;
for( var i = 0; i < chart.graphs.length; i++ ) {
if ( graph.id == chart.graphs[i].id )
chart.hideGraph(chart.graphs[i]);
else
chart.showGraph(chart.graphs[i]);
}
if (graph.id == chart.graphs['3'].id)
chart.hideGraph(chart.graphs['4']);
if (graph.id ==chart.graphs['4'].id)
chart.hideGraph(chart.graphs['3']);
chart.validateNow();
// return false so that default action is canceled
return true;
}
This code is working but my problem is, it hides only one graph and show the graph again when the user click another legend. What I need to do is to hide multiple graphs by clicking it's assigned label text and marker, and when the graph is hidden I should click the same legend to show the hidden graph.
Please help me. Thank you.

From your description, the default legend behavior does exactly what you're asking for without needing to add your handleClick code. I'm not sure what's the point of it.
var chart = AmCharts.makeChart("chartdiv", {
// ...
"legend": { }, //default setup
});
Here's an example with multiple graphs.

Accessing a jQuery element Google Maps Listener

I am using jQuery with a Google Maps Listener. I have boxes in my map and I need to make changes on them when they are too close.
The problem is the next one:
I check if the boxes are close and then make them red (for example). I know the condition is OK because I have a "console.log" and everything is nice. Here is my code:
Little explanation:
A marker is an element in the map. Every marker has his own infobox (the boxes in the map I want to change).
A cluster is a group of markers.
clusterListener2 = google.maps.event.addListener(markerCluster, 'click', function (clusterer) {
zoomLimit=12;
var myzoom = map.getZoom();
var olderPosk=1000000;
var olderPosD=1000000;
if (myzoom>zoomLimit) {
clusterClickController=1;
$.each(clusterer.getMarkers(), (function (index, marker) {
var restak=olderPosk-marker.position.k;
var restaD=olderPosD-marker.position.D;
if (restak<0) restak=restak*(-1);
if (restaD<0) restaD=restaD*(-1);
if ((restak<0.0001)&&(restaD<0.0001)) {
console.log("Close elements");
console.log($(this.infobox));
currentInfobox=$(this.infobox);
currentInfobox.css({"background" : "red"});
}
olderPosk=marker.position.k;
olderPosD=marker.position.D;
marker.marker.open(map, this);
marker.infobox.open(map,this);
marker.marker.isHidden = false;
}));
}
else {
clusterClickController=0;
}
});
So, the "Close elements" console.log is appearing in console and the $(this.infobox) prints a jQuery element but when I do the "background red" statement it does not work.
Any help? Thanks

I think you should use infobox.content_.style.cssText to set the new style instead. As it is shown in line 44 of this jsfiddle.

MapBox: Markers not showing clickable cursor on mouseover

I am moving from leaflet+cloudmade to mapbox and have been doing minor rewrites to my code where necessary. I am refreshing my map and in my previous installment it was easiest to add each marker in to it's own layer and then on refresh to remove all layers and redraw the markers.
Here is my current code:
function setLeafletMarker(lat, lng, iconType, popupHTML) {
popupHTML = typeof popupHTML !== 'undefined' ? popupHTML : "";
var LamMarker = new L.Marker([lat, lng], { icon: iconType }); //.on('click', markerClick); ;
markers.push(LamMarker);
LamMarker.bindPopup(popupHTML);
map.addLayer(LamMarker);
}
I suspect this has something to do with the problem, which is that when I put my mouse cursor over a marker, it stays as a hand (draggable) instead of changing to be a pointy finger, meaning the marker is clickable. Clicking works fine, but it's not very intuitive. How do I change the hand to pointy finger?

Ran into the same problem also. Did a quick check of CSS on the mapbox site, and they seem to fix it using a css rule in their sitewide css file (not map specific). I was able to fix the problem using the same approach, by adding this to my sitewide css.
.leaflet-overlay-pane path,
.leaflet-marker-icon {
cursor: pointer;
}
I have compared the default leaflet.css with the default mapbox.css and leaflet includes this
.leaflet-clickable {
cursor: pointer;
}
while mapbox does not.

One way is you can just add the behavior to the mouseover and mouseout events:
LamMarker.on("mouseover", function(e) {
document.getElementById('map').style.cursor = "pointer";
}).on("mouseout", function(e) {
document.getElementById('map').style.cursor = "grab";
});

In the current mapbox api (2022) this works. I'm not sure if there is a smarter way to do this as the docs are terrible in this department.
map.on('mouseover', 'source-id', e => {
map.getCanvas().style.cursor = 'pointer'
})
map.on('mouseleave', 'source-id', e => {
map.getCanvas().style.cursor = ''
})
This assumes you are adding a source layer to your map as in this example

If your not using source layers, you can target your marker icon via css
.marker svg {
cursor: pointer;
}

Delay between creation and display of polygons

To create polygons in my map, I am using jQuery.getJSON() to load geojson files containing polygons and multipolygons. Then I analyse the geojson with a github plugin (loadgeojson) and finally the polygons are created on the map.
I put a <div> with a loading gif that overlays the map that appears just before the jQuery.getJSON() is being called.
The problem is the timing to remove it. I make the loading animation disappears when all the polygons visible property is set to True.
I want the <div> to disappears when the polygons appears on the map. But for the moment, it disappear a little before this. So on slower browser there is a relatively big delay between the <div> disappearing and the polygons appearing.
I tried to put a listener on an event but I couldn't find an event that corresponded to what I want.
How can I remove the loading animation right on time when the polygons appears on my map?
Here's my code:
function readJSON(id){
showLoadingAnimation();
// If .json hasn't been read
if(stockArray[id].length == 0) {
$.getJSON(id + ".json", function(data){
showFeature(data, id)
})
}
}
function showFeature(geojson, elemtype){
currentFeature_or_Features = new GeoJSON(geojson, elemtype, options);
if (currentFeature_or_Features.type && currentFeature_or_Features.type == "Error"){
return;
}
// Display object
if (currentFeature_or_Features.length){
for (var i = 0; i < currentFeature_or_Features.length; i++){
if(currentFeature_or_Features[i].length){
for(var j = 0; j < currentFeature_or_Features[i].length; j++){
// Display multipolygon
currentFeature_or_Features[i][j].setMap(map);
// Mouse events for multipolygons
mouseEventsMulti(i,j,elemtype);
}
}
else{
// Display polygons, polylines and points
currentFeature_or_Features[i].setMap(map);
// Mouse events for polygons, polylines and points
mouseEventsSimple(i,elemtype)
}
}
} else {
currentFeature_or_Features.setMap(map)
}
// Stop loading animation
dontShowLoadingAnimation();
}

Finally, I modified my code to pan the map a tiny little bit after the polygons are created. Then it activate the idle listener that stops the loading animation.
It might not be the prettiest bit of code, but it works.
This is what I added to the showFeature function
center = map.getCenter();
latLngCenter = new google.maps.LatLng(center.lat() + 0.0000001,center.lng() + 0.0000001);
map.panTo(latLngCenter);
And this is the Listener
google.maps.event.addListener(map, 'idle', function() {
// Stop loading animation
dontShowLoadingAnimation();
});