14 dic 2018

Migrar de la API de JavaScript de Google Maps a la API de ArcGIS para JavaScript




Por Julie Powell y Andy Gup / Anuncios / 9 de agosto de 2018

Clic aquí para leer la nota original

¿Los costos de mostrar un mapa en su aplicación web aumentaron drásticamente con los recientes cambios de precios de Google? Si es así, no estás solo. Esta actualización de precios ha hecho que muchos desarrolladores que estaban utilizando la API de Google Maps, exploren alternativas de mapeo web y se pasen a ArcGIS. Hay un par de razones para esto.
Primero, la API de ArcGIS para JavaScript es una API de mapeo web de vanguardia con herramientas poderosas de desarrollador para explorar datos y crear visualizaciones en 2D y 3D, widgets para crear experiencias de usuario atractivas, y procesamiento en el lado del cliente para crear aplicaciones interactivas usando la última tecnología de navegador.
Segundo, con una Suscripción de ArcGIS Developer puedes hacer muchas cosas gratis:
·       Uso de todas las API y SDK de Esri para plataformas web, nativas y móviles
·       1.000.000 mapas base y transacciones geosearch por mes
·       Créditos para generar rutas
·       Aplicaciones ilimitadas que no generan ingresos
·       Usuarios ilimitados
·       Acceso a una amplia selección de contenido y servicios ubicados en ArcGIS Online
·       Diseñar mapas base y administrar el contenido de tu mapa
·       Alojar, consultar y analizar contenido geográfico
Si estás listo para migrar tu aplicación web de la API de JavaScript de Google Maps a la API de ArcGIS para JavaScript, aquí hay una descripción general rápida de algunos de los conceptos básicos.

Empieza a desarrollar con la API
Comienza inscribiéndote en el Programa de Desarrolladores de ArcGIS sin costo. Esto te dará acceso a todo lo mencionado anteriormente y un poco más (ve al sitio web de Desarrolladores para aprender más).
Para cargar la API de JavaScript de Google Maps, haga referencia a la API e incluya su clave de la API de Google de esta manera:
<script async defer
   src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Con la API de ArcGIS para JavaScript no necesitarás una clave API; puedes simplemente referenciar la API y la hoja de estilo así:
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script>
Visualiza un mapa
Así es como inicializas un nuevo mapa con Google:
const map = new google.maps.Map(document.getElementById('mapDiv'), {
  mapTypeId: 'roadmap',
  center: { lat: 32.7353, lng: -117.1490},
  zoom: 12
});
Con ArcGIS, se inicializa un nuevo mapa de esta manera. Observa que creas un mapa y una vista. La vista permite la separación entre los datos del mapa y la visualización de los datos en 2D o 3D (o en ambos).
require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
  const map = new Map({
    basemap: "streets-navigation-vector"
  });

  const view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 12,
    center: {
      latitude: 32.7353,
      longitude: -117.1490
    }
  });
});
Este código creará un mapa con el mapa base del vector de Navegación Mundial de Esri. Si así lo quisieras, puedes elegir otro mapa base de los mapas base de ArcGIS Online tales como imágenes satelitales, lienzo topográfico, gris oscuro u otro mapa base al que tenga acceso.
Agregar un marcador
Agregar un marcador con Google se hace de la siguiente manera:

const marker = new google.maps.Marker({
  position: { lat: 32.7353, lng: -117.1490 },
  title: "San Diego Zoo",
  map: map
});
Para agregar un marcador con ArcGIS, un nuevo gráfico es agregado a la colección de gráficos de la vista.

view.graphics.add({
  symbol: {
    type: "simple-marker",
    color: "cyan"
  },
  geometry: {
    type: "point",
     longitude: -117.1490,
     latitude: 32.7353   
  }
});
El código anterior crea un símbolo de "marcador simple" circular de color cian, pero hay más formas en que puede simbolizar su marcador. Por ejemplo, puedes seleccionar un símbolo de Esri Icon Font. Aquí hay un ejemplo de cómo usar un ícono de pin de mapa:




view.graphics.add({
  symbol: {
    type: "text",
    color: "#7A003C",
    text: "\ue61d", // esri-icon-map-pin
    font: {
      size: 30,
      family: "CalciteWebCoreIcons"
    }
  },
  geometry: {
    type: "point",
    longitude: -117.1490,
    latitude: 32.7353   
  }
});

En ArcGIS, una opción más dinámica para seleccionar un símbolo es utilizar los atributos de tus datos para controlar el color, tamaño y transparencia del símbolo. Para ver esto en acción, observa esta muestra de cómo puedes crear gráficos a partir de datos de terremotos de GeoJSON y establecer dinámicamente el tamaño del símbolo de cada gráfico de acuerdo con la magnitud del terremoto.
Usa una ventana emergente
InfoWindow de Google se utiliza para mostrar contenido en una ventana emergente, y se adjunta a un marcador de esta manera:

