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:

Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)