Mapa

Map Grafica las filas de Dataverse desde una vista o consulta en su latitud y longitud, junto a marcadores, líneas, áreas y círculos propios. Un componente, igual que en Blazor y React, dibujado por el proveedor que elijas: Azure Maps, Esri, Google, OpenStreetMap o cualquier estilo MapLibre.

Proveedores

La configuración del portal nombra a su proveedor y contiene las claves de cada proveedor en la PowerPortalsPro:Maps sección, por lo que un mapa necesita no nombrar ninguno y ninguna página contiene una clave. Marcadores, grupos, ventanas emergentes y clics funcionan igual en todos los proveedores:

• Azure Maps: ninguna clave, ya que el portal inicia sesión con su propia identidad (abajo). Su atribución se muestra según lo que piden sus términos.
• Esri: una clave API de ArcGIS en Esri:ApiKey, y cualquier estilo de mapa base de ArcGIS en lugar de calles.
• Google: una clave de API JavaScript de Maps en Google:ApiKey, y un ID de mapa para un mapa estilizado en Google Cloud.
• OpenStreetMap: sin clave, y el proveedor cuando no está configurado, para desarrollo y uso ligero. La política de tiles de OpenStreetMap descarta el uso intensivo; nombra tu propio servidor de tiles para OpenStreetMap:TileUrl producción.
• MapLibre: cualquier URL de estilo MapLibre o de mosaico raster en MapLibre:StyleUrl o MapLibre:TileUrl, como MapTiler, OpenFreeMap, Stadia o tu propio servidor.

Las claves de Esri y Google llegan al navegador del espectador, que las envía al proveedor, como hacen todos los mapas web. Restringe cada una a las direcciones de tu portal en la consola del proveedor.

Una página nombra a un proveedor solo para usar otro que no sea el del portal, y solo dice cómo se ve: un estilo, un ID de mapa, una vista de los bordes en disputa. Lo que deja sin configurar proviene de la configuración. En un tema oscuro, el mapa cambia al estilo oscuro del proveedor; UsePortalTheme lo apaga.

Azure Maps sin clave

Un mapa de Azure Maps inicia sesión con tokens Entra que el portal emite a su propia identidad, la que se conecta a Dataverse, por lo que no se necesita ninguna clave de Azure Maps ni llega al navegador. Asigna a esa identidad el rol de Lector de Datos de Azure Maps en la cuenta de Azure Maps y nada más, y pon AzureMaps:ClientId el ID del cliente en la página de Autenticación de la cuenta.

Cada espectador mantiene el token mientras se ejecuta, así que solo puede hacer lo que ese rol permite; limita también los orígenes permitidos de la cuenta a las direcciones de tu portal. El mapa pide un token nuevo antes de que expire. Una página lo pide una vez, y un espectador puede recibir 120 tokens por minuto salvo PowerPortalsPro:Maps:RateLimit que diga lo contrario; los visitantes que no han iniciado sesión cuentan por su dirección, que comparten todos los que estén detrás de la conexión de una oficina.

Filas del Dataverse

Da una vista o una consulta FetchXML y cada fila con latitud y longitud se convierte en un marcador nombrado por el nombre principal de la tabla. Las filas se leen con permisos del usuario, como las de una cuadrícula, y al hacer clic en una se muestran las columnas de su vista.

Las filas sin ambas coordenadas quedan fuera de la consulta. El mapa lee 1.000 filas salvo MaxRows que diga lo contrario (como máximo 5.000) y anota en el mapa cuando hay más.

Las filas sin coordenadas pueden completarlas a partir de sus direcciones a medida que se guardan: véase Geocodificación.

Varias tablas

Con MultiTable (React: multiTable), el mapa muestra las filas de cada tabla que el servidor registra para mapas con ForMaps, cada tabla en su propio color con una leyenda. El registro nombra las columnas que contienen la latitud y longitud de una fila, que siempre se leen. DefaultTables elige las tablas que se muestran primero y Tables las que puede mostrar; Regarding lo reduce a las filas alrededor de un registro.

