Más

Cambiar el color del marcador según el filtro GeoJSON en Leaftlet

Cambiar el color del marcador según el filtro GeoJSON en Leaftlet


Esto es lo que me gustaría hacer:

Muestre todas las características de un archivo GeoJSON usando Leaflet. Proporcione un cuadro de texto donde se pueda ingresar una propiedad, si alguna de las propiedades de GeoJSON coincide con lo ingresado en el cuadro de texto, el color del icono del marcador cambia.

¿Alguien sabe de un ejemplo de esto o una idea de cómo debería hacerse?


aquí hay un enfoque general aproximado, con algunos ejemplos de código (usando jQuery / javascript):

  1. Configure un par de estilos de color para los marcadores (usando marcadores circulares aquí)

    var blueMarker = {radio: 8, fillColor: "# 0000ff"}; var redMarker = {radio: 8, fillColor: "# ff0000"}
  2. Agregue las entidades geojson como L.circleMarkers, realizando un seguimiento de cada una como una capa para el cambio de color. (Suponiendo que aquí las propiedades de su función tienen un atributo "nombre"; cámbielo según sea necesario)

    var layerlist = {}; L.geoJson (datos, {pointToLayer: function (feature, latlng) {return L.circleMarker (latlng, blueMarker);}, onEachFeature: function (feature, layer) {layerlist [feature.properties.name] = layer;}} ) .addTo (mapa);
  3. Obtenga el nombre de la función del cuadro de texto de entrada (no es un complemento aquí, solo entrada de formulario html normal)

    // al cambiar o enviar var name = $ (input) .val ();
  4. Eliminar la capa por nombre

    map.removeLayer (layerlist [nombre]);
  5. Agrega la capa por nombre y cambia el estilo

    layerlist [nombre] .addTo (mapa) .setStyle (redMarker);

Simplemente vaya a la página de Leaflet.Control.Search

Puedes ver un ejemplo que hace lo que esperas si no lo entiendo mal.

Por simple necesidad, piense en ir a la página de complementos del folleto: algunos complementos pueden ayudarlo.


Los excelentes tutoriales de acceso abierto cuestan dinero para producirlos. Únase al creciente número de personas que apoyan El historiador de la programación para que podamos seguir compartiendo conocimientos de forma gratuita.

En esta lección, aprenderá a crear un mapa web basado en esos datos. Al final de esta lección, podrá:

  • Manipule datos tabulares mediante programación para extraer geonames y crear datos basados ​​en la ubicación
  • Convierta datos tabulares en una estructura de datos geográfica significativa
  • Comprender y aplicar los conceptos básicos de la cartografía web para diseñar su propio mapa web.

Cambiar el color del marcador según el filtro GeoJSON en Leaftlet - Sistemas de información geográfica

Hacer coropletas con folletos es fácil. En este ejemplo, duplicaremos el tutorial de coropletas paso a paso del sitio web Leaflet.js.

El resultado final se verá así (desplácese hasta el final para ver el código completo):

Fuente de datos

Comenzaremos cargando los datos desde JSON. Mientras que el ejemplo de Leaflet.js carga el JSON directamente en JavaScript, con el paquete Leaflet R queremos cargar los datos en R.

En este caso, usaremos el paquete geojsonio para cargar los datos en objetos sp, lo que nos permitirá manipular fácilmente las características geográficas y sus propiedades en R.

Como puede ver, ahora tenemos un SpatialPolygonsDataFrame con columnas de nombre (nombre del estado) y densidad (densidad de población en personas / mi 2) de GeoJSON.

Mapa de estados básicos

A continuación, hagamos un mapa básico con solo el contorno de los estados. Para nuestro mapa base, usaremos el mismo estilo & quotmapbox.light & quot MapBox que el ejemplo si no tiene una cuenta MapBox, puede usar addTiles () en lugar de la llamada addProviderTiles, o elegir un proveedor gratuito.

Guardamos el mapa base básico como una variable separada m para que podamos iterar fácilmente en la llamada addPolygons mientras trabajamos en el resto del tutorial.

Para agregar polígonos uniformes con un estilo predeterminado, simplemente llame a addPolygons sin argumentos adicionales.

Añadiendo algo de color

Ahora, coloreemos los estados de acuerdo con su densidad de población. Tiene varias opciones para asignar datos a colores, para este ejemplo, combinaremos el tutorial de Leaflet.js asignando un conjunto específico de contenedores en colores RColorBrewer.

