=Paper=
{{Paper
|id=Vol-2323/SKI-Canada-2019-7-6-5
|storemode=property
|title=Symbology Encoding Using CartoCSS to Support Complex Symbols
|pdfUrl=https://ceur-ws.org/Vol-2323/SKI-Canada-2019-7-6-5.pdf
|volume=Vol-2323
|authors=Soroush Ojagh,Sara Saeedi,James Badger,Steve Liang
}}
==Symbology Encoding Using CartoCSS to Support Complex Symbols==
https://ceur-ws.org/Vol-2323/SKI-Canada-2019-7-6-5.pdf
Spatial Knowledge and Information Canada, 2019, 7(6), 5
Symbology Encoding Using CartoCSS to
Support Complex Symbols
SOROUSH OJAGH SARA SAEEDI JAMES BADGER STEVE LIANG
Geomatics Engineering Geomatics Geomatics Geomatics Engineering
University of Calgary Engineering Engineering University of Calgary
Soroush.ojagh@ucalgary.ca University of Calgary University of Calgary Steve.liang@ucalgary.ca
ssaeedi@ucalgary.ca jpbadger@ucalgary.ca
Belgiu, 2018). It normally uses Styled Layer
ABSTRACT Descriptor (SLD) as a XML-based markup
language to style geospatial data (Landeta,
Spatial analysts and decision makers are in Vásquez, Rea, & García-Santillán, 2018).
growing need of interacting with maps as a However, it can use CSS-derived language
visualization method of representing spatial extension to style geospatial data instead of
information. CartoCSS is a style encoding SLD (Geoserver, 2018a). Styling composite
which allows high-level of customization for symbols using SLD and CSS can be done by
cartographic aspects of a map. In this paper, using defined geometry element of desired
we look at CartoCSS encoding as a styling feature (Geoserver, 2018b). Based on our
option to render complex symbols. We also knowledge, styling composite symbols has
review its functionality in different not been studied and applied by using
environments including web, mobile, and CartoCSS until now. In comparison to SLD,
desktop computers. CartoCSS is more compact and easier to
read and develop. So, we focused on using
1. Introduction Kosmtik as an external tool to render styles
developed by CartoCSS style encoding for
composite symbols in this study. Rendering
Geospatial data inherently contains
composite symbols such as bridges by using
location-related digital information. Styling
CartoCSS styling language is the main
geospatial data and using symbols can be
contribution of this study.
considered as the only way of portraying
geospatial data as a map (Guo, Long, & Ji).
Various map makers are using different 2. Methods and Data
symbols and terminologies for the same
feature. The Semantic Portrayal Ontology We styled a map using data in Shapefile
has been developed to increase the format that represents the Daara Refugee
reusability of portrayal information between Camp. We created a representation using
different map makers (Huang, Mansourian, the result of applying CartoCSS encoding on
& Harrie, 2017). Kosmtik (Orgs, 2017). Styling bridges as
Customizing the cartographic aspects of a composite symbols with a different
map especially for composite symbols based appearance at different zoom levels is the
on Semantic Portrayal Ontology developed main outcome of this article. To achieve our
by Open Geospatial Consortium (OGC) goal, we present bridges as double border
Testbed 13 (Fellah, 2017), is the primary lines with angled lines at the start and end
focus of this article. Styling geospatial data points of each bridge’s borderline. Bridges
is the only way to render data on a map. are defined by a single polyline in the
Geoserver is one of the mostly common middle of the street or road. In figure 1-a,
used open source map server (Mittlboeck & the red dashed line is the bridge’s polyline in
2 Symbology Encoding Using CartoCSS to Support Complex Symbols
the Shapefile, but we have to present the
d) Step 3: Rotate markers
bridge as the blue collection of lines (the Marke transform: rotate (-
desired symbol). By using SLD or CSS 45,0,0);
marker-transform: rotate
instead of CartoCSS, we can draw the angled (45,0,0);
lines and control their geometry by the
predefined geometry element. However, in
e) Step 4: Translate markers
CartoCSS it would be a challenge because marker-t transform: translate (-
we cannot draw a new line and control its 2.5,0);
geometry. So, to address this challenge, we
proposed an innovative method, and tried
styling the bridge’s composite symbols
through five steps illustrated in figure 1-b to f) Step 5: Offset markers
1-f. Actually, in the first step, two parallel marker-offset: 8;
polylines are drawn along the central
polyline of bridge with an offset equal to the Figure 1: Styling bridges as composite symbols by
half of road width. Then, we used two sets of CartoCSS styling language(Saeedi, 2018)
markers which are simple straight lines as
the angled lines of bridge’s symbol. In the
step 2, the first and last vertices of bridge’s 3. Results
polyline will be extracted first. Then, we
placed created markers on the extracted We applied our methodology to style bridge
first and last vertices of bridge’s polyline. It composite symbols at different zoom levels.
is worth mentioning that the central point of Figure 2-a and 2-b show the similar result of
markers will be attached to the extracted applying CartoCSS styling language to style
vertices. In the third step, markers will be bridges viewed by Kosmtik in Google
rotated based on the required angle, which Chrome and Internet Explorer at zoom level
is 45 degrees. Step four and five defined to 14. Styled bridges at zoom level 17 is shown
translate and offset rotated markers to be in Figure 2-c. Figure 2-d depicts the same
placed on the first and last vertices of concept in Smartphone browser for zoom
parallel polylines. This process is defined by levels 18 and 19.
showing the applied CartoCSS encodings in
Figure 1.
Figure Description
a) Desired composite symbol
for bridges: double border
lines with angled lines at the
start and end points of each
bridge’s borderline
b) Step 1: Portray two parallel a) Styled bridges in Google Chrome version: 70. 0.3538.77 zoom
lines showing bridge’s border level 14.
We used ::Background and
::Foreground ordering
features
c) Step 2: Place two sets of
markers in the first and last
vertex of bridge’s polyline
marker- placement: vertex-first;
marker-placement:
vertex-last;
Symbology Encoding Using CartoCSS to Support Complex Symbols 3
customized styles using CartoCSS styling
language and render the resulting map
using Kosmtik in different browsers and
devices. Controlling the order in which
features are being portrayed can be
considered as one of the fundamental needs
to portray spatial data. To the best of our
knowledge, it has not been addressed by
CartoCSS styling language until now. So, it
would be mentioned as the future direction
of the current study.
b) Styled bridges in Internet Explorer version:
11.0.9600.18697 zoom level 14.
Acknowledgements
We want to acknowledge OGC Testbed 14
effort which this work is part of the OGC
Testbed 14 Portrayal project (Saeedi, 2018).
Author contributions
This paper is part of the OGC Testbed 14
portrayal project which is implemented at
the Geo-Web Sensor lab, University of
Calgary. Soroush Ojagh imported the
c) Styled bridges in Internet Explorer version: dataset and symbol set, preprocessed the
11.0.9600.18697 zoom level 17.
dataset, implemented the portrayal
methodology and wrote the paper. Dr. Sara
Saeedi who is the main editor of the OGC
Testbed 14 Symbology Engineering Report
contributed regarding the portrayal
methodology and the final paper structure.
James Badger developed the web
application and web map service and
participated in different steps of the
project/paper. Dr. Steve Liang supervised
the project and also contributed regarding
the final paper edits.
References
d) Styled bridges in Huawei Mate 10 zoom level 18 (left) and
zoom level 19 (right).
Fellah, S., Mitchell, E., Giannecchini, S.
Figure 2: Showing the results of applied stylesheets in different
zoom levels and devices (2017). OGC Testbed-13: Portrayal
Engineering Report. OGC 17-045.
Retrieved from
4. Conclusion http://docs.opengeospatial.org/per/
17-045.html
Rendering composite symbols and using Geoserver. (2018a). CSS Styling. Retrieved
customized cartographic styles is the goal of from
the current study. We developed the desired https://docs.geoserver.org/latest/en
/user/styling/css/index.html
4 Symbology Encoding Using CartoCSS to Support Complex Symbols
Geoserver. (2018b). Geometry Publication and Visualization of
transformations in SLD. Retrieved Geoservices Using Open-Source
from Tools. Paper presented at the
https://docs.geoserver.org/stable/e Conference on Information
n/user/styling/sld/extensions/geom Technologies and Communication of
etry-transformations.html Ecuador.
Guo, X., Long, Y., & Ji, W. THE DEFINED Mittlboeck, M., & Belgiu, M. J. I. J. o. G.
SYSTEM OF MAP SYMBOL BASED (2018). GeoS4S Module OpenGIS
GEOLOGICAL SUBSTANCES. and Spatial Data Infrastructure.
Huang, W., Mansourian, A., & Harrie, L. 14(3).
(2017). Geospatial data integration Saeedi, S., Ertz, O., Giannecchini, S., Aime,
and visualisation using Linked A., Jantaraweragul, G., Yutzler, J., St-Louis,
Data. Paper presented at the 4th J., Badger, J., Ojagh, S., Liang, S., Chassin,
Association of Geographic T., Buehler, G. (2018). OGC® Testbed-14:
Information Laboratories for Europe Symbology Engineering Report. OGC 18-
PhD School, AGILE PhD School 029. Retrieved from
2017. http://www.opengis.net/doc/PER/t14-
Landeta, P., Vásquez, J., Rea, X., & García- D029
Santillán, I. (2018). Edition,