desres23.designandcommunication.net

Icons in general

When designing icons, start with a consistent grid to ensure alignment and visual stability. Use simple geometric shapes like circles and squares for a clean foundation. Ensure all edges, lines, corners, and curves are mathematically precise for a polished look. Maintain aesthetic unity with consistent design elements across all icons. Avoid unnecessary complexity – use details sparingly for clarity and recognition. Finally, add distinctive elements to make your icons unique and memorable. This is a short summary of what Smashing Magazine says about icon design. These principles apply to map icons as well and is a good starting point for creating my own icons.

OpenStreetMap Icons

OpenStreetMap has their own design language – it employs simple, straightforward icons that can be easily understood at a glance. They use a variety of shapes and colors to differentiate between different types of locations, such as parks, restaurants, and hospitals. There is a full list and guide on how these are implemented on the OSM Wiki.

While OSM is great for clarity, the design language of their icons and symbols feels a bit outdated compared to today’s design trends. So while it is a great resource for inspiration and checking on norms, I will design my icons differently than those from OSM.

Designing custom icons for Vanlifezone.com

Vanlifezone.com caters to people in the van life community, and the map I am building should display relevant information for this community. These will only be used for the points/nodes layer, since polygon/fill or line layers are better described with a key or accompanying text along the line or outline of the layer.

As you have seen in the previous blog post, I’ve already created a list of layers that I want to map. I searched the web for inspiration and found Apple Map’s solution for icons to be best in conveying information without convoluting the map unnecessarily. They use colored circles which enclose the symbols.

My icons were create from a mixture of custom icons (tent, wrench, storefront, key) and open source icons from tabler-icons.io. Special icons (article, warning, hotspot) are not contained in a white-bordered circle like the other icons. I wanted to differentiate these because on the one hand, they are user generated content, and on the other hand, they have higher importance on the map.

Icon density, clustering, and zoom levels

Another aspect of implementing icons into the actual web map is the consideration of zoom level for displaying the icons. This is crucial, as showing the icons at a very low zoom level (map is zoomed out far) can be overwhelming for the user, browser, and data transfer bandwidth. Showing icons too late, so at a high zoom level, will not be beneficial to the user, as they would have to zoom in way too far to see relevant information for an area.

I found that a zoom level of 8.5 – 9 is a good middle ground for these two issues.

Another aspect to consider with icon placement is the icon density. If the density of icons on a map is too high, it’s good practice to implement clustering to avoid overwhelming the user. Clustering groups nearby icons together to improve readability and user experience. As the user zooms in, clusters break apart to reveal individual icons, providing more detailed information. The clusters are visualized by a bigger circle, displaying the number of clustered points of interest in the middle.

If clustering wants to be avoided, another solution is to simply not show all icons at once. In Mapbox there is a setting to not allow icon overlap, so as the user zooms in more icons will become visible when more screen real estate is available.

https://wiki.openstreetmap.org/wiki/OpenStreetMap_Carto/Symbols

https://wiki.openstreetmap.org/wiki/Map_Icons

https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design

Map layers can come in various formats, each with its own advantages and nuances:

• GeoJSON This is a format for encoding a variety of geographic data structures. It supports point, line, and polygon geometries, making it a versatile choice for map layers.
• KML Short for Keyhole Markup Language, KML is an XML-based format for expressing geographic annotation and visualization. It is commonly used with Google Earth and other Google tools.
• Shapefile This format is widely used in GIS (Geographic Information System) software. It organizes geospatial data into a vector format that can be used to create map layers.
• GML Stands for Geography Markup Language, GML is an XML-based format for encoding geographic information, including both the geometry and properties of geographic features.

Choosing the right format for the map layers depends on your specific needs and the tools one is using. For my use case, I’m focusing on GeoJSON. This format comes with good javascript and database support, which are two important factors for the map I am working on. GeoJSON can not only store the geometries of a layer, but also data relating to these layers. This can be anything, but a typical structure for an OSM location may look like this:

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [16.3725, 48.208889]
  },
  "properties": {
    "name": "Stephansdom",
    "type": "cathedral",
    "amenity": "place_of_worship",
    "website": "<https://www.stephanskirche.at>",
    "osm_id": "way/17405764"
  }
}

As described earlier, map layers can generally be divided up into three different types or geometries:

• Point A point is a geographical coordinate – a single location in a coordinate space. It is defined by a pair of coordinates (longitude and latitude). Usage of the point geometry may include representing individual locations such as specific addresses, a landmark, or a point of interest.

{
  "type": "Point",
  "coordinates": [102.0, 0.5]
}

• Line(String) A LineString represents a series of connected points, forming a continuous line. It is defined by an array of two or more coordinate pairs. Lines can represent linear features such as roads, rivers, paths, or routes.

