Esta página web no esta soportada en este navegador, intente microsoft edge, google chrome, safari o firefox.

x

Buscador

Buscador

Nuestro nuevo e-commerce ya está al aire

Visualización de datos con la API de ArcGIS para JavaScript: Opciones de mejora


En artículos anteriores usted ha aprendido como mostrar sus datos y como darle un estilo a los mismos a partir de un valor único con el API de JavaScript, es posible que para usted sea suficiente mostrar los datos en un mapa, pero algunas veces su público puede esperar más cosas. ¿Dónde pueden encontrar la leyenda?, ¿Qué pasa si desean más información acerca de cada entidad en el mapa?

En este artículo usted aprenderá:

  • Usar ventanas emergentes para proporcionar información adicional.
  • Añadir una leyenda.
  • Desencadenar acciones cuando se hace click en un gráfico.
  1. Usar ventanas emergentes para proporcionar información adicional (Ejemplo)

    Es muy intuitivo para cualquier usuario de un mapa web hacer click sobre un gráfico para recibir información adicional, esto es muy fácil de lograr a través de la API de JavaScript, solo basta con pasar la clase InfoTemplate al constructor cuando se crea la capa de entidades; así podrá obtener una ventana emergente con la información de su elección.

    var infoTemplate = new InfoTemplate("${POI_NAME}", "${Tipo}
    ${PERCENT_FR} visitas por día en el 2013");

    var layer = new FeatureLayer ("http://services.arcgis.com/BQ1kxRrYtZ5V7TzV/arcgis/rest/services/
    Centros_Comerciales/FeatureServer/0", {

    outFields: ["POI_NAME", "Tipo", "PERCENT_FR"],
    infoTemplate: infoTemplate
    });

    Algunos consejos útiles sobre la clase Info Template:

    • Como se puede ver en el código anterior usted podrá sustituir ${<Nombre_Campo>} para obtener datos en la ventana emergente.
    • ¿Le gustaría insertar separadores de miles al mostrar un número? Use ${<Nombre_Campo>:NumberFormat} para dar un formato a un número.
    • Para implementar un formato más complejo, lea Contenido del formato de ventanas de información para mayores detalles.

    Como alternativa usted podrá pasar una función como segundo parámetro de la clase Info Template (Ejemplo).

    var infoTemplate = new InfoTemplate("${POI_NAME}" , function(graphic){
    var visitas = graphic.attributes.PERCENT_FR;
    return visitas + " visitas por día en el 2013";
    });

  2. Añadir una leyenda (Ejemplo)

    La leyenda es algo que las personas siempre esperan encontrar dentro de un mapa, las leyendas de ESRI muestran una etiqueta y un símbolo para algunas o todas las capas en el mapa, usted puede crear una leyenda con las capas de su elección, a partir de un código como el siguiente:

    var legend = new Legend({
    map: map,
    layerInfos: [{
    layer: layer
    }]
    }, "legend");
    legend.startup();

    ¿No le gusta el título de la capa que se muestra por defecto? Agregue la propiedad de título en el arreglo LayerInfos:

    layerInfos: [{ layer: layer, title: "Lugares comerciales de Bogotá" }]

    Debido a que la leyenda es un widget usted podría proporcionar un nodo DOM para acomodarlo, asegúrese de crear dicho nodo en el archivo HTML y utilice el ID del nodo para conectarlo con el widget. Usted puede mirar el ejemplo completo para ver como configurar el diseño de su aplicación.


  1. Desencadenar acciones cuando se hace click en un gráfico (Ejemplo)

    Cuando un usuario hace click sobre una aplicación grafica en lugar de mostrar la ventana emergente para mostrar más información, es posible que usted desee activar otras acciones como cambiar símbolos, ejecutar consultas, entre otros. Cualquiera de estas acciones que usted desee permitir dentro de su aplicación lo podrá lograr con el evento .on(“click”), debido a que permite la realización de ciertas tareas a partir de un click en un gráfico.

    layer.on("click", function(evt){ console.log(evt.graphic); });

    Ahora se realizara un caso de uso con el servicio de Centros Comerciales de Bogotá usado anteriormente, el objetivo de nuestra aplicación será que los usuarios puedan visualizar todos los lugares comerciales que se encuentran a un radio de 1 kilómetro de un centro comercial en específico.

    Para lograr esto se usa el método .queryFeatures() de la clase Query

    layer.on("click", function(evt){
    //query the layer with 100-mile buffer
    var query = new Query();
    query.geometry = evt.graphic.geometry;
    query.distance = 1;
    query.units = "kilometers";
    //start query
    layer.queryFeatures(query).then(function(featureSet){
    //get all returned graphics
    var graphics = featureSet.features;
    ...
    });
    });

    Consulte este ejemplo completo para ver cómo se pueden resaltar los gráficos seleccionados y hacer funcionar la aplicación correctamente.

Lo que vendrá después

Todavía existen más opciones para poder visualizar sus datos, próximamente se hablara sobre las formas que existen para visualizar datos cuantitativos variando el color y el tamaño de los símbolos.


Fuentes

Blog ArcGIS - Visualización de datos con la API de ArcGIS para JavaScript: Opciones de mejora

http://blogs.esri.com/esri/arcgis/2014/09/24/data-visualization-with-arcgis-api-for-javascript-enhancement-options/

© Esri Colombia 2017 - Calle 90 # 13 - 40 Piso 5

+57 (1) 650-1575