Primero, definiremos los contenedores. Este es un vector numérico que define los límites entre intervalos ((0,10], (10,20], etc.).

Luego, llamaremos colorBin para generar una función de paleta que mapee los colores RColorBrewer & quotYlOrRd & quot a nuestros bins.

Finalmente, modificaremos addPolygons para usar la función de paleta y los valores de densidad para generar un vector de colores para fillColor, y también agregaremos algunas otras propiedades de estilo estático.

Añadiendo interacción

Lo siguiente que queremos es hacer que los polígonos se resalten cuando el mouse pasa sobre ellos. La función addPolygon tiene un argumento destacado que simplifica este proceso.

(El tutorial de Leaflet.js también agrega un controlador de eventos que se acerca a un estado cuando se hace clic en él. Actualmente, esto no es posible con el paquete Leaflet R, excepto con JavaScript personalizado o Shiny, los cuales están fuera del alcance de este ejemplo.)

Información personalizada

Ahora expongamos los nombres y valores de los estados al usuario.

El tutorial de Leaflet.js muestra la información del estado sobre el que se desplaza el cursor en un control personalizado. Nuevamente, eso es posible agregando JavaScript personalizado o usando Shiny, pero para este ejemplo usaremos la función de etiquetas incorporadas en su lugar.

Generaremos las etiquetas creando algo de HTML y pasándolo a lapply (htmltools :: HTML) para que Leaflet sepa tratar cada etiqueta como HTML en lugar de como texto sin formato. También estableceremos algunas opciones de etiqueta para mejorar el estilo del elemento de etiqueta en sí.

Esta es la versión final de nuestra capa de polígono, así que guardemos el resultado en la variable m.

Leyenda

Como paso final, agreguemos una leyenda. Debido a que elegimos colorear nuestro mapa usando colorBin, la función addLegend hace que sea particularmente fácil agregar una leyenda con los colores e intervalos correctos.

Código completo

El paquete "prospecto" R tiene copyright y copia 2014-2016 RStudio, Inc.
La biblioteca de JavaScript del folleto es & copy 2010–2016 Vladimir Agafonkin, 2010–2011 CloudMade.
Mapas y copia de colaboradores de OpenStreetMap a menos que se indique lo contrario.


Capas

Mientras que las fuentes contienen los datos, las capas se utilizan para diseñar y mostrar la información. Se ofrecen varios tipos de capas según la geometría de su fuente. A excepción de las capas del tipo de fondo, cada capa debe hacer referencia a una fuente. Opcionalmente, puede filtrar entidades y luego definir cómo se les aplica el estilo.

Cada capa ofrece una API setProperties que se puede utilizar para diseñar la capa de muchas formas diferentes. Tenga en cuenta que en lugar de crear diferentes capas en función de determinados casos dentro de los datos de origen, se recomienda utilizar un estilo basado en datos para reducir la cantidad de capas que el mapa necesita representar.

Fondo

El tipo de capa de fondo es único en el sentido de que no requiere una fuente. Las capas de fondo pueden ser de un color sólido o un patrón.

Las capas de relleno tienen una geometría de forma cerrada que puede resultar útil para marcar áreas en un mapa. Utilice un FillLayer con geometrías GeoJSON Polygon o MultiPolygon. La geometría es como una capa de línea que consta de una serie de coordenadas en un orden particular con el primer y último punto que tienen la misma coordenada. La geometría está "cerrada" cuando la lista de coordenadas comienza y termina con las mismas coordenadas. Si la geometría no está incluida, la capa de relleno se renderizará, pero algunos vértices y lados pueden quedar cortados por los límites del mosaico.

Para alterar la forma de la geometría una vez que la haya agregado, la capa puede permanecer sin cambios necesarios, solo se debe actualizar la fuente que utiliza. La capa siempre mostrará las últimas actualizaciones dentro de su fuente.

Construya un FeatureCollection GeoJSON con la geometría de la línea y luego muéstrelo en el mapa usando una capa de línea.

Se puede combinar una serie de coordenadas para crear un segmento de línea que se muestra en un mapa. Entre cada par de coordenadas, se crea un segmento de línea & # x27s que se dibuja en línea recta y conecta los dos puntos.

Antes de comenzar, querrá asegurarse de que la fuente que usará su capa tenga lineStrings como parte de su geometría y puede encontrar un ejemplo de esto en la sección de fuentes de GeoJSON. Una vez que se ha creado la fuente y se ha agregado al mapa, se puede iniciar una capa de línea y se pueden configurar las propiedades.

