User:Sergionaranja/Es:Map Icons Design Standards
Map Icons Design Standards EN < Older version in english.
símbolos iconos pictogramas
Un símbolo es una representación gráfica de una idea. en los mapas se utilizan para ampliar información y representar puntos de interés (poi) de una forma escueta y directa sin tener que utilizar palabras que acabarían por llenar de manera excesiva el mapa, empeorando su funcionalidad.
En este caso no me voy a ocupar de la representación gráfica de las vías ni de las áreas solo de los puntos de interés pois.
Para diseñar un conjunto de símbolos útil debemos tener en cuenta:
- transnacionalidad. Esto permite que el símbolo sea entendido por el mayor numero de personas incluso de culturas diferentes.
- legibilidad. Se tiene que ver y diferenciar el dibujo para poderlo entender.
El primer punto se refiere sobre todo al concepto del símbolo, es decir, el como representar gráficamente una determinada cosa.
para conseguirlo es recomendable estudiar símbolos usados frecuentemente que ya cumplan estos estándares Por ejemplo AIGA la asociación de profesionales gráficos americana propuso a partir de 1974 un conjunto de símbolos. Están basados en estudios previos de uso de símbolos de este tipo en distintos países, en aeropuertos, en olimpiadas y toda clase de centros de interconexión.
Son estos
http://www.aiga.org/content.cfm/symbol-signs o
http://commons.wikimedia.org/wiki/Category:AIGA_symbol_signs
Como fueron adoptados a partir de entonces por gran numero de organizaciones y ser de dominio público se han convertido en un estándar Su uso es para transporte fundamentalmente, así que necesitaremos hacer nuestros propios símbolos pero ya tenemos una buena base conceptual.
El segundo punto es de lo que mas vamos a hablar. La gran ventaja de openStreetMap es que se construye por la colaboración desinteresada de mucha gente. Ademas tiene un esquema democrático en cuanto a las decisiones, esto para la consistencia gráfica es un handicap. Los iconos se proponen y aprueban individualmente por tanto es muy difícil que la legibilidad y la consistencia sea razonablemente buena.
Por ello me propongo dos cosas:
· compartir una serie de reglas que si se siguen ayuden a crear unos símbolos consistentes, aunque los autores sean diversos.
· crear un conjunto de símbolos que cumplan los estándares de los que hablamos que se puedan adoptar por la comunidad, o bien que sea una opción para instalarlos localmente y simplemente sirvan de ejemplo de lo que hablo.
Para centrarnos en el tema nuestros símbolos son para uso en pantalla por tanto la unidad de medida sera el píxel, los colores serán RGB, el formato será el SVG (vectorial) del cual partiremos para convertirlo en PNG (mapa de bits).
El software recomendable, por ser Open Source, para diseñar es el Inkscape (vectorial), intentaremos usar solo éste. aunque para pequeñas correcciones puntuales se puede usar el Gimp (mapa de bits).
Reglas generales
Tamaño
El primer punto a tener en cuenta es el tamaño. El diseño de las formas está directamente relacionado con el tamaño final y lo debemos conocer desde el principio. Un símbolo cuyo tamaño final sea muy grande nos permite dibujar mas detalles, según necesitemos un tamaño mas pequeño esos detalles emborronaran el símbolo haciéndolo finalmente ilegible, con lo cual cuanto mas pequeño menos detalles.
Para mí la barrera es 20x20 píxeles.
Por debajo de este tamaño las restricciones de forma empiezan a ser importantes y requerirá un sistema de trabajo diferente. Aquí no funcionará trabajar el svg y convertirlo a png.
Un ejemplo de este error son algunos de los símbolos a tamaño 16x16 que resultan algo borrosos en
http://www.gpsdrive.de/development/map-icons/overview.en.shtml
En este caso es mejor trabajar el bitmap directamente.
Un ejemplo correcto de este tipo de iconos es:
http://wiki.openstreetmap.org/index.php/User:UrSuS
Por tanto:
Detalles - cuanto mas pequeño mas simple.
Como - en Inkscape definiremos la página con el tamaño final del símbolo.
Grosor
Las líneas horizontales y verticales deben coincidir en grosor y posición con los píxeles, de esta forma evitaremos un resultado borroso. Además al exportar de svg a png, éste será mucho mas limpio y evitaremos tener que corregir los píxeles a mano.
Por tanto el grosor mínimo será de un píxel. O una unidad en el svg.
- Bien >>
png viene de > 
svg
- Mal >>
png viene de > 
svg
En el caso de las líneas inclinadas sera inevitable que queden algo borrosas pero si mantenemos la regla de una unidad de grosor o múltiplos exactos de ésta, obtendremos un resultado consistente.
Como – definiendo en Inkscape una rejilla del tamaño final del símbolo. ejemplo > 
abrir este .svg en Inkscape
Color
Otro de los grandes aportes a la consistencia es una gama de colores concreta. En principio los colores que se pueden usar son todos los de RGB ya que nuestro visualizador preferente sera la pantalla del ordenador, en el caso de gps pda y demas aparatos susceptibles de mostrar nuestros mapas, cada vez mas se apuntan a una resolucion de color igual a la de un ordenador. No merece la pena diseñar para cada una de las posibilidades. La solucion es tener 2 versiones de los iconos una en color y otra en blanco y negro por ejemplo.
Aunque tengamos millones de colores a nuestra disposición si nos limitamos a unas gamas tendremos mejores resultados. La mejor idea es organizar los iconos temáticamente y asignar un color para cada grupo
2020 iconset: plantillas y ejemplos
He aquí unos ejemplos de pictogramas creados con las pautas de esta guía con un tamaño de 20x20px.
svg base para pictogramas cuadrados con borde negro de 1px
svg base para pictogramas circulares con borde negro de 1px
svg base para pictogramas circulares con borde rojo de 2px
svg base para pictogramas triangulares con borde rojo de 2px
svg base de los pictogramas place_of_worship=*
svg del pictograma place_of_worship=bahai (Baha'i)
svg del pictograma place_of_worship=buddhist
svg del pictograma place_of_worship=christian
svg del pictograma place_of_worship=hindu
svg del pictograma place_of_worship=jain
svg del pictograma place_of_worship=jewish
svg del pictograma place_of_worship=muslim
place_of_worship=pagan
svg del pictograma place_of_worship=pastafarian
svg del pictograma place_of_worship=shinto
svg del pictograma place_of_worship=sikh
svg del pictograma place_of_worship=taoist
svg del pictograma place_of_worship=zoroastrian
- power=generator
svg del pictograma power_source burn type
svg del pictograma power_source nuclear type
svg del pictograma power_source sun type
svg del pictograma power_source water type
svg del pictograma power_source wind type
Código XML para Osmarender
Para que el Osmarender pueda leer los iconos creados debemos formatear el código generado por el inkscape en el archivo .svg.
Pongamos por ejemplo el de 
para ello debemos abrir con un editor de texto ese archivo y formatearlo para dejarlo como sigue:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" id="main" version="1.1" baseProfile="full" width="20" height="20" preserveAspectRatio="none" viewBox="0 0 20 20"> <svg:defs>
<svg:symbol
id="symbol-hospital"
viewBox="0 0 20 20" >
<svg:path fill="#ffffff" stroke="#ff0000" stroke-width="1"
d="M 19.5,10 A 9.5,9.5 0 1 1 0.5,10 A 9.5,9.5 0 1 1 19.5,10 z"/>
<svg:rect fill="#ff0000" width="4" height="14" x="8" y="3"/>
<svg:rect fill="#ff0000" width="14" height="4" x="3" y="8" />
</svg:symbol>
</svg:defs> </svg>
el archivo resultante lo guardamos como .svg en la carpeta ../symbols del directorio /osm local
Categorías
intersecciones
highway=mini_roundabout - es:rotonda
direction=clockwise
highway=stop - es:señal stop
highway=traffic_signals - es:semáforo
highway=crossing - es:paso de cebra
barreras
highway=gate - es:puerta que cierra el tráfico
higway=stile - es:puerta en vallado para transeúntes
higway=cattle_grid - es:
higway=tool_booth – es:barrera de peaje, cabina de cobro
highway=bus_stop
traffic_calming=yes - es:bache
highway=emergency_access_point
vías de agua
waterway=lock_gate
waterway=turning_point
waterway=boatyard astillero reparación de botes y barcos
trenes
railway=station
railway=halt
railway=tram_stop
railway=crossing
railway=level_crossing
railway=subway_entrance
railway=turntable
aéreas
aeroway=aerodrome (area del aeropuerto) o poi
aeroway=helipad
aerialway=cable_car – es:teleférico
aerialway=chair_lift
aerialway=drag_lift
aerialway=station
energía
power=tower
power=line
power=generator
power_source=