Introduction to WebMaps
Lesson 2: Building simple WebMaps and uploading them to a server
Dr. Cyrille Médard de Chardon

University of Luxembourg &
Luxembourg Institute of Socio-Economic Research (LISER)

May 4, 2023
1 / 25

Everything looks like a nail

Before making a WebMap, ask yourself:

Is the concept/idea valid? Does it makes sense cartographically to compared to a static map?
What is the best medium to communicate your data?
Do not think all maps are best shared using WebMaps

Maslow's cognitive bias

McCullen, 2018

2 / 25

Valid WebMap applications

WebMaps are great for exploring or communicating data that necessitate changing scale, area and comparing data to general spatial features (base maps) to comprehend.

To take an example from last lesson, the airline flights example is quite a good example of this. You can focus on an individual airport, specific regions (e.g., Greenland vs Africa) or the world. If I wanted to improve that map I could make it that clicking on an airport highlights those flights in particular.

Fligh path layers

esri

3 / 25

WebMap pyramid of requirements

The skills required for WebMap development

Need to be able to use a computer.
Understand absolute/relative paths of file structure.
Understand how WebMaps function and where data is stored.
Have some cartographic basics.
Understand some JS, CSS and HTML basics.
Be able to generate and export GIS data.
Understand some basic data types.

4 / 25

Last week had some technical background taking time last week, but it’s necessary, and while we will be making WebMaps this week, we’ll continue to use the knowledge from last week and develop new skills.

Agenda for Lesson 2

Making and understanding the index file
Uploading your web page from last week to the server
Creating your first WebMap (Leaflet)
Creating a WebMap of flight paths using QGIS
Uploading more WebMaps to your server

Lost lego people

5 / 25

Demonstration

Two HTML files

I will create a folder on my website named test.

It has two html files inside, named:

index.html
info.html

When I use the browser to navigate to the folder named test, what do you expect to happen?

What actually happens, and why?

6 / 25

SSH onto the server, into my user account's public_html and:

create a folder named test
create a file named index.html with the content
- I'm index.html
create a file named info.html with the content
- I'm info.html
Add links between the two files

Creating an HTML start page

Download the zip file for this lesson.

