1

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,
        }
6
  • I just added more code from the section you referred to. Let me know if I can provide you more codes. Thank you.@TomazicM Oct 27, 2021 at 11:11
  • What's still missing is code for layer creation where pop_Eth_Region_2013_Project_Merg_1 function is used, since this function defines click popup.
    – TomazicM
    Oct 27, 2021 at 11:18
  • Will the code for layer creation allow me to add target url? @TomazicM Oct 27, 2021 at 11:55
  • This is the code for 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 uses pop_Eth_Region_2013_Project_Merg_1 function as an onEachFeature option.
    – TomazicM
    Oct 27, 2021 at 12:11
  • GIS SE site is intended for focused questions, where person asking has at least some basic knowledge of the subject and has tried something, but gut stuck. If you want to modify Leaflet code created by QGIS2Web, you'll have to learn about Leaflet: leafletjs.com
    – TomazicM
    Oct 27, 2021 at 13:12

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.