Símbolo

Las capas de símbolo muestran una única ubicación en el mapa con un icono o una etiqueta de texto. Al igual que los marcadores GL y las vistas de marcadores, la capa de símbolo puede representar los mismos datos y ofrece la mayor potencia para la visualización de mapas. Para empezar, agregará una imagen de marcador al mapa y luego la mostrará como una capa de símbolo.

Las capas de símbolos no solo pueden marcar ubicaciones en el mapa mediante una imagen, sino que también pueden mostrar texto directamente en el mapa. El SDK maneja las capas de símbolos de texto en un proceso similar al fragmento de imagen proporcionado anteriormente, solo cambian las propiedades de la capa.

Anclas y compensaciones de iconos

De forma predeterminada, un icono de SymbolLayer está anclado a la coordenada en el icono & # x27s centrar. Si bien esto es apropiado para muchos íconos, puede que no sea apropiado para íconos con forma de lágrimas o chinchetas, cuando se esperaría que la parte inferior del ícono estuviera anclada a la coordenada. En estos casos, puede ajustar la posición del icono especificando un ancla o estableciendo un compensar.

Si está utilizando la imagen mapbox_marker_icon_default incluida con Mapbox Maps SDK para Android, no necesita ajustar el ancla del icono. La imagen incluye un espaciado inferior que & # x27 es igual a la mitad de la altura del pasador, por lo que el punto se alineará con la coordenada.


Mapa de coropletas

¡Bueno eso fue divertido! Pero esta puede no ser una visualización ideal para comparar mapas entre sí. Por suerte para nosotros, también hay una forma de crear un mapa de coropletas gracias a Folium.

Un mapa de coropletas (del griego χώρο (& # 8220area / region & # 8221) + πλήθος (& # 8220multitude & # 8221)) es un mapa temático en el que las áreas están sombreadas o modeladas en proporción a la medida de la variable estadística que se muestra en la mapa, como la densidad de población o el ingreso per cápita.

Para crear una coropleta, necesitamos un archivo geojson para crear las áreas / límites que coincidan con los distritos policiales de San Francisco en el archivo de datos. Con una búsqueda en Google en & # 8220sfpd distritos geojson & # 8221, encontré un sitio web de datos abiertos del gobierno con un Shapefile que casi coincide con mis necesidades.

El siguiente paso es convertir el Shapefile en un archivo geojson. La forma más sencilla es utilizar un cliente web ogr2ogr. Seleccione el archivo zip descargado y coloque crs: 84 en el campo Target SRS. Guarde el resultado como sfpddistricts.geojson y cargue el archivo en su proyecto de Domino.

El código adicional de Python para crear una coropleta es el siguiente. Tenga en cuenta que utilicé todo el conjunto de datos en lugar de los 1000 registros utilizados anteriormente. Debido a que la coropleta se basa en los recuentos agregados, la velocidad no se ve afectada por grandes conjuntos de datos.

Crea un mapa de coropletas como el siguiente con una leyenda en la esquina superior derecha. Los esquemas de color de Color Brewer están incorporados y agregados como fill_color = 'YlOrRd'. Los recuentos agregados se almacenan en un archivo json separado (crimedata2.to_json ('crimeagg.json')) que luego se utiliza como fuente de datos durante la creación del mapa.


Ahora que podemos mostrar el centro de un mapa en el punto que elijamos, podemos intentar agregar más contenido al mapa mediante marcadores. Los marcadores pueden ser extremadamente útiles para almacenar información sobre ubicaciones en el mapa, como cruces de calles, información de edificios, etc. Usando el mismo mapa, agreguemos marcadores que indiquen dónde está CU Boulder, así como el campus este y el edificio SEEC.

El folleto (o folio para nuestros propósitos) tiene algunas otras características bastante buenas que pueden resultarle útiles. Hay algunos excelentes tutoriales que se pueden encontrar en línea con ejemplos que deberían adaptarse fácilmente a su código. Además, folium puede trabajar con marcos de datos de pandas para superponer datos en el mapa interactivo.


Creación de mapas para AnyChart

Ahora veamos el proceso de creación de un mapa personalizado. Tenga en cuenta que hay muchas formas de trabajar con QGIS, por lo que algunos comandos o interfaces pueden ser diferentes debido a la versión del programa o la plataforma utilizada. Aquí solo se considera una forma de usar QGIS, así que busque su documentación si necesita información adicional.

2) Cuando haya instalado QGIS, el primer paso es importar sus datos. Tomemos el mapa mundial como fuente y seleccionemos América del Norte para la demostración. Seleccione "Agregar capa vectorial" en el menú "Capa".

Defina la ruta al catálogo con los archivos del mapa.

Así es como se verá el mapa mundial cuando se importe:

3) Entonces, como hemos importado el mapa, debemos seleccionar el territorio con el que trabajaremos y extraerlo de todo el mapa. Para eso necesitamos una herramienta de selección (de tipo caja por defecto, para cambiar el tipo haga clic en la flecha a la derecha de la herramienta). Aquí hemos utilizado una herramienta de selección a mano alzada.