Unzip it (Windows will happily let you look inside without unzipping - that's bad)
Personalize/edit your welcome/main page (index.html) in your HTML editor of choice.
- Right click on index.html and “open with…” or open/find index.html from your editor.
- Make some minor modifications. For example adding your name to the title or heading.
- Add a link to your 'about me' page from last week's homework.

Test it in a browser (double click on index.html - it should open in your default browser).
The link to your 'about me' page should work.

Being organized and clean in terms of files and folders will be very important

For the remainder of the course you will be contributing to building up your website (i.e., this folder's contents).

7 / 25

Activity 1

Making your landing page

Note the importance of the index.html file:

Browsers look for it

8 / 25

Uploading to a server

Our server for this course: http://164.92.179.32

I will individually give you your passwords now

9 / 25

The purpose of WebMaps is to provide spatial data interaction/exploration online. Typically WebMaps are placed within a website providing the context - similar to what you have done in esri’s Story Maps. Hopefully at this stage you have a working mini-website working on your local machine.

We need to learn how to put our content on-line.

Placing content on-line requires having a computer permanently on and connected to the internet that is running software that can respond to requests for information, what we call a server.

I have spun up a temporary server using DigitalOcean. It costs about 7 EUR per month. Cheaper options exist (e.g., 20 EUR/year).

Working on a server

A note on your using this server.

Always keep a good copy of your data on your local machine.

Work on things on your local machine
Get it working (as much as possible)
Upload to the server.

Don't upload very large files, such as videos to the server.
Don't use the server for any content not related to this course.

This server will not be active beyond the final assignment submission deadline.

Your website folder is your holy grail

10 / 25

URLs vs Server file paths

We saw last week how paths and relative paths 'match'.

While this relationship is maintained once you put data on the server, where your 'root' webpath and URL meet can be arbitrary.

However, this is typically standardized. If want an html file to appear at your URL: http://164.92.179.32/~cyrille then you must place your index.html file at the location /home/cyrille/public_html/index.html.

You may have to create the public_html directory and set permissions to 755.

FileZilla permissions

11 / 25

How to upload - Secure FTP

There are various methods and tools we can use to upload.

A common introductory method to move files between your computer and the server is FTP (File transfer protocol).

Don't use this as it's insecure.

We now use SFTP (Secure FTP).

We will use software called FileZilla, a good, free, and cross-platform (S)FTP client.

We are using FileZilla Client (not FileZilla Server)

FileZilla application layout

12 / 25

We might talk about using FTP generally but we always mean SFTP.

If you download the FileZilla, you want the Client, not the FileZilla Server!

FileZilla

The basics:

The toolbar allows you to connect/disconnect/configure.
- The left button allows you to save configurations and quick connect.
Note the two viewing options on the toolbar's right.
- Shows you differences.
- Allows you to explore both your local machine and the server simultaneously.

The activity pane.
Your computer's directory tree.
Your computer's selected directory's contents.
The server's directory tree.
The server's selected directory's contents.

FileZilla application layout

13 / 25

FileZilla configuration

To connect to the server, configure FileZilla by opening the Site Manager:

Click the icon in the toolbar at the top left of FileZilla . It opens the Site Manager window (to the right).
On the bottom left click New site button and give it a name (e.g., WebMaps course)
On the right specify the:
- Protocol: SFTP
- Host: 164.92.179.32
- User: [your username]
- Password: [your password]
Click Connect

ZileZilla site manager window

14 / 25

Activity 2

Upload your website to FileZilla now

It should have a main index.html page, and an aboutme.html page.

15 / 25

Creating our first WebMap

We will create our first WebMap using the Leaflet library.

The Quick Start Guide assumes we have some knowledge of HTML.

Look in the zip resources provided for today.
Duplicate the file named template.html in resources_wk2/website/pages/
Rename it leaflet_example.html (or something clear) in the same folder.
Open leaflet_example.html in your code editor of choice (e.g., Notepad++)

Follow the instructions on the Quick Start Guide and integrate the resources (CSS, JS, HTML) into your file.

You must link two files and add some HTML, JS, and CSS as well.
As we covered last week, I strongly recommend you keep the CSS and JS in separate files from the HTML for simplicity for now.

16 / 25

A tale of two codes

Look in the provided resources/A_tale_of_two_codes to see the two files below (here abridged to fit):

    <head>
        <title>Integrated Leaflet WebMap</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"/>
        <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
        <style>
            #map { height: 180px; }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            var map = L.map('map').setView([51.505, -0.09], 13);
            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                maxZoom: 18, id: 'mapbox/streets-v11',
                tileSize: 512, zoomOffset: -1,
                accessToken: 'your.mapbox.access.token'
            }).addTo(map);
        </script>
    </body>

    <head>
        <title>Separated Leaflet WebMap</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"/>
        <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
        <link rel="stylesheet" href="separated.css"/>
    </head>
    <body>
        <div id="map"></div>
        <script src="separated.js"></script>
    </body>

/* separated.css */
#map { height: 180px; }

// separated.js
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18, id: 'mapbox/streets-v11',
    tileSize: 512, zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
}).addTo(map);

17 / 25

On the left the three, HTML, CSS, and JS are integrated.

On the right are the contents of separate files. The HTML, CSS, and JS.

Linking your files

In the <head>:

Webpage title
Link to Leaflet CSS
Link to Leaflet JS
Link to your CSS

In the <body>:

a <div id="something"></div> that will contain your WebMap.
below the above id:
- Link to, or provide, your JS

Just like we linked HTML to CSS and JS files, we can now link to HTML elements, using CSS and JS.

You will follow the directions for the following sections:

Preparing your page
Setting up the map
Markers, circles, and polygons
Working with popups
Do not do the last section on Dealing with events

Results?

If after all that work...
Grey WebMap
What's the problem? Use F12 - the developer console!

18 / 25

I will do an overview of the activity steps first.

Explain why this is doomed to failure.

Mapbox

As you've seen from the previous exercise, the tiles you are using belong to Mapbox, created from OSM data.

As we will not be generating our own tiles in this course we need to use someone's image tiles*. Mapbox's business is providing tools and resources, such as these tiles.

There are many sources of map tiles, many of which you must register and retrieve a key to be able to use.

If you exceed certain usage limits you will be cut-off and required to pay to continue.

Unless you have a popular site or WebMap you're unlikely to reach the non-free tiers from Mapbox or other services.

* We could make our own tiles, but that's beyond this course's scope.

Many alternative map sources exists to Mapbox:

