1

30/1/2023
Web Mapping
Web Mapping
UMESH BHURTYAL
PASHCHIMANCHAL CAMPUS
 2

30/1/2023
Web Mapping
Web mapping: 4 Hrs
► Introduction, History of web maps, types of web maps-static, dynamic, animated,
interactive, and collaborative
► Client and server technology for web mapping, interoperability, OGC standards
for web mapping
History of web map 3

► maps were routinely printed on paper

30/1/2023
Web Mapping
► Web has fundamentally changed how maps are accessed, distributed, and produced
► Stage 1:
► During the Web’s early years, existing paper maps were digitally converted into .jpg or .gif
images that were stored and retrieved via the Web.
► Stage 2:
► developments in technology and the evolution in computer languages allowed interactivity
and animation to take place via the Web.
► Stage 3:
► Web has the potential to deliver a considerable range of mapping products. As technology
leaps forward with increasing sophistication, the kinds of mapping products that will be
available in the future are left to the inventiveness of the larger map user community.
Difference between Digital and Web Map? 4

30/1/2023
Web Mapping
► Digital- involves a computer, but not be accessible via the internet
► Web Map- a type of digital map that is accessible in a web browser:
► Maps.google.com
► Openstreetmap.org
► Web maps are connected to but different from maps made for mobile devices or
for a digital globe (google Earth)
► Development really took off the emergence of google maps
► Many different platforms exist now
The Internet and WWW 5

► the World Wide Web and the Internet are not synonyms

30/1/2023
Web Mapping
► Internet is a series of interconnected networks whose purpose can be thought of as
transferring files back and forth.
► A technical definition of the World Wide Web is : all the resources and users on the
Internet that are using the Hypertext Transfer Protocol (HTTP).
WWW Operation 6