Necesitamos deshacernos del resto ahora; para eso, vaya al menú, haga clic en el botón "Capa" y elija "Guardar como".

No olvide hacer coincidir el cuadro con "Guardar solo las características seleccionadas"; a menos que lo haga, obtendrá el archivo con todo el mapa. Para ver el territorio seleccionado por separado, desmarque la capa en la lista de capas.

4) Ahora, estamos listos para continuar. Cambiemos la proyección ahora.

La proyección es solo un tipo de vista que muestra cómo miramos el mapa. Hay un montón de proyecciones, hechas por diferentes geógrafos en diferentes épocas para diferentes propósitos, no todas se ajustan al mapa del mundo.

Como se puede ver en la esquina inferior derecha, el tipo de proyección predeterminado es EPSG 4326. Si hace clic en él, abrirá la ventana "Propiedades del proyecto".

En la parte superior de la ventana hay una casilla de verificación "Habilitar 'sobre la marcha' transformación CRS". Cuando se marca, transforma automáticamente los archivos de mapas agregados en una proyección que se establece en todo el proyecto como predeterminada. Sin embargo, si la proyección predeterminada es no global, los archivos de mapas recién agregados no pueden ser reconocidos por el tipo de proyección predeterminado.

Ahora, cambiemos la proyección de nuestra parte del mapa. Para eso, marque la casilla "Habilitar 'sobre la marcha' transformación CRS" y use el campo "Filtro" para encontrar la proyección adecuada.

Como puede ver arriba, tenemos varias proyecciones para la etiqueta de búsqueda "usa". Elijamos el primero, USA_Contiguous_Albers_Equal_Area_Conic (código EPSG 102003). Aplica la proyección.

5) Ahora, simplifiquemos la geometría. Cuantos menos detalles haya en un mapa, más rápido funcionará AnyChart y más rápido se cargará la página.

La forma más sencilla de hacerlo es ir al menú Vector & gt Herramientas de geometría & gt Simplificar geometrías. Establezca una tolerancia de 1 (se cambiará automáticamente a 1,0000), marque la casilla "Agregar resultado al lienzo" y seleccione un nuevo archivo de resultados para guardar el resultado.

Al final del proceso, obtendrá una pequeña ventana de información, donde la diferencia entre el archivo de mapa original y el transformado es bastante clara.

Cuando todo haya terminado, obtendrá una nueva capa con geometría simplificada.

6) Veamos las propiedades del mapa; vale la pena inspeccionarlas antes de exportar. Vaya a la tabla de contenido, haga clic con el botón derecho en la capa y seleccione "Abrir tabla de atributos". Verá la lista de atributos que se incluirán en el archivo .geojson. Como AnyChart se creó de manera bastante flexible para trabajar con datos, puede trabajar con mapas definidos por el usuario, además, no existen requisitos especiales para sus metadatos.

7) Si finalmente está satisfecho con su mapa, debe exportarlo al formato GeoJSON para usarlo con AnyChart. Para eso, haga clic con el botón derecho en la capa que desea exportar en la tabla "Capas" y seleccione "Guardar como". Asegúrese de haber seleccionado guardar la capa en formato GeoJSON. El archivo de resultados es apropiado para usarlo directamente con AnyChart.

Puede notar que QGIS incluye una gran cantidad de decimales en las coordenadas GeoJSON por defecto. Puede eliminarlo usando una expresión regular o similar para optimizarlo.

No olvide elegir el CRS que ha utilizado en el proyecto, ya que es posible que el predeterminado se establezca automáticamente.


Agregar datos a su mapa

