You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: _source/_projects/id-preset-icons.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ category: Cartography
3
3
title: iD Preset Icons
4
4
subtitle: Public domain map icons for Temaki
5
5
date: 2025-08-15
6
-
updated: 2025-08-20
6
+
updated: 2025-08-24
7
7
hero_image: /img/temaki-icons-id-screenie.jpg
8
8
hero_alt: Screenshot of iD showing US route 82 in New Mexico featuring map icons for windpumps, high-voltage towers, and utility poles.
9
9
photo: /img/photo-ok-bison.jpg
@@ -25,7 +25,7 @@ tags:
25
25
---
26
26
## Keeping the map iconic
27
27
28
-
While I was a full-time maintainer of iD (the default editor at [osm.org/edit](https://www.openstreetmap.org/edit?editor=id)), I designed over 270 preset icons. Presets are the default feature types that mappers can add to OpenStreetMap, such as "Coffeehouse" or "Foot Path". Good icons keep the app approachable for new mappers while helping power-mappers quickly sift through data. Plus I think they make the app look pretty sharp.
28
+
While I was a full-time maintainer of iD (the default editor at [osm.org/edit](https://www.openstreetmap.org/edit?editor=id)), I designed over 270 preset icons. Presets are the default feature types such as "Coffeehouse" or "Foot Path" that people can add to OpenStreetMap using iD. Good preset icons keep the app approachable for new mappers while helping power-mappers sift through data. Plus I think bespoke icons make the map look pretty sharp.
29
29
30
30
My icons live in the [Temaki icon library](https://github.com/rapideditor/temaki), which is licensed in the public domain and can be used by anyone. My contributions represent more than half of this library.
31
31
@@ -93,9 +93,9 @@ A consistent design language helps users to make inferences and catch distinctio
93
93
94
94
## Representing map features
95
95
96
-
Since iD supports a vast number of feature types, I often ended up using descriptive representations of objects rather than abstraction or analogy.
96
+
Since iD supports a vast number of feature types, I often ended up using literal representations of objects rather than abstraction or analogy.
97
97
98
-
For example, the default barrier icon in iD is a plain ⛔︎ no entry symbol. This is highly abstract and doesn't tell you much about the real-world nature of the barrier. So, I designed a number of barrier-specific icons to improve clarity.
98
+
For example, the default barrier icon in iD is a plain ⛔︎ no entry symbol. This is highly abstract and doesn't tell you much about the real-world nature of the barrier. So, I designed a slew of descriptive icons that show each type of barrier as if you're viewing it at ground level.
99
99
100
100
{% include graphic_start.html title="Barriers depicted literally" %}
101
101
{%- include graphic_image.html file='/img/temaki/bollard.svg' caption='Bollard' width='120px' img_width='40px' -%}
@@ -104,7 +104,7 @@ For example, the default barrier icon in iD is a plain ⛔︎ no entry symbol. T
104
104
{%- include graphic_image.html file='/img/temaki/speed_dip.svg' caption='Dip' width='120px' img_width='40px' -%}
105
105
{%- include graphic_image.html file='/img/temaki/speed_dip_double.svg' caption='Double Dip' width='120px' img_width='40px' -%}
106
106
{%- include graphic_image.html file='/img/temaki/gate.svg' caption='Gate' width='120px' img_width='40px' -%}
107
-
{%- include graphic_image.html file='/img/temaki/hedge.svg' caption='Hedge' width='120px' img_width='40px' -%}
107
+
{%- include graphic_image.html file='/img/temaki/hedge.svg' caption='Hedge' width='120px' img_width='40px' -%}
108
108
{%- include graphic_image.html file='/img/temaki/height_restrictor.svg' caption='Height Bar' width='120px' img_width='40px' -%}
109
109
{%- include graphic_image.html file='/img/temaki/lift_gate.svg' caption='Lift Boom' width='120px' img_width='40px' -%}
110
110
{%- include graphic_image.html file='/img/temaki/rope_fence.svg' caption='Rope Fence' width='120px' img_width='40px' -%}
@@ -120,7 +120,7 @@ For example, the default barrier icon in iD is a plain ⛔︎ no entry symbol. T
120
120
121
121
## Distinguishing similar features
122
122
123
-
iD has a lot of similar-sounding presets that trip up new mappers. What's the difference between an island and an islet? I created illustrative icons for confusingly similar features to help mappers decide which one is a better match.
123
+
iD has a lot of similar-sounding presets that trip up new mappers. What's the difference between an island and an islet? I created unique icons for confusingly similar features to help mappers decide which one is a better match.
124
124
125
125
{% include graphic_start.html title="Small vs. large" %}
126
126
{%- include graphic_image.html file='/img/temaki/islet_tree.svg' caption='Islet' width='100px' img_width='40px' -%}
@@ -137,7 +137,7 @@ iD has a lot of similar-sounding presets that trip up new mappers. What's the di
137
137
138
138
## Illustrating jargon
139
139
140
-
Detailed mapping requires a lot of specialized knowledge about what things are and what they're called. I drew bespoke icons for niche feature types to help new mappers tag them correctly even if they've never heard the word "cairn" or "gantry". These icons are especially helpful for non-English speakers since the preset labels in iD may not be fully translated.
140
+
Detailed mapping requires a lot of specialized knowledge about what things are and what they're called. I drew illustrative icons for niche feature types to help new mappers tag them correctly even if they've never heard the word "cairn" or "gantry". These icons are especially helpful for non-English speakers since the preset labels in iD may not be fully translated.
141
141
142
142
{% include graphic_start.html title="Niche map features" %}
143
143
{%- include graphic_image.html file='/img/temaki/aerialway_pole.svg' caption='Aerialway Pole' width='120px' img_width='40px' -%}
0 commit comments