I have created a map using Leaflet and QGIS2Web. I want to set a target URL for each of the polygons, so that when a user clicks on a polygon, it takes them to the URL. Currently, when they click on the polygons a pop-up appears providing some details about the polygon. I want the pop-up to appear only when they hover over the polygon but not clicking.
var bounds_group = new L.featureGroup([]);
function setBounds() {
if (bounds_group.getLayers().length) {
//map.fitBounds(bounds_group.getBounds());
map.options.zoomSnap = 0.5
//map.options.maxBoundsViscosity = 1;
map.fitBounds(mapBounds);
map.setMaxBounds(mapBounds);
map.setMinZoom(map.getZoom());
}
}
function pop_afr_adm_0(feature, layer) {
layer.on({
mouseout: function(e) {
for (i in e.target._eventParents) {
e.target._eventParents[i].resetStyle(e.target);
}
if (typeof layer.closePopup == 'function') {
layer.closePopup();
} else {
layer.eachLayer(function(feature){
feature.closePopup()
});
}
},
mouseover: highlightFeature,
});
}
function style_afr_adm_0_0() {
return {
pane: 'pane_afr_adm_0',
opacity: 1,
color: 'rgba(35,35,35,1.0)',
dashArray: '',
lineCap: 'butt',
lineJoin: 'miter',
weight: 1.5,
fill: true,
fillOpacity: 1,
fillColor: 'rgba(255,255,255,1.0)',
interactive: false,
}
}
map.createPane('pane_afr_adm_0');
map.getPane('pane_afr_adm_0').style.zIndex = 400;
map.getPane('pane_afr_adm_0').style['mix-blend-mode'] = 'normal';
var layer_afr_adm_0 = new L.geoJson(json_afr_adm_0, {
attribution: '',
interactive: false,
dataVar: 'json_afr_adm_0',
layerName: 'layer_afr_adm_0',
pane: 'pane_afr_adm_0',
onEachFeature: pop_afr_adm_0,
style: style_afr_adm_0_0,
});
bounds_group.addLayer(layer_afr_adm_0);
map.addLayer(layer_afr_adm_0);
function pop_Eth_Region_2013_Project_Merg_1(feature, layer) {
layer.on({
mouseout: function(e) {
for (i in e.target._eventParents) {
e.target._eventParents[i].resetStyle(e.target);
}
if (typeof layer.closePopup == 'function') {
layer.closePopup();
} else {
layer.eachLayer(function(feature){
feature.closePopup()
});
}
},
mouseover: highlightFeature,
});
var popupContent = '<table>\
<tr>\
<th scope="row">Language</th>\
<td>' + (!!feature.properties['q2wHide_lang2'] ? autolinker.link(feature.properties['q2wHide_lang2'].toLocaleString()) : '') + '</td>\
</tr>\
<tr>\
<th scope="row">State</th>\
<td>' + (!!feature.properties['State'] ? autolinker.link(feature.properties['State'].toLocaleString()) : '') + '</td>\
</tr>\
<tr>\
<th scope="row">Local Gove</th>\
<td>' + (!!feature.properties['Local Gove'] ? autolinker.link(feature.properties['Local Gove'].toLocaleString()) : '') + '</td>\
</tr>\
<tr>\
<th scope="row">Country</th>\
<td>' + (!!feature.properties['Country'] ? autolinker.link(feature.properties['Country'].toLocaleString()) : '') + '</td>\
</tr>\
</table>';
layer.bindPopup(popupContent, {maxHeight: 400});
}
function style_Eth_Region_2013_Project_Merg_1_0(feature) {
switch(String(feature.properties['q2wHide_lang2'])) {
case 'Acholi, Lotuho':
return {
pane: 'pane_Eth_Region_2013_Project_Merg_1',
stroke: false,
fill: true,
fillOpacity: 1,
fillColor: 'rgba(13,218,57,0.701)',
interactive: true,
}
break;
case 'Afar':
return {
pane: 'pane_Eth_Region_2013_Project_Merg_1',
stroke: false,
fill: true,
fillOpacity: 1,
fillColor: 'rgba(206,166,65,0.701)',
interactive: true,
}
break;
case 'Afar, French':
return {
pane: 'pane_Eth_Region_2013_Project_Merg_1',
stroke: false,
fill: true,
fillOpacity: 1,
fillColor: 'rgba(131,108,212,0.701)',
interactive: true,
}
pop_Eth_Region_2013_Project_Merg_1
function is used, since this function defines click popup.layer_afr_adm_0
layer creation:var layer_afr_adm_0 = new L.geoJson(json_afr_adm_0, ...
. There must be similar code for layer that usespop_Eth_Region_2013_Project_Merg_1
function as anonEachFeature
option.