Richard Wen [email protected]

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

1. Install Node.js
2. Install express-generator globally -g with npm
3. Check that the express command works by using the -h help option

npm install -g express-generator
express -h

Using the installed software, we can then create an express project folder with the express 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 a command line interface or terminal:

Create an express project with the express 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 with express --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 structured package file holding all the dependencies and information about your project (can be modified with the npm 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 containing JavaScript code files to be served to clients
  • /stylesheets: folder containing Cascading 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 defining routes that direct how the server responds to client requests (these files are often used in file app.js)
  • index.js: defines the response to client requests at <address>/ depending on how it is used in file app.js
  • users.js: defines the response to client requests at <address>/users depending on how it is used in file app.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 in Step 2.2:

cd <project_name>

Inside your <project_name> folder, install the dependencies with npm, 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.

Install leaflet with npm install and save it as a dependency --save to package.json:

npm install --save leaflet

Create a file for the leaflet map by sending an empty line with echo. into > a file called webmap.js:

echo. > webmap.js

Open webmap.js for editing and add the following JavaScript code:

// Import the leaflet package
var L = 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 in
var map = 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 address
L.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 added webmap.js file.

Notice that in the code of Section 4.3, a divider <div> with the id map is required to create the leaflet webmap.

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

• Notice that we added a divider with id map 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>
	<meta charset="utf-8"/>
	<title>GGL Leaflet Webmap Tutorial</title>
	<link rel="stylesheet" href="stylesheets/style.css">
</head>

<body>
	<div id="map"></div>
</body>


</html>

Save the modified public/index.html file.

Since webmap.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 the public folder in order to display in the browser.

Install browserify globally -g with npm install:

npm install -g browserify

After installing browserify, we can build and bundle the leaflet code from webmap.js into public/javascripts/webmap.js with the browserify command:

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

For convenience, we can add the browserify bundling command under scripts: build in the file package.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 to webmap.js:

npm run build

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

Replace the public/index.html code with the following:

<html>

<head>
	<meta charset="utf-8"/>
	<title>GGL Leaflet Webmap Tutorial</title>
	<link rel="stylesheet" href="/stylesheets/style.css">
</head>

<body>
	<div id="map"></div>
	<script src="javascripts/webmap.js"></script>
</body>

</html>

Save the modified public/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 in node_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 open public/index.html and edit/save it to include the stylesheets/leaflet.css file:

<html>

<head>
	<meta charset="utf-8"/>
	<title>GGL Leaflet Webmap Tutorial</title>
	<link rel="stylesheet" href="stylesheets/style.css">
	<link rel="stylesheet" href="stylesheets/leaflet.css">
</head>

<body>
	<div id="map"></div>
	<script src="javascripts/webmap.js" charset="utf-8"></script>
</body>


</html>

It is also important to include the CSS file into your build script in package.json so that it is updated everytime you rebuild webmap.js with npm 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 the public/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 modified public/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 port 3000 on localhost, 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 pressing Ctrl + C and then answering yes to the user prompt asking for termination.