Topic: - The web map design: characteristic and realization on MapBox platform

Name: - Netra Bahadur Katuwal

Student Id: - 2019276190033

Subject: - Advanced Topics in Cartography

Submitted to: - Prof. Tinghua Ai

Class: - 2019

Grade: - Master

Major: - Photogrammetry and Remote Sensing

LIESMARS, Wuhan UNIVERSITY

Web mapping and the use of geospatial information online have evolved rapidly over the past few
decades. There has been increasing interest in developing online map services using Google,
Yahoo, Bing etc. The purpose of this study is to shows the workflows of designing interactive web
map on open-source platform Mapbox. Mapbox is an open-source library provide by American
with custom online maps for websites in 2010. In recent years, Mapbox is used for designing
interactive web map. The design principle of web map is different from design of paper map. The
most common kinds of web maps, “Slippy Maps” is widely used.

Introduction

Web Map

Web mapping is overlooking geographic information over the world wide web(www), including
the presentation of general purpose of maps to display locations and geographic backdrops. In
1996 MapQuest was lunched the first well known web mapping service. After that there are a lots
of web mapping services companies like Google and Yahoo have come online with
mapping(Stopper, Iosifescu Enescu, Wiesmann, & Schnabel, 2012). In recent decades, web
mapping plays important role in cartography. Web mapping made cartography go through massive
change and major paradigm shift in cartography(Strode, 2012). Web mapping is the starting point
of modern cartography. A digital map is not a web map because digital map is on a computer, but
may not be available by internet and it is static. Web map depends on the internet. Most of web
map is interactive and not always self-contained(Roth, Ross, & Maceachren, 2015). There are two
concepts for web mapping is tiles and geographic features. Tiles is a gridded image used for
basemaps and geographic features which can be point, line and polygon are used for displaying
thematic layers. Tiles are non-interactive and static, while geographic features layers shows
dynamic change and shows user interaction. After the arrival of web mapping, related
modernization came up with the support of newly released technologies.

Web mapping technologies is a popular term in modern cartography. It is usually to describe the
compilation of APIs, libraries, services, etc.(Gu, 2016), which force cartographer to keep the pace
of new technologies. Web map can be built with the invent of new technologies on the web, such
as HTML, JavaScript, CSS, SVG, and XML web standards and Python programming language.
The most common widely used web maps is slippy maps. This type of maps you are used to like
Google’s: you can zoom in and zoom out, grab and pan the map. Open Geospatial Consortium
(OGC) is an international consortium plays to address the interoperating problems, OGC
developed a non-proprietary web mapping approach based on open interface, encodings, and
schemas(Stopper et al., 2012).

Web Map Service (WMS): - displays an image (gif, jpeg, png) of vector or raster data. And
standard web URL is used to make requests.

Web Feature Service (WFS): - provides access to vector data (output in Geography Markup
Language(GML))

Web Coverage Service(WCS): provides access to metadata of geodata and services.

Web Processing Service(WPS): provides access to remote GIS operations (for example Buffer,
distance calculation, coordinate transformation) responses are standard-based messages.

Types of web map

First time the web maps can be classified by Kraak in 2001. He differentiated static and dynamic
web maps and further divided in to interactive and view only web maps. Nowadays there are
number of dynamic and static map sources.

1. Static web map: - Static web maps can be view only without interactivity. The
scale of the map can’t be changed and these files are created once, often manually,
and infrequently updated.
2. Dynamically Created web map: - This map generated on the fly when user loads
the associated web page. The choice of whether to publish a static map or a dynamic
map should be depending up on how frequently the map data change.
3. Animated web maps: - Animated web maps are most often associated with the
display of snapshots of the same map variable taken at different times.
4. Interactive web maps: - Including the ability to change the map’s extent through
zooming and panning.
5. Analytic web maps: - The application of this map is that enabled the public to
perform analyses that had previously only available to GIS professionals.
 6. Collaborative web maps: crowd sourcing like Open Street Map.