Either update your L.tileLayer source (and attribution!) to an alternative source or register with Mapbox and update the accessToken.
Some alternative tile layers:

19 / 25

You can now go back to do the activity, you must choose whether to use the Mapbox tiles or another resource.

Feel free to ask each other for assistance, or myself.

Activity 3

Complete the Leaflet creation WebMap exercise

Use the instructions and code above and in the resources zip file to help you complete the tasks.

While adding following the tutorial you must think about what you are doing and not just copy code.

20 / 25

An alternative WebMap creation method using QGIS

We will dive straight into another activity. Making a WebMap of certain flight paths of your choice.

The process is as follows:

Import the data into QGIS
Select desired features
Change symbology of features
Install plugins (qgis2web & QuickMapServices)
Create/export WebMap

The data for this exercise is provided in the zipped resources provided for today.

Again, assure you unzip the data

Explore how to do the following activities in QGIS:

Add data (flight_paths_ALL_WGS84)
Open attribute table
Select feature/attributes using an expression
Export selection
Styling a layer's properties
Installing plugins
Adding a base map (QuickMapServices)
Export a WebMap (qgis2web)

21 / 25

Activity 4

Complete your QGIS WebMap

Here's a demonstration

You should replicate the process for an airport of your choice other than Luxembourg.

22 / 25

Upload both WebMaps from today

You must keep your individual WebMap files very organized in separate folders.

If your files for this course are a mess things will become much much harder to resolve for you.

Beyond just updating these two maps, you must update your main index.html file that we worked on first today, to point/link to the two new maps.

files tree structure

23 / 25

Homework

Today's exercises

Finish the exercises from today's lecture:

Replicating the Leaflet London map
Creating a flight paths map of an airport (except Luxembourg)

Replication

Create new WebMaps:

Using Leaflet manually create points of interest in Luxembourg
- Don't share any personal information
Using the QGIS plugin create a WebMap of any theme of your choice.

Upload to your server space

Upload the four WebMaps above to your server space.
All maps must be linked from your main index.html file.

24 / 25

Configuring a Ubuntu 22.10 Server on Digital Ocean

Install and configure Apache2

SSH in as root:

apt install apache2
apache2 -version
# Configure firewall
ufw allow 'Apache'
ufw allow 'OpenSSH'
ufw status
# activate firewall
ufw enable
ufw status
# it should show Apache and OpenSSH enabled
# check website in browser
# Note we are using http and not https
# update the main landing page
vim /var/www/html/index.html
# use newusers (for usage see: man newusers) to create users from file
# use the following format (we leave a few blank):
# name:passwd:uid:group:gecos:dir:shell
# cyrille:8t3n997zqb::student::/home/cyrille:

Users, pages, and sftp