const map = new google.maps.Map(document.getElementById("mapDiv"), {
  mapTypeId: "roadmap",
  center: {
    lat: 32.7353,
    lng: -117.1490
  },
  zoom: 14
});

const marker = new google.maps.Marker({
  position: {
    lat: 32.7353,
    lng: -117.1490
  },
  title: "San Diego Zoo",
  map: map
});

const contentString = "

San Diego Zoo

"
+ "The San Diego Zoo " + " in Balboa Park houses over 3,700 animals." + "San Diego Zoo"; const infowindow = new google.maps.InfoWindow({ content: contentString }); marker.addListener('click', function() { infowindow.open(map, marker); });
Puedes agregar una ventana emergente con la API de ArcGIS para JavaScript al crear una “plantilla” emergente. Las plantillas definen el contenido de las ventanas emergentes.
Aquí están todos los pasos combinados para crear el mapa y la vista, agregar un marcador con un ícono de pin y adjuntar una ventana emergente:

require([ "esri/Map", "esri/views/MapView" ], function(
  Map, MapView
) {
  const map = new Map({
    basemap: "streets-navigation-vector"
  });

  const view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 12,
    center: {
      latitude: 32.7353,
      longitude: -117.1490
    }
  });
  
  const contentString = "The San Diego Zoo " + 
    " in Balboa Park houses over 3,700 animals." +
    "San Diego Zoo"; 
  
  view.graphics.add({
    symbol: {
      type: "text",
      color: "#7A003C",
      text: "\ue61d", // esri-icon-map-pin
      font: {
        size: 30,
        family: "CalciteWebCoreIcons"
      }
    },
    geometry: {
      type: "point",
      longitude: -117.1490,
      latitude: 32.7353
    },
    popupTemplate: {
      title: "San Diego Zoo",
      content: contentString
    }
  });
});
Mira esta aplicación en Codepen.


Por diversión, puedes jugar con la misma aplicación en 3D simplemente usando un "SceneView" en lugar de un "MapView". Vea el código y la aplicación 3D en vivo aquí.

Próximos pasos y más recursos
Quédate conectado para más tutoriales sobre los siguientes flujos de trabajo:
Existe una variedad de recursos para aprender sobre la API de ArcGIS para JavaScript y maximizar tu productividad cuando construyes aplicaciones web:

  • ·       Explora cientos de muestras en un recinto de pruebas en vivo para jugar con el código.
  • ·       Una guía útil centrada en temas clave sobre el desarrollo con la API
  • ·       Referencia de API de búsqueda.
·       La API de ArcGIS para laboratorios de desarrollo de JavaScript, que son tutoriales paso a paso para aprender a desarrollar con la API, por ejemplo:

Lo que viene en Business Analyst (Diciembre 2018)


Análisis / 16 de noviembre 2018 / Praveen Srivastava

Clic aquí para leer la nota original.

La próxima actualización de Business Analyst Web y aplicaciones móviles está planificada para principios de diciembre de 2018. Aquí hay algunos puntos clave de lo que se planificó para esta actualización:
Crear Mapas de Densidad de Puntos
Visualiza datos utilizando simbología de densidad de puntos que permite representar los datos de valores variables utilizando la densidad de puntos en un área. Por ejemplo, muestra la población de los Estados Unidos de 2018 por estado utilizando simbología de densidad de puntos donde cada punto represente 15.000 personas.

Podrás utilizar esta nueva opción de visualización como parte del flujo de trabajo de Mapas Codificados por Color. Configura fácilmente el estilo de los mapas de densidad de puntos. Define el valor para cada punto, distribución (densidad) de puntos, y el tamaño y color de los puntos para generar la mejor visualización para tus datos. La opción de bloqueo para los Valores de Puntos te permite mantener un valor fijo para cada punto en diferentes niveles de acercamiento.
Utiliza Plantillas de Infografía en Organizaciones y Países
Digamos que eres un miembro de múltiples organizaciones ArcGIS. Creas una plantilla de infografía de excelente aspecto en una de tus organizaciones ArcGIS que los miembros de otras organizaciones ArcGIS quieren utilizar. Actualmente, puedes hacer esto compartiendo tu plantilla a un grupo en tu organización y agregando miembros de otras organizaciones a ese grupo en ArcGIS Online. Con el próximo lanzamiento, podrás descargar plantillas infográficas de una organización e importarlas a otra organización ArcGIS. La opción de descarga provee una manera adicional de colaborar con otros miembros de la organización que no quieren hacer público su perfil de usuario (que permite agregarlos a grupos fuera de su organización).

