Repository files navigation

Richard Wenrrwen.dev@gmail.com

A tutorial for creating a leaflet webmap with express in Node.js

1. InstallNode.js
2. Installexpress-generator globally-g withnpm
3. Check that theexpress command works by using the-h help option

npm install -g express-generatorexpress -h

Using the installed software, we can then create an express project folder with theexpress command. This folder will contain all the code required to serve our web pages as Hyper Text Markup Lanauge (HTML)[https://www.w3schools.com/html/] files.

Open acommand line interface or terminal:

Create an express project with theexpress command, replacing<project_name> with the name of your project:

• <project_name> should be a valid folder name with no spaces and starting with a letter

express <project_name> --no-view

A folder named<project_name> will be created with the following structure inside (note that the structure may change withexpress --version that is not 4.16.0):

• app.js: JavaScript file that contains code needed to create and run your express server or application
• package.json:JSON structuredpackage file holding all the dependencies and information about your project (can be modified with thenpm command)
• /bin: folder containing executable code
  • www: executable file for starting the server
• /public: folder containing files served to the client side or front end
  • index.html: landing page served to the clients
  • /images: folder containing images to be served to clients
  • /javascripts: folder containingJavaScript code files to be served to clients
  • /stylesheets: folder containingCascading Style Sheets (CSS) files to be served to clients
    • style.css: CSS file used to define how your web page elements will look
• /routes: folder containing JavaScript files for definingroutes that direct how the server responds to client requests (these files are often used in fileapp.js)
  • index.js: defines the response to client requests at<address>/ depending on how it is used in fileapp.js
  • users.js: defines the response to client requests at<address>/users depending on how it is used in fileapp.js

After generating our project folder, we need to install the required Node.js package dependencies for express.

Move into the project folder, where<project_name> is the name of the folder you created inStep 2.2:

cd <project_name>

Inside your<project_name> folder, install the dependencies withnpm, where a folder called/node_modules will contain the code files of the installed dependencies:

npm install

We can then create a JavaScript file that stores the code for our leaflet web map. Keep in mind that this code requires Node.js which is only available inside the server or back end.

Installleaflet withnpm install and save it as a dependency--save topackage.json:

npm install --save leaflet

Create a file for the leaflet map by sending an empty line withecho. into> a file calledwebmap.js:

echo. > webmap.js

Openwebmap.js for editing and add the following JavaScript code:

// Import the leaflet packagevarL=require('leaflet');// Creates a leaflet map binded to an html <div> with id "map"// setView will set the initial map view to the location at coordinates// 13 represents the initial zoom level with higher values being more zoomed invarmap=L.map('map').setView([43.659752,-79.378161],20);// Adds the basemap tiles to your web map// Additional providers are available at: https://leaflet-extras.github.io/leaflet-providers/preview/L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',{attribution:'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',subdomains:'abcd',maxZoom:21}).addTo(map);// Adds a popup marker to the webmap for GGL addressL.circleMarker([43.659752,-79.378161]).addTo(map).bindPopup('MON 304<br>'+'Monetary Times Building<br>'+'341 Victoria Street<br>'+'Toronto, Ontario, Canada<br>'+'M5B 2K3<br><br>'+'Tel: 416-9795000 Ext. 5192').openPopup();

Save the addedwebmap.js file.

Notice that in the code ofSection 4.3, a divider<div> with the idmap is required to create the leaflet webmap.

Openpublic/index.html for editing and replace everything with the following HTML code:

• Notice that we added a divider with idmap to create our leaflet webmap in
• Note that the width and height of the divider must be set for the webmap to show (we will do this later in a CSS file)

<html><head><metacharset="utf-8"/><title>GGL Leaflet Webmap Tutorial</title><linkrel="stylesheet"href="stylesheets/style.css"></head><body><divid="map"></div></body></html>

Save the modifiedpublic/index.html file.

Sincewebmap.js is not served to the client side and requires the server's backend software to run, it needs to be built into client side code and stored inside thepublic folder in order to display in the browser.

Installbrowserify globally-g withnpm install:

npm install -g browserify

After installing browserify, we can build and bundle the leaflet code fromwebmap.js intopublic/javascripts/webmap.js with thebrowserify command:

browserify webmap.js -o public/javascripts/webmap.js

For convenience, we can add the browserify bundling command underscripts: build in the filepackage.json (saving after you add this code):

{"name":"project-name","version":"0.0.0","private":true,"scripts": {"start":"node ./bin/www","build":"browserify webmap.js -o public/javascripts/webmap.js"  },"dependencies": {"cookie-parser":"~1.4.3","debug":"~2.6.9","express":"~4.16.0","leaflet":"^1.4.0","morgan":"~1.9.0"  }}

This allows us to run the same command for bundling the leaflet code with a more convenient call everytime we make changes towebmap.js:

npm run build

You will now notice thatpublic/javascripts/webmap.js exists. This is the bundled version of your leaflet webmap source code, and will need to be added to thepublic/index.html file in order to display your webmap.

Replace thepublic/index.html code with the following:

<html><head><metacharset="utf-8"/><title>GGL Leaflet Webmap Tutorial</title><linkrel="stylesheet"href="/stylesheets/style.css"></head><body><divid="map"></div><scriptsrc="javascripts/webmap.js"></script></body></html>

Save the modifiedpublic/index.html file.

A set of final touches need to be made for better web map appearance and for the leaflet code to display the map properly.

Leaflet requires a CSS file innode_modules/leaflet/dist/leaflet.css, which can be copied into the public folder that is served to the client:

cp node_modules/leaflet/dist/leaflet.css public/stylesheets/leaflet.css

You will have to also openpublic/index.html and edit/save it to include thestylesheets/leaflet.css file:

<html><head><metacharset="utf-8"/><title>GGL Leaflet Webmap Tutorial</title><linkrel="stylesheet"href="stylesheets/style.css"><linkrel="stylesheet"href="stylesheets/leaflet.css"></head><body><divid="map"></div><scriptsrc="javascripts/webmap.js"charset="utf-8"></script></body></html>

It is also important to include the CSS file into your build script inpackage.json so that it is updated everytime you rebuildwebmap.js withnpm run build:

{"name":"project-name","version":"0.0.0","private":true,"scripts": {"start":"node ./bin/www","build":"browserify webmap.js -o public/javascripts/webmap.js & cp node_modules/leaflet/dist/leaflet.css public/stylesheets/leaflet.css"  },"dependencies": {"cookie-parser":"~1.4.3","debug":"~2.6.9","express":"~4.16.0","leaflet":"^1.4.0","morgan":"~1.9.0"  }}

Since leaflet requires that the dimensions be specified for the webmap divider, we can can replace the contents of thepublic/stylesheets/style.css file with the following to define the width and height of the webmap:

body {padding:0;margin:0;}html,body,#map {height:100%;width:100%;}

Save the modifiedpublic/stylesheets/style.css file.

After going through steps 1 to 6, you should have a file structure that looks similar to the following (node_modules not shown):

Run the express server with the following command:

npm start

By default, express runs on port3000 onlocalhost, which can be accessed in the browser by going to:

http://localhost:3000/

Your browser should display a map that looks similar to the one below:

When you are done running the server, shut it down by pressingCtrl + C and then answeringyes to the user prompt asking for termination.