# generate users from file contents
newusers students_list
# Enable user directories
a2enmod userdir
systemctl restart apache2
# make user dirs subdirectories 'visible' to Apache
chmod 755 /home/*
# Enable sftp for the user group 'students' in 
# From /etc/ssh/sshd_config comment out
Subsystem       sftp    /usr/libexec/openssh/sftp-server
# add
Subsystem       sftp    internal-sftp
# and add at the bottom
Match Group students # if doesn't work use 'User bob,joe,jim'
ChrootDirectory /home
X11Forwarding no
AllowTcpForwarding no
AllowAgentForwarding no
ForceCommand internal-sftp
PasswordAuthentication yes
# then restart the service
/etc/init.d/ssh restart

25 / 25

Introduction to WebMaps
Lesson 2: Building simple WebMaps and uploading them to a server
Dr. Cyrille Médard de Chardon

University of Luxembourg &
Luxembourg Institute of Socio-Economic Research (LISER)

May 4, 2023
1 / 25

Everything looks like a nail

Before making a WebMap, ask yourself:

Is the concept/idea valid? Does it makes sense cartographically to compared to a static map?
What is the best medium to communicate your data?
Do not think all maps are best shared using WebMaps

Maslow's cognitive bias

McCullen, 2018

2 / 25

Valid WebMap applications

WebMaps are great for exploring or communicating data that necessitate changing scale, area and comparing data to general spatial features (base maps) to comprehend.

Fligh path layers

esri

3 / 25

WebMap pyramid of requirements

The skills required for WebMap development

Need to be able to use a computer.
Understand absolute/relative paths of file structure.
Understand how WebMaps function and where data is stored.
Have some cartographic basics.
Understand some JS, CSS and HTML basics.
Be able to generate and export GIS data.
Understand some basic data types.

4 / 25

Agenda for Lesson 2

Making and understanding the index file
Uploading your web page from last week to the server
Creating your first WebMap (Leaflet)
Creating a WebMap of flight paths using QGIS
Uploading more WebMaps to your server

Lost lego people

5 / 25

Demonstration

Two HTML files

I will create a folder on my website named test.

It has two html files inside, named:

index.html
info.html

When I use the browser to navigate to the folder named test, what do you expect to happen?

What actually happens, and why?

6 / 25

SSH onto the server, into my user account's public_html and:

create a folder named test
create a file named index.html with the content
- I'm index.html
create a file named info.html with the content
- I'm info.html
Add links between the two files

Creating an HTML start page

Download the zip file for this lesson.

Unzip it (Windows will happily let you look inside without unzipping - that's bad)
Personalize/edit your welcome/main page (index.html) in your HTML editor of choice.
- Right click on index.html and “open with…” or open/find index.html from your editor.
- Make some minor modifications. For example adding your name to the title or heading.
- Add a link to your 'about me' page from last week's homework.

Test it in a browser (double click on index.html - it should open in your default browser).
The link to your 'about me' page should work.

Being organized and clean in terms of files and folders will be very important

For the remainder of the course you will be contributing to building up your website (i.e., this folder's contents).

7 / 25

Activity 1

Making your landing page

Note the importance of the index.html file:

Browsers look for it

8 / 25

Uploading to a server

Our server for this course: http://164.92.179.32

I will individually give you your passwords now

9 / 25

We need to learn how to put our content on-line.

Placing content on-line requires having a computer permanently on and connected to the internet that is running software that can respond to requests for information, what we call a server.

I have spun up a temporary server using DigitalOcean. It costs about 7 EUR per month. Cheaper options exist (e.g., 20 EUR/year).

Working on a server

A note on your using this server.

Always keep a good copy of your data on your local machine.

Work on things on your local machine
Get it working (as much as possible)
Upload to the server.

Don't upload very large files, such as videos to the server.
Don't use the server for any content not related to this course.

This server will not be active beyond the final assignment submission deadline.

Your website folder is your holy grail

10 / 25

URLs vs Server file paths

We saw last week how paths and relative paths 'match'.

While this relationship is maintained once you put data on the server, where your 'root' webpath and URL meet can be arbitrary.

You may have to create the public_html directory and set permissions to 755.

FileZilla permissions

11 / 25

How to upload - Secure FTP

There are various methods and tools we can use to upload.

A common introductory method to move files between your computer and the server is FTP (File transfer protocol).

Don't use this as it's insecure.

We now use SFTP (Secure FTP).

We will use software called FileZilla, a good, free, and cross-platform (S)FTP client.

We are using FileZilla Client (not FileZilla Server)

FileZilla application layout

12 / 25

We might talk about using FTP generally but we always mean SFTP.

If you download the FileZilla, you want the Client, not the FileZilla Server!

FileZilla

The basics:

The toolbar allows you to connect/disconnect/configure.
- The left button allows you to save configurations and quick connect.
Note the two viewing options on the toolbar's right.
- Shows you differences.
- Allows you to explore both your local machine and the server simultaneously.

The activity pane.
Your computer's directory tree.
Your computer's selected directory's contents.
The server's directory tree.
The server's selected directory's contents.

FileZilla application layout

13 / 25

FileZilla configuration

To connect to the server, configure FileZilla by opening the Site Manager:

Click the icon in the toolbar at the top left of FileZilla . It opens the Site Manager window (to the right).
On the bottom left click New site button and give it a name (e.g., WebMaps course)
On the right specify the:
- Protocol: SFTP
- Host: 164.92.179.32
- User: [your username]
- Password: [your password]
Click Connect

ZileZilla site manager window

14 / 25

Activity 2

Upload your website to FileZilla now

It should have a main index.html page, and an aboutme.html page.

15 / 25

Creating our first WebMap

We will create our first WebMap using the Leaflet library.

The Quick Start Guide assumes we have some knowledge of HTML.

Look in the zip resources provided for today.
Duplicate the file named template.html in resources_wk2/website/pages/
Rename it leaflet_example.html (or something clear) in the same folder.
Open leaflet_example.html in your code editor of choice (e.g., Notepad++)

Follow the instructions on the Quick Start Guide and integrate the resources (CSS, JS, HTML) into your file.

You must link two files and add some HTML, JS, and CSS as well.
As we covered last week, I strongly recommend you keep the CSS and JS in separate files from the HTML for simplicity for now.

16 / 25

A tale of two codes

Look in the provided resources/A_tale_of_two_codes to see the two files below (here abridged to fit):

    <head>
        <title>Integrated Leaflet WebMap</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"/>
        <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
        <style>
            #map { height: 180px; }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            var map = L.map('map').setView([51.505, -0.09], 13);
            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                maxZoom: 18, id: 'mapbox/streets-v11',
                tileSize: 512, zoomOffset: -1,
                accessToken: 'your.mapbox.access.token'
            }).addTo(map);
        </script>
    </body>

    <head>
        <title>Separated Leaflet WebMap</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"/>
        <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
        <link rel="stylesheet" href="separated.css"/>
    </head>
    <body>
        <div id="map"></div>
        <script src="separated.js"></script>
    </body>

/* separated.css */
#map { height: 180px; }