Una tabla cuyas coordenadas están registradas con AddMapCoordinates, o rellenadas con AddGeocoding, se registra para mapas con ForMaps() solo: véase Geocodificación.

Una barra de herramientas sobre el mapa elige la vista: cada tabla, o una vista de varias tablas registradas con AddMultiTableView y ForMaps(). ViewIds (React: viewIds) ofrece solo las vistas registradas que nombra, en su orden, y DefaultViewId (defaultViewId) la que se abre. Su menú de Filtros activa o desactiva las tablas y edita los filtros de cada tabla. Con AllowSavedViews (React: allowSavedViews), un usuario iniciado sesión puede guardar lo que el mapa muestra como una vista propia: véase Vistas guardadas.

Encontrar registros cerca de un lugar

Con AllowNearSearch (React: allowNearSearch), un mapa de varias tablas tiene un botón Cerca en su barra de herramientas. Encuentra un lugar — una dirección, con la búsqueda del proveedor del mapa, o la ubicación del visitante, que el navegador le pide que comparta — y el mapa muestra solo las filas dentro de la distancia elegida, las más cercanas en todas las tablas: el círculo está dibujado, el mapa se ajusta a él, y la ventana emergente de cada fila indica la distancia que tiene. NearDistances (nearDistances) establece las distancias ofrecidas, 1, 5, 10, 25, 50 y 100 a menos que esté configurado, NearDistance (nearDistance) la que inicia, 25 si no está configurado, y NearDistanceUnit (nearDistanceUnit) si empieza en millas, el valor por defecto o kilómetros; el visitante puede cambiar. Véalo en la demo de Cercano.

Cada tabla se lee por sus coordenadas registradas, con permisos del visitante: el servidor lee el cuadrado alrededor del círculo, mantiene las filas dentro de la distancia por su distancia sobre el suelo y devuelve la más cercana. Una búsqueda cerca de un lugar mantiene como máximo 500 filas, las más cercanas, y la leyenda del mapa indica cuándo había más; NearSearchOptions.MaximumMatches sube o baja esa cifra, hasta 5.000. Un visitante que puede no leer las coordenadas de una tabla no encuentra ninguna de sus filas.

Ventanas emergentes y clics

Al hacer clic en un elemento, un marcador o una línea, área o círculo igual, se OnItemClick eleva con el objeto, sus datos y el lugar donde se ha hecho clic, y luego se abre una ventana emergente sobre él. La ventana emergente es una tarjeta Fluent con tu propio contenido: una plantilla en Blazor, una función de renderizado en React. Un clic en el propio mapa se OnMapClick eleva con su posición.

Para responder a un clic a tu manera, abre la página de un registro, por ejemplo, o selecciona una región, llama PreventDefault() al clic (preventDefault() en React) y el mapa no abre ninguna ventana emergente para ello. ShowPopups Configura para que False desactiva ventanas emergentes para cada elemento.

El encabezado emergente de una fila enlaza a la página de su registro, la registrada para su tabla con AddRecordPage (ver Páginas de registro), en un mapa de una tabla o varias. RecordUrl La enlaza en otro lugar: una URL con {0} en lugar del id de la fila y {1} el de su tabla. ShowRecordLinks (React: showRecordLinks) configurado como falso desactiva los enlaces. Un elemento de tus propios enlaces enlaza con su Url. En React, onNavigate sigue el enlace con tu router.

Los marcadores en un lugar, como los contactos en una dirección, nunca se separan al hacer zoom, así que su grupo los lista en su lugar.

Colores por columna

ColorColumn colorea el marcador de cada fila según su opción en una columna de elección, estado, motivo de estado o sí/no: el color que tiene la opción en Dataverse, o una de las paletas de Fluent cuando no tiene ninguno, con una leyenda de las opciones en el mapa. Las filas sin valor son grises. Para cualquier otra regla, RecordColorSelector en Blazor y una función para recordColor en React dan a cada fila su propio color.

Búsqueda de direcciones