MapBox
MapBox is application for design map. Mapbox is an American provider of custom online maps
for websites. MapBox is a mapping startup that offers users a platform for making custom maps
based on OpenStreetMap and other open data. MapBox tools are building block that support every
part of the web mapping(Poli, Stoneman, Siburn, Bader, & Clarke, 2016). Your goal is to build
beautiful to match your website or full features of geographical map you can done converting
various background styles in MapBox. Vector tiling are used in MapBox which makes the map
scalable and fast. MapBox can be used some of the same work as ArcGIS online like hosting and
uploading data adding to a map but it is an open source platform that developers can integrate in
to their application. Now, MapBox is known as another examples of GIS. The application of
MapBox are Four-square, Lonely Planet, Facebook, The Financial Times, The weather channel
and Snapchat(Gu, 2016).
Once complete, you can integrate the maps into your website or other online platforms. The
developer can choose among several Mapbox-designed styles or design a custom style in the
graphical style editor of Mapbox Studio(Panek & Burian, 2020). You can build web map using
Mapbox either programming or no-programming.

Design principles for web Mapping

All the maps are representations. It is not possible to show features at their actual size nor is it
possible to show full details. A good map means that represent a place with precise geospatial
information and that can attract map reader’s attention to the significant information(Esri, 1996).
The principles of map design are visual contrast, legibility, balance, hierarchical organization and
figure-ground organization these are defined by Buckely in 2014. Visual contrast and legibility
influence on reading the content of map(Mokhtar, Nasron, Aziz, & Adnan, 2013). Balance,
hierarchical organization, and Figure-ground organization lead the map readers to focus on the
most important content of map.
1. Visual Contract: - Visual hierarchy which relates to how map features and page
elements contrast with each other and their background.
 2. Legibility: - graphic symbol must be easy to read and understand.
3. Figure-ground Organization: - is the spontaneous separation of the figure in the
foreground from an amorphous background.
4. Balance: - Balance involves the organization of the map and other elements on the
page. A well-balanced map page results in an impression of equilibrium and
harmony.
5. Hierarchical organization: - the structure of map including layout is fundamental
to help people read the map.

These principles are used for general map design. As for web mapping, we have to adhere to
following principles(Gu, 2016)

1. Perceivable: - the components of the map have to be perceivable to users, which is the
basis of the web map. It means all the information should be visible to users.
2. Operable: - users can get access to interact between the user interface and web map.
3. Understandable: - it means that the content of the web map should be easy to understand
for users.
4. Robust: - web map need to be stable for using and operating.

Implementation: Design of Web Map on MapBox Studio

Methodology

In recent years, MapBox is using in Modern Web application. MapBox is an open-source libraries
support the functionality of interactivity and control. MapBox is open in any web browsers like
google, Yahoo, Bing and Mozilla etc. MapBox is the mapping platform for developers. For web
map designing MapBox provides the custom map style tools. MapBox is provided by American
producer for map designing on websites in 2010. Its friendly user interface, it is easy and very
enjoyable deal with the whole process of map making from tile and datasets designing to map
publishing on internet. Now the following steps to design web map on MapBox are as follows: -
1. Data Source: - MapBox is an open-source platform. It is support data from different source
like OSM, Image data, Satellite Image and google earth. The data format that is support
by MapBox Studio are like KML, Shapefile(zipped), csv, GeoJSON, GPX, and MBTiles.
MapBox studio stored all the dataset in GeoJSON format. When you upload your data as
a dataset on your MapBox account, geometrics feature like point, line and polygons and
attributes can be edited, added, or removed in the Mapbox Studio dataset editor.
2. Create a new style: - After you download and examine your data, it’s time to create a new
style. You can go to MapBox Studio Style page. Click the New style button after that there
is different styles we find basic Template style and click Customize Basic Template.

 Add a new layer: - If you want upload the data, you need to add a new layer
to a map. After adding layer from the Layers tab the editor shows the map
in x-ray mode. These x-rays mode shows all the data in the sources added
to the style. New layer has list of data sources for the statedata source. Click
on the tileset for source of this New style layer. Mapbox Studio recognize
that the data you uploaded is focused on a different location, so it displays
the massage and click GO to data and map view focus on data.
3. Style a layer: - In MapBox Studio style editor is a tools for creating map styles. A style
editor is a set of rules which includes reference to data, map image (icons, markers,
patterns), fonts, color and most important how all your data should be styled on your map.
Style editor allows you to create a custom style by editing components, adding layers,
uploading custom icons, and publishing your styles.

4. Publishing a Map: - After finished styling your map, if you want publishing your map live
on the web click on the publish button on the editor tool after window will appeared on
the screen with some asking you to review your change like that and click on the publish
button. After publishing you can share this style in a web app, mobile app, or another third
party tool.
Result