// separated.js
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18, id: 'mapbox/streets-v11',
    tileSize: 512, zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
}).addTo(map);

17 / 25

On the left the three, HTML, CSS, and JS are integrated.

On the right are the contents of separate files. The HTML, CSS, and JS.

Linking your files

In the <head>:

Webpage title
Link to Leaflet CSS
Link to Leaflet JS
Link to your CSS

In the <body>:

a <div id="something"></div> that will contain your WebMap.
below the above id:
- Link to, or provide, your JS

Just like we linked HTML to CSS and JS files, we can now link to HTML elements, using CSS and JS.

You will follow the directions for the following sections:

Preparing your page
Setting up the map
Markers, circles, and polygons
Working with popups
Do not do the last section on Dealing with events

Results?

If after all that work...
Grey WebMap
What's the problem? Use F12 - the developer console!

18 / 25

I will do an overview of the activity steps first.

Explain why this is doomed to failure.

Mapbox

As you've seen from the previous exercise, the tiles you are using belong to Mapbox, created from OSM data.

As we will not be generating our own tiles in this course we need to use someone's image tiles*. Mapbox's business is providing tools and resources, such as these tiles.

There are many sources of map tiles, many of which you must register and retrieve a key to be able to use.

If you exceed certain usage limits you will be cut-off and required to pay to continue.

Unless you have a popular site or WebMap you're unlikely to reach the non-free tiers from Mapbox or other services.

* We could make our own tiles, but that's beyond this course's scope.

Many alternative map sources exists to Mapbox:

Either update your L.tileLayer source (and attribution!) to an alternative source or register with Mapbox and update the accessToken.
Some alternative tile layers:

19 / 25

You can now go back to do the activity, you must choose whether to use the Mapbox tiles or another resource.

Feel free to ask each other for assistance, or myself.

Activity 3

Complete the Leaflet creation WebMap exercise

Use the instructions and code above and in the resources zip file to help you complete the tasks.

While adding following the tutorial you must think about what you are doing and not just copy code.

20 / 25

An alternative WebMap creation method using QGIS

We will dive straight into another activity. Making a WebMap of certain flight paths of your choice.

The process is as follows:

Import the data into QGIS
Select desired features
Change symbology of features
Install plugins (qgis2web & QuickMapServices)
Create/export WebMap

The data for this exercise is provided in the zipped resources provided for today.

Again, assure you unzip the data

Explore how to do the following activities in QGIS:

Add data (flight_paths_ALL_WGS84)
Open attribute table
Select feature/attributes using an expression
Export selection
Styling a layer's properties
Installing plugins
Adding a base map (QuickMapServices)
Export a WebMap (qgis2web)

21 / 25

Activity 4

Complete your QGIS WebMap

Here's a demonstration

You should replicate the process for an airport of your choice other than Luxembourg.

22 / 25

Upload both WebMaps from today

You must keep your individual WebMap files very organized in separate folders.

If your files for this course are a mess things will become much much harder to resolve for you.

Beyond just updating these two maps, you must update your main index.html file that we worked on first today, to point/link to the two new maps.

files tree structure

23 / 25

Homework

Today's exercises

Finish the exercises from today's lecture:

Replicating the Leaflet London map
Creating a flight paths map of an airport (except Luxembourg)

Replication