30/1/2023
Web Mapping
WWW works on client- server approach.
Following steps explains how the web works:
► User enters the URL (say https://www.ioepas.edu.np/ ) of the web page in the address
bar of web browser.

► Then browser requests the Domain Name Server for the IP address corresponding to
https://www.ioepas.edu.np/ .

► After receiving IP address, browser sends the request for web page to the web server
using HTTP protocol which specifies the way the browser and web server
communicates.
WWW Operation 7

⮚ Then web server receives request using HTTP protocol and checks its search for the requested web

30/1/2023
Web Mapping
page. If found it returns it back to the web browser and close the HTTP connection.

⮚ Now the web browser receives the web page, It interprets it and display the contents of web page in
web browser’s window.
Software's and Technological 8

Development

30/1/2023
Web Mapping
Web Map 9

30/1/2023
Web Mapping
► web map: A map that is published and accessed via the internet, usually as part of
a web page
► "Web mapping is the process of designing, implementing, generating and
delivering maps on the World Wide Web.
► web mapping can be regarded as a major new trend in cartography
► Web maps are powered by the web
Web map powered by the WEB 10
► Web technology: web maps are built with the technology of the web, such as HTML,

30/1/2023
Web Mapping
JavaScript, and CSS.
► Server-side communication: a web map might rely on the internet to provide its data
(say, stored in an online database) or perform calculations. This means that web maps
can contain vastly more information than can possibly be presented to you at any single
moment.
► Drawing from outside sources: on the web it’s not always necessary to collect all data
sources in one place before mapping them—the map itself is that collection. Many data
providers have APIs into which a map can tap directly every time a user views the map,
eliminating the need to download all that data beforehand.
► Real-time data: being connected to the internet, many web maps make use of real-time,
live data feeds so that they are constantly up to date on whatever they’re showing.
Dynamically Created Web Map 11

30/1/2023
Web Mapping
► are generated on-the-fly, rather than being pre-generated and stored on a server
► created using web mapping technologies such as JavaScript, which allows the
map to be updated in real-time based on user interactions or changes in the
underlying data
► These type of maps are built using web mapping libraries such as leaflet,
OpenLayers, Google Maps JavaScript API, Mapbox GL JS, and others.
► Examples: real time traffic maps, weather maps, traffic maps, social media maps,
geolocation based maps, sensors maps
Dynamically Created Web Map 12

30/1/2023
Web Mapping
► commonly used in GIS (Geographic Information Systems), which are used to
store, manage, and analyze geographic data.
► GIS web mapping platforms such as ArcGIS Online, QGIS, and Mapbox allow
users to create interactive maps with a variety of data sources, including
shapefiles, geojson, and GeoTIFFs, and can be easily integrated into web
applications and mobile apps.
► Used for for a wide range of applications, including transportation, emergency
management, and weather forecasting.
Distributed web maps 13

30/1/2023
Web Mapping
► are distributed across multiple servers and locations, rather than being hosted on a
single server or centralized location
► faster and more reliable access to the maps,
► as well as the ability to handle a larger number of users and requests.
► Distributed web maps can be implemented using a variety of technologies, such as
web map tile servers, Content Delivery Networks (CDNs), and distributed
databases.
► Some examples of distributed web maps include Google Maps, OpenStreetMap,
and Mapbox.
Web map tile services 14

30/1/2023
Web Mapping
► https://www.youtube.com/watch?v=_do0Mc5uYzs
► https://www.youtube.com/watch?v=ufygsABmg8E
► Web map tile services are a type of service that allows for the delivery of map
data as small, pre-rendered square images called "tiles."
► Web map tile services are typically built on top of a tile server, which is
responsible for rendering the map data into tiles and delivering them to the client.
Advantages of web map tile services 15

30/1/2023
Web Mapping
► Web map tile services have several advantages over traditional web mapping
approaches, such as:

► Improved performance: Because the map data is pre-rendered and delivered as small
images, it can be delivered to the user more quickly and with less latency.
► Offline support: Web map tile services can be used to provide offline support for
maps, allowing users to access maps even when they do not have an internet
connection.
► Customizable styling: Web map tile services can be easily customized to match the
branding and styling of a website or application.
► Some popular web map tile services include OpenStreetMap, Google Maps, and
Mapbox.
Content delivery network 16

► A Content Delivery Network (CDN) is a system of distributed servers that are

30/1/2023
Web Mapping
located in multiple geographic locations.
► work together to deliver content to users based on their geographic location, in
order to reduce latency and improve the performance of online content and
applications.

Benefits Of Using CDN:-

⮚ Generally, it Improves the website load time
⮚ Improves content accessibility across the globe
⮚ Reducing bandwidth costs
⮚ Increasing content availability and redundancy
⮚ Improving website security

https://www.youtube.com/watch?v=RI9np1LWzqw
Animated Web maps 17

30/1/2023
Web Mapping
► Animated web maps are a type of web mapping application that incorporates
animation to display changes in the data over time.
► built using web mapping libraries such as leaflet.js, OpenLayers, and Google
Maps JavaScript API, which provide the functionality to create interactive maps
and add animation to them.
► can make the map more engaging, however, if not used properly, it can also cause
confusion and make it harder to understand the data
► It's important to strike a balance between animation and readability.
Animated web maps 18

30/1/2023
Web Mapping
► There are several types of animation that can be used in web maps, including:
► Time-series animation: This type of animation shows changes in data over time, such
as the movement of a storm or the progression of a wildfire.
► Transition animation: This type of animation is used to smoothly transition between
different map views, such as zooming in or out, or panning to a different location.
► Particle animation: This type of animation is used to show the movement of particles,
such as air or water particles, or the movement of people or vehicles.
► Data-driven animation: This type of animation is driven by data, such as the
movement of vehicles on a map or the progression of a traffic jam.
► Animated web maps can be useful for visualizing dynamic data, such as weather
patterns, traffic flow, or population movements.
Online Atlases 19

30/1/2023
Web Mapping
► digital versions of traditional paper atlases, which are available on the Internet for
users to access and view
► typically interactive, allowing users to zoom in and out, pan, and view detailed
information about different locations.
► include a wide range of information, such as maps, satellite imagery, street maps,
terrain, and points of interest
► include additional features such as markers, pop-ups, and layers, which can be used
to display additional information or allow for user interaction.
Online atlases 20

30/1/2023
Web Mapping
► Some online atlases may be created by government agencies, such as the USGS
(United States Geological Survey) and the US Census Bureau, while others may
be created by private companies, such as Google Maps and Bing Maps. Some
online atlases also allow users to create their own maps and share them with
others, such as OpenStreetMap.
► has wide range of applications, including navigation, planning, research, and
education. They can be accessed by anyone with an internet connection, making
them a convenient and accessible source of geographic information.
Collaborative web map 21

30/1/2023
Web Mapping
► a type of web mapping application
that allows multiple users to
access, edit, and share geographic
data in real-time.
► built using web mapping libraries
such as leaflet.js, OpenLayers, and
Google Maps JavaScript API,
which provide the functionality to
create interactive maps and add
real-time collaboration features.
Collaborative web map 22

30/1/2023
Web Mapping
► Collaborative web maps typically have several key features, including:
► Real-time data synchronization: This feature allows multiple users to view and edit the
same data at the same time, and see each other's changes in real-time.
► Multi-user editing: This feature allows multiple users to edit the data on the map
simultaneously. Users can add, remove, or edit features such as points, lines, and
polygons, and their changes will be immediately visible to other users.
► Chat and messaging: This feature allows users to communicate with each other in
real-time, which can be useful for team coordination and disaster response.
► Access control: This feature allows the administrator to control who can access, edit
and share the data on the map.
► Versioning: This feature allows users to view and revert to previous versions of the
data, in case of an error or unwanted change.
OGC 23

30/1/2023
Web Mapping
► The OGC is the Open Geospatial Consortium, an international consortium of
companies, government agencies, and research organizations that develops and
promotes standards for geospatial and location-based services.
► The OGC standards ensure that diverse geospatial systems can work together and
provide seamless access to a broad range of spatial data and services.
► mission of the OGC is to develop, approve, and maintain standards for making
your maps and related geographic data available and shareable over the web
► open services and encodings help improve the sharing and interoperability of
geospatial information
► https://www.youtube.com/watch?v=bfkCdir-yO8
► http://learningzone.rspsoc.org.uk/index.php/Learning-Materials/Introduction-to-O
GC-Standards/1.1-What-is-the-OGC
Interoperability 24
► Interoperability is the ability of interacting with various sources to share

30/1/2023
Web Mapping
information and data, even between varying infrastructures

A possible solution to this problem is to use an

adapter which converts one standard into
another standard. In this case, the adapter will
accept a device with a British plug to work
with a socket based on the Australian standard.
Interoperability 25

30/1/2023
Web Mapping
► Interoperability has many benefits including:

► Provides flexible access to data - easy, quick, and effecient way to acquire data across
multiple platforms.
► Increases data efficiency – The data is ready to use anywhere, making it cheaper,
quicker and easier to use data. Data can also be available from multiple sources.
► Reduces risks and costs associated with acquiring and using data from different
sources.
► Cross-platform compatibility aids in data usability and efficiency.
OGC Standards 26
► Web Map Service (WMS): A standard for serving geospatial data as maps over the

30/1/2023
Web Mapping
internet.
► Web Feature Service (WFS): A standard for serving geospatial data as vector features
over the internet.
► Web Coverage Service (WCS): A standard for serving geospatial data as coverages (e.g.,
satellite imagery) over the internet.
► Geography Markup Language (GML): An XML-based language for encoding
geographic information.
► Simple Feature Access (SFA): A standard for accessing and manipulating vector data.
► Sensor Web Enablement (SWE): A set of standards for integrating sensor networks and
systems with geospatial information systems.
These and other OGC standards help to ensure that diverse geospatial systems can work
together and provide seamless access to a broad range of spatial data and services.
https://www.youtube.com/watch?v=9k-7kp1midM
SDI 27

30/1/2023
Web Mapping
► Spatial Data Infrastructure (SDI) refers to a framework of technologies, policies,
and standards that support the management, distribution, and use of geospatial
data. It includes the data, metadata, software tools, and services that are needed to
create, store, access, and analyze geospatial information.
► The goal of an SDI is to provide seamless access to a wide range of spatial data,
regardless of where it is stored or how it is produced, and to facilitate the
integration of geospatial information into various applications and processes.
SDI 28

30/1/2023
Web Mapping
https://gistbok.ucgis.org/bok-topics/spatial-data-infrastructures