Hasta ahora, ha aprendido a agregar capas de mosaicos a un mapa. En el ejemplo anterior, agregó una capa WMS encima de una capa de mosaico base. Ahora, aprenderá a dibujar sus propias capas que deben agregarse encima de una capa de mosaico. Las tres primitivas geométricas de datos vectoriales que puede agregar a un mapa a menudo se denominan puntos, líneas y polígonos.

En esta sección, aprenderá a agregar marcadores, polilíneas y polígonos a su mapa.

Puntos

Hasta ahora, tu mapa no es tan interesante. A menudo dibuja un mapa para resaltar un lugar o punto específico. El folleto tiene una clase de punto, sin embargo, no se usa para agregar simplemente un punto en el mapa con un icono para especificar el lugar. En Leaflet, los puntos se agregan al mapa usando la clase Marker. Como mínimo, la clase Marker requiere una latitud y una longitud, como se muestra en el siguiente código:

Puede crear un marcador simplemente llamando a L.marker ([lat, long]). AddTo (map), pero asignar el marcador a una variable le permitirá interactuar con él por su nombre. ¿Cómo se borra un marcador específico si no tiene nombre?

En el código anterior, creaste un marcador en el punto [35.10418, -106.62987] y luego, al igual que con la capa de mosaico, usaste la función addTo (mapa). Esto creó un icono de marcador en la latitud y longitud especificadas. La siguiente captura de pantalla muestra el marcador en el mapa:

El ejemplo anterior es un marcador simplificado y casi inútil. La clase Marker tiene opciones, eventos y métodos que puede llamar para hacerlos más interactivos y útiles. Aprenderá acerca de los métodos y mdash, específicamente el método bindPopup () y mdash y los eventos más adelante en este capítulo.


Serie de innovación de Design Studio y # 8211 Tema 6: Geo Maps Parte I y # 8211 Revisión de características

Una de las nuevas características emocionantes y esperadas introducidas en Design Studio 1.5 es el componente Geo Map. Después de haberlo probado, pensé en compartir mis experiencias. Debo decir que para una primera versión, creo que es bastante impresionante en términos de capacidades y también bastante fácil de usar. Sin duda, ha superado las capacidades de mapeo estándar de Xcelsius.

Voy a describir las características del mapa geográfico en el contexto de un ejemplo de BW BEx relacionado con los datos de desempeño puntual de una aerolínea de EE. UU., Incluidas las ubicaciones de los aeropuertos y estadísticas como: % Retraso meteorológico y % Vuelos retrasados.

Configuración

El componente Geo Map permite incluir mapas interactivos en una aplicación, que consta de formas y marcadores superpuestos en un mapa base. Describiré el proceso en términos de mi escenario. Después de diseñar la aplicación, mi espacio de trabajo se ve así:

La propiedad estándar más importante es la URL del mapa base. El componente Geo Map tiene como valor predeterminado el código abierto OpenStreetMap proveedor de mosaicos como se muestra a continuación. Puede usar su propio proveedor de mosaicos, pero encontré OpenStreetMap bastante suficiente para mis propósitos. Otras propiedades incluyen el crédito del mapa base y la visibilidad de la leyenda. También puede activar la interactividad basada en el evento & # 8220On Select & # 8221 del mapa.

¡Esta es la parte divertida! En las propiedades adicionales se define el capas para su mapa. Hay 3 tipos de capas geográficas:

  • Capas de formas para superponer formas basadas en archivos GeoJSON
  • Capas de puntos para superponer marcadores para ubicaciones geográficas específicas
  • Capas de gráficos para superponer burbujas según una medida específica

A cada capa se le debe asignar una fuente de datos. Las fuentes de datos se pueden reutilizar en todas las capas. En mi ejemplo, me las arreglé con solo dos fuentes de datos como se muestra a continuación:

La primera fuente de datos incluye una dimensión geográfica con atributos de latitud y longitud, así como medidas. Se utiliza en capas de puntos y capas de gráficos.

Cada fuente de datos debe contener solo una dimensión geográfica en el filas sección de la Vista inicial. Para las capas de Puntos y Gráficos, la dimensión geográfica idealmente debería incluir los atributos estándar de latitud y longitud de BW; de lo contrario, deben definirse como medidas en el columnas sección de la Vista inicial. En mi ejemplo, preferí usar los atributos estándar de BW como se muestra a continuación:

La segunda fuente de datos se utiliza para que las capas Shapes asignen códigos de estado FIPS (Estándares federales de procesamiento de información) de EE. UU. Al polígono correspondiente que representa el estado en el archivo GeoJSON. Los atributos de longitud y latitud no son obligatorios.