{
  "type": "LineString",
  "coordinates": [
    [102.0, 0.0],
    [103.0, 1.0],
    [104.0, 0.0],
    [105.0, 1.0]
  ]
}

• Polygon A Polygon represents an area enclosed by a series of connected points, forming a closed loop. It is defined by an array of LinearRings, where the first and last coordinate pairs must be the same to close the loop. The outer LinearRing represents the boundary of the polygon, and additional LinearRings can represent holes or voids within the polygon. Polygons show areas such as country boundaries, lakes, parks, building footprints, and any other spatial areas.

{
  "type": "Polygon",
  "coordinates": [
    [
      [100.0, 0.0],
      [101.0, 0.0],
      [101.0, 1.0],
      [100.0, 1.0],
      [100.0, 0.0]
    ],
    [
      [100.2, 0.2],
      [100.8, 0.2],
      [100.8, 0.8],
      [100.2, 0.8],
      [100.2, 0.2]
    ]
  ]
}

Vanlifezone Layers

For Vanlifezone, I gathered information from other similar services, google maps, and OSM to create a list of layers that I want to include.

These layers will be sourced mainly from OSM. The next step will be to see how this data is best brought into Mapbox, while still staying editable and consumable. Mapbox already includes almost all of OSM’s data, however properties on certain nodes, such as opening hours, are not included in Mapbox’s dataset.

Mapbox Layers

Mapbox is a powerful mapping and location platform that provides developers with the tools they need to create interactive maps and incorporate them into their applications. It uses vector tiles, which are highly efficient and flexible, allowing for smooth zooming and fast loading of maps. Mapbox also offers various customization options, allowing developers to alter the style and appearance of their maps to fit their specific needs.

Mapbox provides an API that developers can use to interact with the service and include it in their applications. This API provides access to various services, including geocoding (converting addresses to geographic coordinates), directions, and more. It also allows developers to add interactive features to their maps, such as markers, popups, and user interactions (like clicking or hovering).

In the case of this blog post, Mapbox is being used to display map layers that are sourced mainly from OSM. The data from OSM is imported into Mapbox, where it can be styled and manipulated to create my desired map.

OpenStreetMap

A significant force in the world of digital cartography is OpenStreetMap, or OSM for short. It is an open-source project focused on mapping the entire world through the collaborative efforts of volunteers using freely accessible and editable geographic data.

OpenStreetMap’s main strength is its dedication to open data. Open data means anyone can use, change, and share the geographic information in OSM for free. This has a few important impacts:

• Accessibility: Anyone can access and use OSM data without needing to pay for expensive licenses.
• Collaboration: The open nature of the data encourages collaboration among users, developers, and organizations.
• Innovation: Open data encourages innovation as developers can build upon existing data to create new applications and services. (This is what I’m doing!)

OpenStreetMap data is used in a variety of applications, from everyday navigation to disaster response. Here are a few examples:

• Navigation Apps: Apps like Maps.me and OsmAnd use OSM data for offline navigation.
• Humanitarian Aid: During natural disasters, organizations like the Humanitarian OpenStreetMap Team (HOT) use OSM to provide up-to-date maps for disaster response.
• Urban Planning: City planners and researchers use OSM data for analyzing urban development and planning new infrastructure.

How digital mapping works

Since this data is open-source and easily accessible, it is a great starting point for creating ones own maps. But digital mapping is a complex topic – more so than it may seem at first. Since it is also a broad topic, I will focus on how the rendering and viewing of digital maps works, as this relates most to my project.

Rendering in digital mapping refers to the process of generating a visual representation from a model, in this case, geographic data. In the context of OpenStreetMap, the geographic data is processed by a rendering engine to produce the final map that users see.

It starts with the raw data, which consists of points (representing locations), lines (representing roads, rivers, etc.), and polygons (representing areas such as parks, buildings, etc.). This data is usually stored in a geographic database.

The rendering engine takes this data and applies a style sheet, which defines how each type of feature (roads, parks, water, etc.) should be displayed – its color, width, pattern, and other visual attributes. This process is called “’styling”.

Next, the styled data is “drawn” onto a blank canvas to create the map. This is done in layers, with each layer representing a different type of feature. The order of the layers is important as it determines what features appear on top of others. For example, roads are typically drawn last so they appear on top of other features like parks and buildings.

Finally, the rendered map is divided into tiles, which are small, square images. These tiles are what you actually see when you look at a digital map on a screen. When you pan or zoom, different tiles are loaded in to give the impression of a seamless map.

It’s important to note that rendering is a computational heavy process, and for large maps, it can take a lot of time and resources. Therefore, tiles are usually pre-rendered and stored on a server, ready to be served up to users when needed.