QGIS – How to Set Target URL for Each Feature in a Web Map

leafletqgisqgis2weburl

I have a QGIS map that displays the countries of Western Africa. My goal is to convert this map into interactive web map using QGIS2Web and Leaflet and provide the users the ability to click on a certain country, which will then take them to the target URL of that country. How can I achieve this goal? Below is a list of some of the Western African countries and their target URLs.

Nigeria: https://kaveh-ekbia.github.io/kaveh-ekbia.github.io-nigeria/#6/9.125/8.673

Mali: https://kaveh-ekbia.github.io/kaveh-ekbia.github.io-mali/#5/17.740/-3.997

Liberia: https://kaveh-ekbia.github.io/kaveh-ekbia.github.io-liberia/#7/6.458/-9.434

I know that in QGIS there is a feature called "Actions", however I am not sure if that will be helpful with my case.

The map I created contains two shapefiles. One displays the countries of Western Africa, while the other displays subdivisions within each of the countries. Below is a screenshot of my map.

Best Answer

This isn't the best way to achieve what you're trying to do, but atleast it will give users the ability to click on a link. Check step 5. of this guide.

It shows a way to have links and other markup show up, when hovering over a feature with the cursor.

Related Solutions

[GIS] Adding drop-down menu to leaflet map to update map/tiles to new location

I see no special difficulty in implementing what you describe.

The drop-down menu can be either external or styled as a map control, like you have done for your legends and slider. Then you can react to "change" event to detect selection of a new country.

Panning to the new country can be easily done through map.fitBounds() and having your shapes gathered in a Feature Group so that you can easily retrieve its bounds.

Then you can show only the shapes of the chosen country and hide all the other ones, through simple map.addLayer() and map.removeLayer().

You might also need to swap your legends as well, in case your data is not normalized across all countries.

EDIT:

By the way, as for the drop-down menu and panning the map to the selected country, you might be interested in this plugin (or look at how it is done inside): Leaflet.CountrySelect (demo)

Leaflet – Creating a Map with Coordinates Included in the URL Path

You're looking for a simple query string, here is a working example. I took the code below and called it querystring.html, and passes it coordinates in the url. The maps first view is from N. Adams, MA, and the query string zooms the map to London.

Only issue you have to consider is if the query string is not used, null.

http://localhost/querystring.html?51.5263,-0.0384,51.4836,-0.1414

<!DOCTYPE html>
<html>
<head>
    <title>query string</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>

</head>
<body>

<div id="mapdiv" style="width: 600px; height: 400px;"></div>
<script>

    var map = L.map('mapdiv').setView([42.697765, -73.108005], 14); //N Adams< Mass
    var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

    var queryString = window.location.search;

        queryString = queryString.substring(1);
        var coords = queryString.split(",");
        map.fitBounds([[coords[0],coords[1]],[coords[2],coords[3]]]); //London

</script>
</body>
</html>

Best Answer

Related Solutions

[GIS] Adding drop-down menu to leaflet map to update map/tiles to new location

Leaflet – Creating a Map with Coordinates Included in the URL Path

Related Question