Mapbox Studio is the Mapbox application for managing geospatial data and designing custom map
styles. Using Mapbox Studio to build and design a map to your exact specifications by uploading
and editing your own data, utilizing Mapbox-provided tilesets, adding custom fonts and icons, or
refining the built-in template map styles. The figure 1 gives the outlook of 3D map of building and
population density map respectively. 3D map used a full-extrusion layer in Type based on data
properties. For example, the extrusion height of the building change based on the “height” and
“min_height” of the building polygon.
Fig (1): - a) 3D map of Building b) 3D map of population

The figure 2 and 3 is different from the figure 1. In figure used the fill layer changes color based
on data properties. The design of thematic map is same as 3D map but only differ from the Select
data type function. In Thematic map design this field you choose the “fill” option. In figure 2 the
color of a sate changes based on the population in the data. The designing of the Topographic map
is different from the other you can use different symbol for different geographic features. For
designing figure 3 map you upload image of different features and editing different symbol on the
basis of these image. At the end, these map will be published and share on the website.

Fig 2: - Thematic Map Fig 3: - Topographic map

This paper shows the designing an interactive web map based on the open-source platform Mapbox
studio. The graphical design of web map is simpler than the design of a paper map so that it
conveys the desired information under the less than ideal conditions of low screen resolution,
increased viewing distance and shorter reading time. The web map designing principles is slightly
differing from paper map designing. Web technologies shows the map on internet. In 2010, first
time Mapbox used for web cartography. Mapbox tools are building block that support every part
of the web mapping and this paper providing recommendations and guidelines specific design of
web map on Mapbox studio platform. Mapbox is an open-source online mapping tool that makes
the design for web map convenient. This open-source method allow cartographer doing web
mapping on their own, which results in so many interesting applications come up. In this study,
good looking map can be easily design by Mapbox studio platforms. The problem in Mapbox is
that when you upload a data it only focused on United States not focused on data upload. The
further development is that the web map can used other style which can created by custom textures
rather than those default styles on Mapbox.

Acknowledge

In preparation for my assignment report, I had to take the help and guidance of some respected
persons, who deserve my deepest gratitude. I would like to show my gratitude to Professor Tinghua
Ai who introduced me to the Advanced Topics in Cartography Subject, on his lecture and also
show my gratitude to professor who introduced about map designing on Mapbox. In addition, I
would also like to expand my gratitude to all those who have directly and indirectly guided me for
complete writing this report and thanks for different journal and books where I take some
references which are in list.
References

Esri. (1996). Introduction to Map Design. Environmental System Research Institute, Inc, 1–19.
Retrieved from https://ctools.umich.edu/access/content/group/606292bf-f05b-4402-aaaa-
af1231754354/OUTSIDE_READINGS/THEMATIC_MAPPING/ESRI_Map_Design_Intro
.pdf%5Cnpapers2://publication/uuid/0AA17E8C-EDBE-434F-B39A-EEE92F0D64CF

Gu, C. (2016). Master Thesis Task of Master Thesis.

Mokhtar, E. S., Nasron, N., Aziz, B. A., & Adnan, N. A. (2013). GEO-SMS : WEB MAPPING.
(2004).

Panek, J., & Burian, J. (2020). Spationomy. Spationomy, (January). https://doi.org/10.1007/978-

Poli, D., Stoneman, L., Siburn, A., Bader, W., & Clarke, E. (2016). Using MapBox Software to
Help Students See Trends in Biology. The American Biology Teacher, 78(5), 426–427.
https://doi.org/10.1525/abt.2016.78.5.426

Roth, R. E., Ross, K. S., & Maceachren, A. M. (2015). Crime Analysis. 262–301.
https://doi.org/10.3390/ijgi4010262

Stopper, R., Iosifescu Enescu, I., Wiesmann, S., & Schnabel, O. (2012). Open Geospatial
Consortium (OGC) and Web Services (WMS, WFS). Cartography for Swiss Higher
Education (CartouCHe). Retrieved from http://www.e-
cartouche.ch/content_reg/cartouche/webservice/en/text/webservice.pdf

Strode, G. (2012). The GIS behind imapinvasives: The “open source sandwich.” In Lecture
Notes in Geoinformation and Cartography. https://doi.org/10.1007/978-3-642-27485-5_6

https://docs.mapbox.com/help/how-mapbox-works/
https://docs.mapbox.com/help/tutorials/
https://en.wikipedia.org/wiki/Web_mapping

routledge.com/Web-Cartography-Map-Design-for-Interactive-and-Mobile-Devices-
1stEdition/Muehlenhaus/p/book/9781439876220