Create new WebMaps:

Using Leaflet manually create points of interest in Luxembourg
- Don't share any personal information
Using the QGIS plugin create a WebMap of any theme of your choice.

Upload to your server space

Upload the four WebMaps above to your server space.
All maps must be linked from your main index.html file.

24 / 25

Configuring a Ubuntu 22.10 Server on Digital Ocean

Install and configure Apache2

SSH in as root:

apt install apache2
apache2 -version
# Configure firewall
ufw allow 'Apache'
ufw allow 'OpenSSH'
ufw status
# activate firewall
ufw enable
ufw status
# it should show Apache and OpenSSH enabled
# check website in browser
# Note we are using http and not https
# update the main landing page
vim /var/www/html/index.html
# use newusers (for usage see: man newusers) to create users from file
# use the following format (we leave a few blank):
# name:passwd:uid:group:gecos:dir:shell
# cyrille:8t3n997zqb::student::/home/cyrille:

Users, pages, and sftp

# generate users from file contents
newusers students_list
# Enable user directories
a2enmod userdir
systemctl restart apache2
# make user dirs subdirectories 'visible' to Apache
chmod 755 /home/*
# Enable sftp for the user group 'students' in 
# From /etc/ssh/sshd_config comment out
Subsystem       sftp    /usr/libexec/openssh/sftp-server
# add
Subsystem       sftp    internal-sftp
# and add at the bottom
Match Group students # if doesn't work use 'User bob,joe,jim'
ChrootDirectory /home
X11Forwarding no
AllowTcpForwarding no
AllowAgentForwarding no
ForceCommand internal-sftp
PasswordAuthentication yes
# then restart the service
/etc/init.d/ssh restart

25 / 25

↑, ←, Pg Up, k	Go to previous slide
↓, →, Pg Dn, Space, j	Go to next slide
Home	Go to first slide
End	Go to last slide
Number + Return	Go to specific slide
b / m / f	Toggle blackout / mirrored / fullscreen mode
c	Clone slideshow
p	Toggle presenter mode
t	Restart the presentation timer
?, h	Toggle this help
o	Tile View: Overview of Slides

Introduction to WebMaps

Lesson 2: Building simple WebMaps and uploading them to a server

Dr. Cyrille Médard de Chardon

University of Luxembourg &Luxembourg Institute of Socio-Economic Research (LISER)

May 4, 2023

Everything looks like a nail

Valid WebMap applications

WebMap pyramid of requirements

Agenda for Lesson 2

Demonstration

Two HTML files

Creating an HTML start page

Activity 1

Making your landing page

Uploading to a server

Working on a server

URLs vs Server file paths

How to upload - Secure FTP

FileZilla

FileZilla configuration

Activity 2

Upload your website to FileZilla now

Creating our first WebMap

A tale of two codes

Linking your files

Results?

Mapbox

Activity 3

Complete the Leaflet creation WebMap exercise

An alternative WebMap creation method using QGIS

Activity 4

Complete your QGIS WebMap

Upload both WebMaps from today

Homework

Today's exercises

Replication

Upload to your server space

Configuring a Ubuntu 22.10 Server on Digital Ocean

Install and configure Apache2

Users, pages, and sftp

Everything looks like a nail

Help

Introduction to WebMaps

Introduction to WebMaps

Lesson 2: Building simple WebMaps and uploading them to a server

Dr. Cyrille Médard de Chardon

University of Luxembourg &Luxembourg Institute of Socio-Economic Research (LISER)

May 4, 2023

Everything looks like a nail

Valid WebMap applications

WebMap pyramid of requirements

Agenda for Lesson 2

Demonstration

Two HTML files

Creating an HTML start page

Activity 1

Making your landing page

Uploading to a server

Working on a server

URLs vs Server file paths

How to upload - Secure FTP

FileZilla

FileZilla configuration

Activity 2

Upload your website to FileZilla now

Creating our first WebMap

A tale of two codes

Linking your files

Results?

Mapbox

Activity 3

Complete the Leaflet creation WebMap exercise

An alternative WebMap creation method using QGIS

Activity 4

Complete your QGIS WebMap

Upload both WebMaps from today

Homework

Today's exercises

Replication

Upload to your server space

University of Luxembourg &
Luxembourg Institute of Socio-Economic Research (LISER)

University of Luxembourg &
Luxembourg Institute of Socio-Economic Research (LISER)