Web GIS
By Omar Kawach
Making a beautiful map requires a lot of effort. If your map is only for illustration, you may only need a printed or static digital version.
However, expectations have evolved. People today expect their maps to be more engaging, interactive, and accessible. They are looking for maps with dynamic content that encourage exploration and provide more profound insights.
Web GIS can help with that, but depending on what you're trying to achieve, implementing Web GIS at your organization can get quite technical.
Web GIS combines the power of the browser and GIS tools for capturing, storing, and analyzing spatial data, enabling users to access spatial data from anywhere, on any device.
Below are some key considerations for a successful Web GIS based mapping application:
- Choose a web mapping library that suits your needs
- Decide on a frontend web development framework
- Assuming your data has already been preprocessed and ready for publishing, consider where you will host your data
- Client side or server side?
Web mapping libraries
To include maps in a web application, the easiest and most common way is through mapping libraries. Mapping libraries provide out-of-the-box support for visualizations and interactions in maps. Common choices are as follows:
- Open-source libraries:
- Commercial libraries:
Choosing the best web mapping libraries that suit end user and developer needs is a crucial step for all web development involving maps and/or location services.
TIP
You should check out all the different lessons on this site for examples of a few of these libraries. The projections page uses D3, the scale page uses Leaflet and the types of maps page uses the ArcGIS Maps SDK for JavaScript. Leaflet and the JavaScript Maps SDK were used on this page too. You can usually tell which technology was used to author a web map by looking at the attribution at the bottom of the map.
Frontend frameworks
Your choice of a frontend framework can depend on the scale of the website you plan to host your web mapping application on. Some web maps can be quite simple like placing a point on a map to help customers find a business. For this, the application can be written quickly without extra tools, all you need is HTML/JavaScript/CSS.
TIP
If you're new to web development, you should read about the Document Object Model (DOM), HTML, JavaScript, and CSS.
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script src="script.js"></script>
</body>
</html>// Initialize the map and center on Victoria, BC
var map = L.map("map").setView([48.46, -123.36], 14);
// Add OpenStreetMap tiles
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© OpenStreetMap contributors",
}).addTo(map);
// Add a marker
L.marker([48.46, -123.36])
.addTo(map)
.bindPopup("Find our cafe here!")
.openPopup();#map {
height: 100vh;
width: 100%;
}What you saw above is great, but it's important to remember that there are organizations out there that intentionally build applications meant to scale with demands. If you want to scale quickly along with a team, writing a complex web application requires structure, organization, and maintainability.
Fortunately, you don't need to decide on structure and tooling yourself. Frameworks make app development easier by providing more structure to the way we write applications. They do come with a learning curve, but in return, you get a more maintainable codebase, reusable components, nice conveniences, and helpful tooling — which can really pay off as your project scales.
There are a lot of front-end frameworks to choose from. Some of the most popular are React, Vue, and Angular. There are some nuances, but generally, frontend frameworks encourage component-based/reusable code block architecture via a top-down, one-way data flow. In turn, frontend frameworks promote declarative code writing (e.g., more HTML and less JavaScript).
TIP
Be sure to read up on Node.js, npm, package.json, dependencies, devDependencies, and semantic versioning before you start working with frameworks.
<template>
<div>Hello World</div>
</template><script setup>
const msg = 'Hello World'
</script>Tooling
HTML/CSS/JavaScript are core features of modern web browsers. Frameworks like React or Vue extend these native web technologies.
Bundling tools like Vite optimize and prepare framework-based applications for browsers by reducing file sizes and splitting bundles.
Furthermore, adding TypeScript to frontend frameworks like React provides an improved developer experience. TypeScript's static typing adds a layer of safety to JavaScript development, reducing uncertainty and boosting confidence.
Rendering strategies
As opposed to client-side rendering (CSR), static site generators (SSG) like Astro, Nuxt, and Next.js offer advantages like simplified page routing and server-side rendering (SSR). However, mapping libraries are often problematic when integrated with SSR environments due to their reliance on the browser's window object, which is unavailable during SSR. You might find yourself needing to write workarounds when trying to use web mapping functionalities within SSG-based applications.
This is what could be done to get Leaflet to work in a SSG-based application.
<script setup>
import { onMounted } from 'vue';
let Leaflet;
onMounted(async () => {
// Import dynamically to avoid window not defined error in SSR
Leaflet = await import('leaflet');
// Check if window is defined
if (typeof window !== 'undefined') {
const map = Leaflet.map('map').setView([48.43, -123.36], 14);
Leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
Leaflet.marker([48.43, -123.36])
.addTo(map)
.bindPopup('Find our cafe here!')
.openPopup();
}
});
</script><script setup>
import { onMounted } from 'vue';
// Direct import in CSR
import * as Leaflet from 'leaflet';
onMounted(() => {
const map = Leaflet.map('map').setView([48.43, -123.36], 14);
Leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
Leaflet.marker([48.43, -123.36])
.addTo(map)
.bindPopup('Find our cafe here!')
.openPopup();
});
</script>You won't allows need to write this kind of workaround. See VitePress <ClientOnly> or Astro client directives for simpler examples.
TIP
This site was built with VitePress which is a Vite and Vue powered SSG. You can check out all the code for this site here.
Framework-based mapping libraries
There are a growing number of JavaScript mapping libraries as React, Angular, web, or Vue components. Some notable component libraries are:
- Open-source:
- Commericial libraries:
The challenge with mapping libraries lacking framework-agnostic web components is that committing to one framework can make switching difficult, or the library might not even offer support for your desired framework. This scenario often requires you to build all the necessary UI components yourself.
What are web components?
Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML. Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.
Backend and hosting
Test your knowledge
For a simple web map to display a business location, which might be sufficient?