Label Markers voor Uw ArcGIS JavaScript-apps

ReneRubalcava

<\/HEAD>

<\/P>

Als je de LabelLayer<\/A> eerder hebt gebruikt om je kaart te annoteren, ben je bekend met het feit dat je labels kunt toevoegen die overeenkomen met je kaartgegevens. Dit is een leuke functie en ik weet zeker dat het echt gaaf is om te werken met pseudo-annotations<\/EM> in je webmap, maar waarom daar stoppen?<\/P><\/P>

Font Awesome voor geweldigheid<\/H2>Als je nog nooit Font Awesome<\/A> hebt gebruikt, is het een geweldige kleine CSS Toolkit om wat mooie font iconen aan je webpagina toe te voegen. Dit is erg handig als je een editor moet bouwen of wat extra flair aan je site wilt toevoegen en het is heel gemakkelijk te gebruiken. Als je ooit aangepaste fonts aan je webpagina hebt toegevoegd, weet je dat er wat standaardcode bij komt kijken. Je kunt vergelijkbare iconen krijgen met Bootstrap<\/A> en zelfs beide samen gebruiken.<\/P>

<\/P>

Het is ook vrij eenvoudig om font iconen te gebruiken in

Leaflet<\/A> als je dat zou willen en ik was benieuwd hoe ik hetzelfde kon doen met de ArcGIS API for JavaScript. Toen ik hier voor het eerst naar keek, was er nog geen LabelLayer<\/EM> in de API. Onlangs had ik een use-case om font iconen als markers te gebruiken in een project, dus dook ik er meteen in. Blijkt dat ik de LabelLayer<\/EM> niet eens nodig heb, en dat maakt me ook niet uit.<\/P><\/P>

