For todays lab we will be looking at how to publish interactive maps for end user consumption. Think of this as a blend between cartography and WMS/WFS. Making PDF maps is great in that is gives us a lot of control in how the data is presented and what story we are telling with the data, however it has two major limitations, if data changes our maps are out of date, and we can only get one perspective of the data per map. Last week we looked at WMS and WFS, these provided a great way to share our data with other GIS professionals and even apply sytling through our QGIS project, but with the caviate that the end user requires at least a rudamentary understanding of GIS.

Through the use of JavaScript we are able to make webpages that users will use to view and interact with our datasets. There is however some things to note, we need to define the style for our data as most basic framworks require the programmer to choose how to present the data. Handling data for interactive use is inherantly differn than standard cartography, all our design work needs to be done in a pragmatic way, and we need to consider reliability of display as much as standard design principals.

inside map.html put this code, on line 20 replace the ip address and path to your map (it’s still in last weeks chat):

<!doctype html>
<head>
        <meta charset="utf-8">

        <title>GIS 413 Map</title>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
        <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>

</head>

<body>
        <H1>My Map</H1>
        <div id="map-div" style="height: 500px;"></div>
        <script type="text/javascript">
                var mymap = L.map('map-div').setView([53.92, -122.75], 11);
                // add the OpenStreetMap tiles
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        maxZoom: 19,
                        attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMa$                        }).addTo(mymap);
                var wmsLayer = L.tileLayer.wms('http://142.207.38.50/cgi-bin/qgis_mapserv.fcgi?SERVICE=$                        layers: 'ForestsForTheWorld tracks',
                        format: 'image/png',
                        transparent: true
                }).addTo(mymap);
        </script>
</body>
</html>

use flask run again, and browse to https://127.0.0.1:5000/map

Note if your lines are too thing open QGIS make the lines thicker save and zoom in and out on the map.

One more note, if you have lots of anoying Q’s floating about

sudo nano /etc/apache2/sites-enabled/001-qgis-server.conf

# Comment out FcgidInitialEnv QGIS_PLUGINPATH "/opt/qgis-server/plugins"
# Save and close the file

sudo systemctl restart apache2