Para ilustrar los diferentes casos de uso de las características de Geo Map, he definido 5 capas diferentes de la siguiente manera:

1. Marcador de ubicación del aeropuerto de EE. UU.

Esta capa es de tipo Marcador. Por lo tanto, requiere atributos de dimensión geográfica de latitud y longitud. Notará que no hay ningún campo para hacer referencia explícita a la dimensión geográfica aquí porque solo se puede definir uno en la Vista inicial de la fuente de datos. Para este ejemplo, la dimensión geográfica en la fuente de datos DS_1 es la Aeropuerto de origen que se trazará con un marcador basado en las coordenadas de longitud y latitud. Finalmente, se debe seleccionar un color de marcador.

2. Burbuja de ubicación del aeropuerto de EE. UU.

Esta capa es de tipo Chart. Por el momento, el único tipo de gráfico geográfico disponible es un gráfico de burbujas. El tamaño de una burbuja es proporcional al valor de la medida seleccionada, que en este caso es el % Retraso meteorológico. Las burbujas se centran en la ubicación geográfica del aeropuerto según la latitud y longitud asignadas en la fuente de datos DS_1. En este caso, no se especifica un archivo GeoJSON porque solo queremos mostrar burbujas en las ubicaciones geográficas sin la necesidad de superponerlas en las formas. Por lo tanto, la Propiedad de mapeo y Tipo de mapeo tampoco son relevantes.

Esta capa también es de tipo Chart, como la anterior. Sin embargo, una diferencia importante es que no se hace referencia a la latitud y la longitud. En su lugar, se especifica un archivo GeoJSON personalizado para definir formas (polígonos) que corresponden a los estados de EE. UU. Cada polígono de estado en el archivo GeoJSON incluye propiedades, una de las cuales se puede vincular a través del Propiedad de mapeo y Tipo de mapeo para apoyar la interactividad a través del evento & # 8220On Select & # 8221 del componente Geo Map. La dimensión vinculada a la forma del estado se deriva automáticamente de la fuente de datos DS_2, ya que solo incluye una dimensión geográfica.

Vale la pena señalar aquí que cuando no se especifican la latitud y la longitud, la burbuja se centrará dentro de su forma correspondiente, en este caso el estado.

Esta capa es de tipo Shape. En el ejemplo, el archivo GeoJSON especificado define los estados de EE. UU. (Como antes) con la asociación de datos correspondiente a través del Propiedad de mapeo y Tipo de mapeo. Además, en este caso, el Color de inicio y Color final las propiedades se han definido de modo que la salida resultante tenga la forma de un mapa de coropletas, con el degradado de color basado en la medida elegida, % Retraso meteorológico de la fuente de datos DS_2.

Esta capa es la misma que la anterior, pero en su lugar se especifica un solo color para que la salida tenga la forma de un & # 8220 mapa analítico & # 8221 (como los de Xcelsius). En este caso, puede ser apropiado ocultar la leyenda. Dado que no hay degradado de color, la medida seleccionada es arbitraria.

Interactividad a través de secuencias de comandos

Para demostrar los diferentes tipos de efectos que se pueden lograr, he incluido una barra lateral de configuración que permite alternar la visibilidad del mapa base y seleccionar diferentes combinaciones de capas, como se muestra a continuación:

El script de evento & # 8220On Select & # 8221 del grupo de radio de visibilidad del mapa base se ha definido de la siguiente manera:

Aquí el setMapUrl () El método muestra el mapa base estableciendo la URL del mapa en la URL predeterminada (en este caso, OpenStreetMap), u oculta el mapa base especificando una URL nula.

El script de evento & # 8220On Select & # 8221 del grupo de casillas de verificación de selección de capa se ha definido de la siguiente manera para controlar la visualización de las capas:

Además, para demostrar un ejemplo de obtención de información adicional basada en la selección de un área del mapa, el siguiente script muestra un gráfico que clasifica los aeropuertos dentro del estado elegido:

Se recomienda ejecutar el getSelectedLayer () y getSelectedMember () métodos juntos para obtener mejores resultados. En el ejemplo anterior, el miembro devuelto es la clave de estado basada en la capa & # 8217s Propiedad de mapeo GeoJSON.

GeoJSON personalizado