ShowAddressSearch coloca un cuadro de búsqueda sobre la esquina del mapa. Encuentra direcciones y lugares con el propio proveedor del portal, coloca los lugares en vista primero y fija el elegido; OnAddressSelected entrega el lugar a la página y lo anula una vez que la búsqueda está completada. AddressSearchCountries Lo mantiene en algunos países y GoToAddressAsync (goToAddress en la referencia de React) busca desde el código.

Azure Maps, Esri y Google sugieren lugares como tipos de visitantes. La clave de Google necesita activar la API de Lugares (Nuevo), y la clave de Esri su privilegio de geocodificación. Los mapas de OpenStreetMap y MapLibre buscan en Nominatim de OpenStreetMap, que su política de uso permite solo para uso ligero y nunca cuando alguien escribe, así que buscan cuando se pulsa Enter; nombra tu propio servidor Nominatim en OpenStreetMap:GeocoderUrl o MapLibre:GeocoderUrl para más.

Address (address en React) muestra una dirección sin cuadro de búsqueda: el mapa la encuentra con la misma búsqueda una vez que se dibuja, y de nuevo cada vez que cambia, la fija y hace zoom. Un spinner muestra mientras mira, y un mensaje cuando no se encuentra. Es lo que AddressDisplayValueabre el pin del mapa para una dirección sin coordenadas.

Impresión

ShowPrintButton (showPrintButton en React) añade un botón Imprimir — en la barra de herramientas de un MultiTable mapa, o bien sobre la esquina superior derecha del mapa — que imprime el mapa tal como lo muestra, con sus pines, su leyenda, la ventana emergente abierta y la atribución del proveedor. PrintTitle es el encabezado que está encima, y PrintEntries lista los registros debajo, cada uno junto a la etiqueta de su PIN. El Label de un marcador se dibuja en su pin en lugar del punto: da un número a las paradas y la impresión se lee como una hoja de ruta. PrintAsync() (print() en la referencia React) imprime desde un botón propio de la página, y OnPrintChanged (onPrintChange) indica cuándo se puede imprimir el mapa y si puede guardarse como imagen, para que ese botón siga el siguiente.

Azure Maps, Esri, OpenStreetMap y MapLibre se imprimen como una imagen del mapa, por lo que la página alrededor del mapa queda fuera y el mapa no se mueve; el mismo botón también guarda esa imagen como archivo PNG (SaveImageAsync, o saveImage()). Se dibuja una ventana emergente abierta en la imagen con su título y campos, o los marcadores que lista; una que muestra el contenido propio de la página (PopupTemplate, o renderPopup) se dibuja con el título de su elemento. Un mapa de Google no puede copiarse en una imagen, así que se imprime tal y como está en la página, ventana emergente incluida, el resto de la página queda fuera de la impresión y no ofrece imagen para guardar. Un proveedor propio se imprime como imagen cuando su superficie implementa capture.

Características propias del proveedor

NativeOptions se pasan al propio mapa del proveedor a medida que se crea, sobre el propio mapa. Eso activa Street View para Google, por ejemplo, o permite que un mapa de MapLibre haga zoom solo con la rueda de desplazamiento (cooperativeGestures: false); por defecto necesita Ctrl, como hace Google en una página que desplaza, así que la página pasa más allá de ella. El objeto mapa del proveedor también está disponible para tu propio JavaScript: GetNativeMapAsync en Blazor, native en la referencia de React.

Tu propio proveedor

Un proveedor dibuja el mapa base y las formas, coloca elementos y reporta clics y movimientos. Todo lo demás es del mapa. Regístralo con su nombre y ponle nombre en la configuración del proveedor del mapa.

En Blazor, usa CustomMapProvider con el nombre que registraste en JavaScript de tu página.

Configuración de React

MapLibre, que dibuja todos los proveedores excepto Google, carga un script de trabajo desde un archivo propio. Instálalo maplibre-gl junto @powerportalspro/react-mapsa , y dile dónde ha puesto tu bundler al trabajador una vez, antes de dibujar un mapa. Blazor no necesita configuración.