Leaflet: How can I add a marker to map only on mouseover another marker? - leaflet

Question

I have a polygon and two markers. The last marker (var power) I want to start only on mouseover or onclick the first marker (var myIcon). How can I do that? Could you please take a look on this code?
var polygon = new L.Polygon(line, {
color: pastel,
weight: 0.1,
opacity: 0.1,
fillColor: pastel,
fillOpacity: 0.04,
interactive: true
});
polygon.addTo(map)
}
var myIcon = L.divIcon({
className: 'divIcon',
iconSize: new L.Point(35, 15),
iconAnchor:[18, 20],
zIndexOffset: 1000,
html: '<?=$desc1[$i]?>'
});
var marker = L.marker([x1, y1], {icon: myIcon})
.addTo(map)
marker.refPoly = polygon;
marker.on('mouseover', function(e) {
e.target.refPoly.setStyle({
fillOpacity: 0.48
});
});
marker.on('mouseout', function(e) {
e.target.refPoly.setStyle({
fillOpacity: 0.04
});
});
var power = <?php echo json_encode($watt); ?>;
var power = power.reverse();
var myPower = L.divIcon({
className: 'divPower',
iconSize: new L.Point(25, 12),
iconAnchor:[12, 5],
html: power[b]
});
L.marker(pointC, {icon: myPower}).addTo(map)
.bindTooltip(350-b*10 + '°');

Answer 1

You can remove a marker with marker.removeFrom(map) and add it to the map with marker.addTo(map):
var marker = L.marker([x1, y1], {icon: myIcon})
.addTo(map)
marker.refPoly = polygon;
var power = <?php echo json_encode($watt); ?>;
var power = power.reverse();
var myPower = L.divIcon({
className: 'divPower',
iconSize: new L.Point(25, 12),
iconAnchor:[12, 5],
html: power[b]
});
// I removed .addTo(map). Then the marker is not displayed from beginning
var powerMarker = L.marker(pointC, {icon: myPower})
.bindTooltip(350-b*10 + '°');
marker.on('mouseover', function(e) {
e.target.refPoly.setStyle({
fillOpacity: 0.48
});
powerMarker.addTo(map);
});
marker.on('mouseout', function(e) {
e.target.refPoly.setStyle({
fillOpacity: 0.04
});
powerMarker.removeFrom(map);
});
marker.on('click', function(e) {
powerMarker.addTo(map);
});