Marcadores de Etiquetas para Tus Aplicaciones ArcGIS JavaScript

ReneRubalcava

<\/HEAD>

<\/P>

Si has usado el LabelLayer<\/A> antes para anotar tu mapa, estás familiarizado con el hecho de que puedes agregar etiquetas que coinciden con los datos de tu mapa. Esta es una característica genial y estoy seguro de que es realmente interesante trabajar con pseudo-annotations<\/EM> en tu webmap, pero ¿por qué detenerse ahí?<\/P><\/P>

Font Awesome para la genialidad<\/H2>Si nunca has usado Font Awesome<\/A>, es un pequeño y excelente Toolkit CSS para agregar algunos íconos de fuente agradables a tu página web. Esto es muy útil si necesitas construir un editor o quieres añadir un poco de sabor a tu sitio y es muy fácil de usar. Si alguna vez has agregado fuentes personalizadas a tu página web, sabes que hay algo de código base involucrado. Puedes obtener íconos similares con Bootstrap<\/A> e incluso usarlos juntos.<\/P>

<\/P>

También es bastante fácil usar íconos de fuente en

Leaflet<\/A> si quisieras y tenía curiosidad sobre cómo podría hacer lo mismo con la ArcGIS API for JavaScript. Cuando lo miré por primera vez, aún no existía LabelLayer<\/EM> en la API. Recientemente tuve un caso de uso para usar íconos de fuente como marcadores en un proyecto, así que me lancé de lleno. Resulta que ni siquiera necesito el LabelLayer<\/EM>, ni me importa.<\/P><\/P>

TextSymbol y Font<\/H2>Entonces, ¿cómo logramos esto? Con la introducción del LabelLayer,<\/EM> se añadieron un par de otros módulos de soporte - Font<\/EM> y TextSymbol<\/EM>. Estos dos módulos son la clave para marcadores geniales. Hay algunos pasos que debes seguir para que esto funcione.<\/P>1.<\/STRONG> Lo primero que querrás hacer es agregar una referencia al css de font awesome en tu página.<\/P><link href="https:\/\/community.esri.com\\/maxcdn.bootstrapcdn.com\/font-awesome\/4.2.0\/css\/font-awesome.min.css" rel="stylesheet"><\/PRE>2<\/STRONG>. Define la Font<\/EM> para tu TextSymbol<\/EM>.<\/P>var font = new Font("20pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,"FontAwesome");<\/PRE>3.<\/STRONG> Crea un TextSymbol.<\/EM><\/P>var sym = new TextSymbol("\uf1bb", font, treeColor);<\/PRE>1111111111111111111111111111 character raro estoy pasando al TextSymbol? <\/>EM> Ese es el caracter de Font Awesome que quiero usar. Necesitarás copiar y pegar el caracter como cualquier otro, pero querrás usar la Font Awesome Cheatsheet<\/>A> para eso.<\/>P>4.<\/>STRONG> Ahora puedes asignar el símbolo al gráfico y agregarlo al mapa.<\/>PRE class=\"lia-code-sample line-numbers language-none\">feature.setSymbol(sym);\nmap.graphics.add(feature);<\/>PRE><\/>P><\/>P>Aquí está el JavaScript completo para los fragmentos anteriores.<\/>PRE class=\"lia-code-sample line-numbers language-none\">require([\n  \"esri/map\", \n  \"esri/symbols/TextSymbol\",\n  \"esri/tasks/query\",\n  \"esri/tasks/QueryTask\",\n  \"esri/symbols/Font\",\n  \"esri/Color\",\n  \"dojo/domReady!\"\n], function(\n  Map, TextSymbol,\n  Query, QueryTask, Font,\n  Color\n) {\n  var map = new Map(\"map-div\", {\n    center: [-122.445, 37.752],\n    zoom: 14,\n    basemap: \"gray\"\n  });\n\n  var treeColor = new Color(\"#666\");\n  var treesUrl = \"A class=\"jive-link-external-small\" href=\"http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Street_Trees/FeatureServer/0\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Street_Trees/FeatureServer/0\";<\\SPAN>\\n  var font = new Font(\"20pt\", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,\"FontAwesome\");\\n  \/\/ puedes usar la cheatseeht para copiar y pegar el símbolo de fuente\\n  \/\/ <\\SPAN>A class=\\"jive-link-external-small\\" href=\\"http://fortawesome.github.io/Font-Awesome/cheatsheet/\\" rel=\\"nofollow noopener noreferrer\\" target=\\"_blank\\">http://fortawesome.github.io/Font-Awesome/cheatsheet/<\\A>\\n  var sym = new TextSymbol(\\"\\uf1bb\\", font, treeColor);\\n  var qTask = new QueryTask(treesUrl);\\n  var query = new Query();\\n  query.outFields = [\\"*\\"];\\n  \/\/query.where = \\\"TreeID = 0\\\ ¡Adelante y sigan hackeando, amigos!<\/P><\/BODY><\/HTML>

adampf

Killer samples. Thanks for sharing!