TextSymbol en Font<\/H2>Hoe bereiken we dit? Met de introductie van de LabelLayer,<\/EM> werden er een paar andere ondersteunende modules toegevoegd - Font<\/EM> en TextSymbol<\/EM>. Deze twee modules zijn de sleutel tot geweldige markers. Er zijn een paar stappen die je moet doen om dit werkend te krijgen.<\/P>1.<\/STRONG> Het eerste wat je wilt doen is een verwijzing naar de font awesome css aan je pagina toevoegen.<\/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>. Definieer de Font<\/EM> voor je TextSymbol<\/EM>.<\/P>var font = new Font("20pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,"FontAwesome");<\/PRE>3.<\/STRONG> Maak een TextSymbol.<\/EM><\/P>var sym = new TextSymbol("\uf1bb", font, treeColor);<\/PRE>Wat is dat vreemde teken dat ik doorgeef aan de TextSymbol? <\/_EM> Dat is het teken van Font Awesome dat ik wil gebruiken. Je moet het teken kopiëren en plakken zoals elk ander teken, maar je wilt daarvoor de Font Awesome Cheatsheet<\/A> gebruiken.<\/P>

4.<\/STRONG> Nu kun je het symbool toewijzen aan de graphic en toevoegen aan de kaart.<\/P>feature.setSymbol(sym);
map.graphics.add(feature);<\/PRE><\/P>Hier is de volledige JavaScript voor bovenstaande fragmenten.<\/P>require([
  "esri\/_map",
  "esri\/_symbols\/_TextSymbol",
  "esri\/_tasks\/_query",
  "esri\/_tasks\/_QueryTask",
  "esri\/_symbols\/_Font",
  "esri\/_Color",
  "dojo\/_domReady!"
], function(
  Map, TextSymbol,
  Query, QueryTask, Font,
  Color
) {
  var map = new Map("map-div", {
    center: [-122.445, 37.752],
    zoom: 14,
    basemap: "gray"
  });

  var treeColor = new Color("#666");
  var treesUrl = "<\/_SPAN>

http:\/\/services.arcgis.com\/V6ZHFr6zdgNZuVG0\/arcgis\/rest\/services\/Street_Trees\/FeatureServer\/0<\/_A>";<\/_SPAN>
  var font = new Font("20pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,"FontAwesome");
  \/\/- je kunt de cheatsheet gebruiken om het font symbool te kopiëren en plakken
  \/\/- <\/_SPAN>http:\/\/fortawesome.github.io\/Font-Awesome\/cheatsheet\/<\/_A>
  var sym = new TextSymbol("\uf1bb", font, treeColor);
  var qTask = new QueryTask(treesUrl);
  var query = new Query();
  query.outFields = ["*"];
  \/\/-query.where = "TreeID = 0";
  query.where = "1=1";
  query.returnGeometry = true;
  qTask.execute(query).then(function(featureSet) {
    featureSet.features.map(function(feature) {
      feature.setSymbol(sym);
      map.graphics.add(feature);
    });
  });
});<\/_PRE>

<\/_P>

Voeg wat flair toe!<\/_H2>Het resultaat van bovenstaande kan iets opleveren zoals dit.<\/_P>Dat is echt gaaf, maar het is niet helemaal goed. Groepen bomen lijken een beetje in elkaar over te lopen. Mijn innerlijke cartograaf trekt een gezicht. Het is oké, we kunnen daar iets aan doen. De iconen worden toegevoegd via een svg <text><\/_EM>-tag, wat betekent dat we CSS kunnen gebruiken om het te stylen.<\/_P>text {
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}<\/_PRE>Nu zou je een kaart moeten krijgen die de iconen zoals hieronder weergeeft.<\/_P>BAM!<\/_EM>Dat ziet er best cool uit als ik het zelf mag zeggen. Je vindt de volledige demo van dit voorbeeld hier<\/_A>. <\/_P>Gebruik het in een renderer<\/_H2>Wil je het gebruiken als renderer voor een FeatureLayer?<\/_EM> Geen probleem.<\/_P>require([
  “esri/map”,
  “esri/symbols/TextSymbol”,
  “esri/symbols/Font”,
  “esri/Color”,
  “esri/layers/FeatureLayer”,
  “esri/renderers/SimpleRenderer”,
  “dojo/domReady!”
], function(
  Map, TextSymbol, Font,
  Color, FeatureLayer, SimpleRenderer
) {
  var map = new Map(“map-div”, {
    center: [-122.445, 37.752],
    zoom: 14,
    basemap: “gray”
  });

  var treeColor = new Color(“#666”);
  var treesUrl = “http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Street_Trees/FeatureServer/0”;
  var font = new Font(“20pt”, Font.STYLE_NORMAL,
     Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,“FontAwesome”);
       // je kunt de cheatsheet gebruiken om het font symbool te kopiëren en plakken
       //http://fortawesome.github.io/Font-Awesome/cheatsheet/
  var sym = new TextSymbol(“f1bb”, font, treeColor);
  var renderer = new SimpleRenderer(sym);
  var fl = new FeatureLayer(treesUrl);
  fl.setRenderer(renderer);
  map.addLayer(fl);
});

Je krijgt hetzelfde resultaat als hierboven, maar met minder code. Je kunt een voorbeeld hiervan vinden hier.

Waarom?

Zeg je jezelf af waarom dit allemaal? Waarom niet gewoon gebruik maken van PictureMarkerSymbol? Ik zal het je vertellen waarom. Fonts schalen, afbeeldingen niet. Heb je ooit een PictureMarkerSymbol geladen en last gehad van kartelige randen of misschien was het een beetje wazig? Vooral als je probeerde de grootte opnieuw te definiëren zodat het beter bij je kaart past? Fonts schalen net als SVG vector graphics zodat ze niet pixelig worden weergegeven of ze nu op 8pt of 50pt worden getoond en dat is voor mij reden genoeg om ze te gebruiken. Dit werkt vrij goed en ziet er goed uit voor mobiele apps. Natuurlijk kan het font icoon niet meerdere kleuren hebben of erg ingewikkeld zijn, maar kijk eens naar alleen al de iconen in Font Awesome, of beter nog naar de Mapbox maki icon set, dan zie je dat er veel goede dingen zijn die je misschien kunt gebruiken als marker op je kaart.

Kijk op mijn regelmatige blog voor meer geodev tips & tricks!

Ga ga door en hak erop los, mensen!<\/P><\/BODY><\/HTML>

adampf

Killer samples. Thanks for sharing!