Map

TsgcHTMLComponent_Map — genera un mapa interactivo de Leaflet.js con teselas de OpenStreetMap o CartoDB y tus propios marcadores, ventanas emergentes y tooltips, en Delphi, C++ Builder y .NET.

De un vistazo

TsgcHTMLComponent_Map

Un componente de mapas que genera un contenedor de mapa de Leaflet.js junto con el script que lo inicializa. Define el centro, el zoom y el proveedor de teselas, añade marcadores y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_Map

Genera

Mapa de Leaflet.js + capa de teselas

Familia

Gráficos y Visualización

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Céntralo, coloca marcadores, renderízalo

Define CenterLatitude, CenterLongitude y Zoom, elige el TileProvider, llama a AddMarker para cada punto y luego lee HTML.

uses
  sgcHTML_Enums, sgcHTML_Component_Map;

var
  oMap: TsgcHTMLComponent_Map;
begin
  oMap := TsgcHTMLComponent_Map.Create(nil);
  try
    oMap.CenterLatitude := 40.4168;
    oMap.CenterLongitude := -3.7038;
    oMap.Zoom := 12;
    oMap.Height := '420px';
    oMap.TileProvider := mtCartoDB;

    oMap.AddMarker(40.4168, -3.7038, 'Madrid', 'Head office');
    oMap.AddMarker(41.3851, 2.1734, 'Barcelona');

    WebModule.Response := oMap.HTML;   // Leaflet map + markers
  finally
    oMap.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Map.hpp

TsgcHTMLComponent_Map *oMap = new TsgcHTMLComponent_Map(NULL);
try
{
  oMap->CenterLatitude = 40.4168;
  oMap->CenterLongitude = -3.7038;
  oMap->Zoom = 12;
  oMap->Height = "420px";
  oMap->TileProvider = mtCartoDB;

  oMap->AddMarker(40.4168, -3.7038, "Madrid", "Head office");
  oMap->AddMarker(41.3851, 2.1734, "Barcelona");

  String html = oMap->HTML;   // Leaflet map + markers
}
__finally
{
  delete oMap;
}

using esegece.sgcWebSockets;

var map = new TsgcHTMLComponent_Map();
map.CenterLatitude = 40.4168;
map.CenterLongitude = -3.7038;
map.Zoom = 12;
map.Height = "420px";
map.TileProvider = TsgcHTMLMapTileProvider.mtCartoDB;

map.AddMarker(40.4168, -3.7038, "Madrid", "Head office");
map.AddMarker(41.3851, 2.1734, "Barcelona");

string html = map.HTML;   // Leaflet map + markers

Referencia

Propiedades y métodos clave

Los miembros que más utilizarás.

Centro y zoom

CenterLatitude y CenterLongitude (Double) definen la vista inicial; Zoom (por defecto 13) define el nivel de zoom.

Teselas

TileProvider (TsgcHTMLMapTileProvider) selecciona mtOpenStreetMap, mtCartoDB (claro) o mtCartoDBDark.

Marcadores

Markers (TsgcHTMLMapMarkers) contiene los pines; cada TsgcHTMLMapMarker tiene Latitude, Longitude, PopupText, TooltipText y Color.

Añadir un marcador

AddMarker(aLat, aLng, aPopup, aTooltip) coloca un pin; la ventana emergente se abre al hacer clic y el tooltip aparece al pasar el ratón por encima.

Tamaño

Height (una longitud CSS como '420px') controla la altura del mapa; MapID define el id del elemento contenedor.

Salida

HTML devuelve el enlace a la hoja de estilos de Leaflet, el <div> del mapa y el script de inicialización — sírvelo o asígnalo al BodyContent de una plantilla de página.

Recursos

Sigue explorando

	Todos los componentes de sgcHTMLExplora la matriz de características completa de más de 60 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con todo el código fuente.	Abrir

Map