Los archivos de forma GeoJSON se utilizan generalmente para superponer regiones. Están disponibles en Internet. Para este ejemplo, obtuve un archivo de estado de EE. UU. Del enlace GeoJSON y KML Data para los Estados Unidos (gz_2010_us_040_00_500k.json). Alternativamente, se pueden crear a partir de otras fuentes, como Natural Earth, utilizando herramientas como las siguientes:

Al igual que los archivos CSS, los archivos GeoJSON deben colocarse en la carpeta del repositorio de la aplicación para que sean accesibles durante el desarrollo en modo local.

Capturas de pantalla

Las capturas de pantalla siguientes ilustran las capacidades del nuevo componente Geo Map:

En mi opinión, el proveedor de mosaicos predeterminado OpenStreetMap es bastante adecuado para muchos casos de uso.

Esperamos que este blog haya proporcionado una descripción general útil de las principales funciones disponibles con el nuevo componente Geo Map. Creo que es una adición integral a Design Studio que puede cumplir con los requisitos de muchos casos de uso típicos. Sin duda, es un debut muy sólido para el mapeo geográfico.

Planeo seguir esto con la Parte II, que explorará el uso de capas para implementar la funcionalidad de desglose a través de diferentes niveles de mapas.

Mientras tanto, me interesaría conocer su opinión sobre el componente Mapa geográfico y los ejemplos de casos de uso que le gustaría abordar para sus propios requisitos comerciales. Los comentarios y las preguntas son bienvenidos.


Leer independiente, revisiones autenticadas en G2

Estamos usando mucho los formatos de archivo y los controles de lista de Windows / JavaScript. Son rápidos, fáciles de usar y la documentación es buena y contiene ejemplos. Los tickets con preguntas o sugerencias se respondieron en un día, por lo que nos complace utilizar las bibliotecas de Syncfusion.

El uso de controles Syncfusion Angular y JavaScript hace que el desarrollo web front-end sea pan comido. Cada componente tiene muchas propiedades que se pueden configurar según su deseo, métodos que se pueden usar para interactuar con el elemento y muchos eventos que se activan en diferentes etapas, lo que facilita la modificación de sus componentes de acuerdo con el estado de la aplicación. tarea. Además, ¡su apoyo es asombroso! Siempre ofrecen un proyecto de trabajo de muestra, lo que hace que sea muy sencillo resolver su pregunta sobre su código.


Para crear la aplicación de búsqueda local, creará un archivo HTML e inicializará el mapa. Luego, agregará el complemento Mapbox GL JS Geocoder y establecerá los parámetros de proximidad y bbox.

Una vez que la aplicación se esté ejecutando, utilizará las herramientas de desarrollo de su navegador y # x27s para ver cómo el navegador interpreta el complemento Geocoder y la solicitud de la API # x27s.

Configura tu archivo HTML

Abra su editor de texto y cree un nuevo archivo llamado index.html. Configure este nuevo archivo HTML pegando el siguiente código en su editor de texto. Este código crea la estructura de la página.

Hay un elemento & ltdiv & gt con el mapa de ID en & ltbody & gt de la página. Este & ltdiv & gt es el contenedor en el que se mostrará el mapa en la página.

Inicializar el mapa

A continuación, agregará el código JS Mapbox GL que inicializa un mapa, que se mostrará en el & ltdiv & gt que creó en el último paso. En index.html, coloque el siguiente fragmento encima de la etiqueta de cierre & lt / body & gt. Asegúrese de establecer la variable mapbox.accessToken igual a su token de acceso Mapbox.

Este código JS de Mapbox GL establece un estilo para el mapa, le da coordenadas en las que centrarse y establece un nivel de zoom.

Guarde sus cambios. Abra el archivo HTML en su navegador para ver el mapa renderizado.

Agregar un marcador al mapa

El siguiente paso es agregar un marcador al mapa en las coordenadas del campus & # x27s para mostrar el punto de referencia & # x27s ubicación.

Después del código de inicialización que escribió en el último paso, agregue el siguiente fragmento para agregar un marcador al mapa:

Guarde sus cambios y actualice la página en su navegador. Habrá un marcador en el mapa en las coordenadas especificadas.

Agregar el geocodificador

El siguiente paso es agregar un geocodificador usando el complemento Mapbox GL JS Geocoder. Para hacer esto, primero necesita agregar enlaces al geocodificador & # x27s JavaScript y CSS al encabezado del archivo HTML.