También puedes importar la plantilla descargada en otros países. Esto ayuda a aprovechar las plantillas de infografía basadas en los Estados Unidos en otros países. Por ejemplo, la siguiente infografía muestra la plantilla del Resumen ejecutivo de llamadas para los Estados Unidos que se ejecutan para Francia.

Adicionalmente, podrás usar un nuevo conjunto de herramientas de alineación para crear plantillas de infografías más prolijas y avanzadas. Alinea contenido dentro de un panel y a través de múltiples paneles, usa capas de objetos para controlar el orden de dibujo, y mucho más.

Categoriza y Busca tu propios Datos más Fácilmente
El uso de tus propios datos, así como los datos recopilados de organismos públicos y proveedores externos, es una parte fundamental de tu análisis de mercado. Por ejemplo, ventas en tiendas, número de clientes, registros de delitos, indicadores económicos y datos demográficos regionales proporcionados por proveedores en tu país. Usualmente, estos conjuntos de datos tienen un gran número de variables y categorías similares a los datos demográficos de Esri. Al utilizar el flujo de trabajo de configuración de datos personalizados, ya has podido traer y usar dichos datos en Business Analyst Web. Con el próximo lanzamiento, podrás crear tus propias categorías y subcategorías de datos para mostrar en el Buscador de Datos y asignarles íconos personalizados. Puedes luego distribuir y organizar fácilmente tus variables de datos en estas categorías personalizadas, esencialmente creando tu propia experiencia de navegación de datos similar a la disponible para los datos demográficos de Esri.

Editar atributos del sitio y validación
Actualmente, cuando el proyecto es creado por primera vez, puedes definir atributos y configurar la validación de atributos para la capa de puntos predeterminada. Con el próximo lanzamiento, también podrás cambiar y actualizar los atributos después de la creación del proyecto. Además, podrás editar los atributos y validación para capas de otro sitio agregadas a tu proyecto.
Digamos que, al momento de crear tu proyecto, definiste Tráfico, Visibilidad y Área del sitio como los atributos predeterminados. También configuraste la validación del atributo Visibilidad con valores altos y bajos. Luego reuniste información sobre el número de espacios para estacionamiento y alquiler para las localizaciones potenciales que estas analizando. Con el próximo lanzamiento, podrás agregar estos atributos adicionales a la capa que contiene las localizaciones potenciales. Adicionalmente, podrás actualizar la validación de atributos siempre que lo necesites. Por ejemplo, agrega Visibilidad Media como otra opción de validación para el campo Visibilidad.

Puedes usar la opción editar atributos en el menú de acción de capas, actualizar los valores de atributos y validación, y guardar tus ediciones. Ten cuidado al realizar cambios en los atributos y la validación, ya que esto podría afectar los registros existentes.
Nueva forma de compartir informes PDF todo en uno
Al utilizar la opción de informes PDF todo en uno actualmente disponible, puedes ejecutar una combinación de diferentes informes para una ubicación, combinarlos en un único archivo PDF, y enviarlo por correo a ti mismo y a otros.

Con el próximo lanzamiento, cuando agregues la dirección de correo de alguien a CC (copia), podrás controlar como compartir los informes PDF todo en uno. Puedes mantenerlos privados, hacerlos públicos o compartirlos con los miembros de tu organización y grupos.

Si estas enviando por correo el enlace del informe PDF todo en uno, debes compartir el informe con los destinatarios utilizando las opciones de uso compartido que se muestran arriba. Siempre puedes descargar y enviar por correo los informes PDF todo en uno a otros.

Usar la personalización en la aplicación móvil Business Analyst
La personalización de la aplicación realizada en la aplicación web Business Analyst estará disponible en la aplicación móvil, como la temática personalizada de la aplicación para reflejar la marca de su organización y la lista de informes e infografías clásicos personalizados por varios roles de ArcGIS.
Adicionalmente, podrás editar el nombre del sitio para elegir nombres personalizados que te ayuden a identificar el sitio más fácilmente. De forma predeterminada, los nombres de sitios muestran el resultado de geo codificación predeterminado, por ejemplo 123 Main St. Pero es posible que desees cambiar su nombre a "Ubicación potencial en Anaheim" para recordar fácilmente lo que representa esta ubicación.

Actualización de datos
·       Datos adicionales del censo de 2016 para Canadá
·       Datos de Alemania de Nexiga actualizados a la cosecha 2018
·       Datos de Michael-Bauer Research actualizados a la cosecha 2018 para 26 países, incluidos Australia, Brasil, Japón, México, Singapur y Corea del Sur
Mantente informado para obtener más información en el blog después del lanzamiento. Ten en cuenta que todas las actualizaciones planificadas están sujetas a cambios sin previo aviso.