Spatial analysts and decision makers are in growing need of interacting with maps as a visualization method of representing spatial information. CartoCSS is a style encoding which allows high-level of customization for cartographic aspects of a map. In this paper, we look at CartoCSS encoding as a styling option to render complex symbols. We also review its functionality in different environments including web, mobile, and desktop computers.
Geospatial data inherently contains
location-related digital information. Styling
geospatial data and using symbols can be
considered as the only way of portraying
geospatial data as a map (Guo, Long, & Ji).
Various map makers are using different
symbols and terminologies for the same
feature. The Semantic Portrayal Ontology
has been developed to increase the
reusability of portrayal information between
different map makers
Customizing the cartographic aspects of a
map especially for composite symbols based
on Semantic Portrayal Ontology developed
by Open Geospatial Consortium (OGC)
Testbed 13
We styled a map using data in Shapefile format that represents the Daara Refugee Camp. We created a representation using the result of applying CartoCSS encoding on Kosmtik (Orgs, 2017). Styling bridges as composite symbols with a different appearance at different zoom levels is the main outcome of this article. To achieve our goal, we present bridges as double border lines with angled lines at the start and end points of each bridge’s borderline. Bridges are defined by a single polyline in the middle of the street or road. In figure 1-a, the red dashed line is the bridge’s polyline in the Shapefile, but we have to present the bridge as the blue collection of lines (the desired symbol). By using SLD or CSS instead of CartoCSS, we can draw the angled lines and control their geometry by the predefined geometry element. However, in CartoCSS it would be a challenge because we cannot draw a new line and control its 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 1-f. Actually, in the first step, two parallel polylines are drawn along the central polyline of bridge with an offset equal to the half of road width. Then, we used two sets of 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 polyline will be extracted first. Then, we placed created markers on the extracted first and last vertices of bridge’s polyline. It is worth mentioning that the central point of markers will be attached to the extracted vertices. In the third step, markers will be rotated based on the required angle, which is 45 degrees. Step four and five defined to translate and offset rotated markers to be placed on the first and last vertices of parallel polylines. This process is defined by 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 lines showing bridge’s border 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; Marke d) Step 3: Rotate markers transform: rotate (
45,0,0); marker-transform: rotate
(45,0,0); e) Step 4: Translate markers marker-t transform: translate (
2.5,0); f) Step 5: Offset markers marker-offset: 8;
We applied our methodology to style bridge composite symbols at different zoom levels. Figure 2-a and 2-b show the similar result of applying CartoCSS styling language to style bridges viewed by Kosmtik in Google Chrome and Internet Explorer at zoom level 14. Styled bridges at zoom level 17 is shown in Figure 2-c. Figure 2-d depicts the same concept in Smartphone browser for zoom levels 18 and 19. a) Styled bridges in Google Chrome version: 70. 0.3538.77 zoom level 14. b) Styled bridges in Internet Explorer version: 11.0.9600.18697 zoom level 14. c) Styled bridges in Internet Explorer version: 11.0.9600.18697 zoom level 17. d) Styled bridges in Huawei Mate 10 zoom level 18 (left) and zoom level 19 (right).
Rendering composite symbols and using customized cartographic styles is the goal of the current study. We developed the desired 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.
We want to acknowledge OGC Testbed 14
effort which this work is part of the OGC
Testbed 14 Por
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 dataset and symbol set, preprocessed the 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.