Una vez que se hayan agregado estos enlaces, podrá utilizar el complemento Mapbox GL JS Geocoder en su aplicación. A continuación, agregue el siguiente código encima de la etiqueta de cierre & lt / script & gt en su archivo HTML.

La aplicación que está creando para este tutorial limita los resultados de búsqueda a una ubicación específica. Para darles a sus usuarios un recordatorio visual de este hecho, utilizará el parámetro de marcador de posición en el geocodificador para configurar el texto personalizado que se mostrará en la barra de búsqueda.

Agregue la siguiente línea al complemento, después del token de acceso:

Guarde sus cambios. Actualice la página en su navegador y verá que se ha agregado al mapa un cuadro de búsqueda de geocodificador con texto personalizado. Cuando escribe un término de búsqueda en el cuadro y selecciona un resultado, el mapa vuela a esa ubicación.

Agregue los parámetros bbox y proximidad

Dentro de la declaración map.addControl que agregó en el último paso, después del parámetro de marcador de posición, agregue los parámetros bbox y proximidad.

En el complemento Mapbox GL JS Geocoder, el parámetro bbox debe formatearse como un formación. El parámetro de proximidad debe tener el formato objeto con una propiedad de longitud y una propiedad de latitud. (Para obtener más información sobre cómo formatear los parámetros de consulta, consulte la documentación del complemento Mapbox GL JS Geocoder).

Con la adición de estos parámetros, la declaración completa se verá así:

Guarde el archivo HTML y actualice la página en su navegador. Ahora, cuando ingresa una búsqueda en el cuadro de búsqueda del geocodificador & # x27s, no recibirá ningún resultado fuera del cuadro delimitador. Y los resultados que devuelve el geocodificador se ponderan según su proximidad al campus de Berkeley.

Colocar marcadores en los resultados seleccionados

El Geocodificador Mapbox GL establece un marcador en la ubicación del resultado de la búsqueda de forma predeterminada. En su lugar, este ejemplo agrega un marcador personalizado como una nueva capa. Si desea utilizar el marcador predeterminado proporcionado por el geocodificador, elimine el marcador de línea: falso, de la creación de instancias del nuevo geocodificador.

El último paso para crear esta aplicación es colocar un marcador personalizado en el mapa en la ubicación de un resultado de búsqueda seleccionado. La lógica para hacer esto debe estar envuelta en un evento map.on (& # x27load & # x27) para que no se active antes de que se haya cargado el mapa. Antes de cerrar la etiqueta & lt / script & gt, pegue el siguiente JavaScript:

Guarde el archivo HTML y actualice la página en su navegador. Cuando busque y seleccione un resultado, se colocará un marcador en las coordenadas del resultado & # x27s.

Ver la llamada a la API en las herramientas para desarrolladores

Para ver lo que sucede detrás de escena de & # x27s cuando utiliza el complemento Mapbox GL JS Geocoder, puede ver la llamada a la API sin procesar utilizando las herramientas de desarrollo de su navegador & # x27s. Esto puede resultar útil para depurar una consulta si los resultados devueltos no son los esperados.

Las siguientes instrucciones son para el diseño de las herramientas para desarrolladores de Chrome & # x27s. Para otros navegadores, algunos detalles pueden variar, pero en general el flujo de trabajo será similar. Lea la página de ayuda de su navegador & # x27s para obtener detalles sobre cómo abrir las herramientas para desarrolladores y encontrar la información de la red.

  1. Cargue la página que creó en este tutorial en su navegador o actualícela si ya está abierta.
  2. Abra el navegador y las herramientas de desarrollo # x27s. (En Chrome, puede hacer esto escribiendo comando + opción + i o comando + opción + j.)
  3. Escriba una frase de texto en la barra de búsqueda del geocodificador de la aplicación y # x27s y seleccione un resultado. (El siguiente ejemplo corresponde al término de búsqueda & quotcafé & quot).
  4. Haga clic en el Red pestaña.
  5. En el Filtrar barra de búsqueda, escriba & quot codificación geográfica & quot. Esto reducirá la lista de llamadas de red a las realizadas por la API de codificación geográfica de Mapbox.
  6. You will likely see more than one Geocoding API call in the list, each representing a different stage of the search text. Click on the option that has the complete search text (for example, "coffee" instead of "coff").
  7. In the Request URL section, you will see a request that is like the cURL API request that you created in the Build the Geocoding API query section of this tutorial:

The difference between the query returned by the browser and the one you created earlier is that this one also includes the limit parameter, with the default value of 5 passed in.