Map

TsgcHTMLComponent_Map — renderize um mapa interativo Leaflet.js com tiles OpenStreetMap ou CartoDB e seus próprios marcadores, popups e tooltips, em Delphi, C++ Builder e .NET.

Visão geral

TsgcHTMLComponent_Map

Um componente de mapas que emite um contêiner de mapa Leaflet.js mais o script que o inicializa. Defina o centro, o zoom e o provedor de tiles, adicione marcadores e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_Map

Renderiza

Mapa Leaflet.js + camada de tiles

Família

Gráficos & Visualização

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Centralize, coloque marcadores, renderize

Defina CenterLatitude, CenterLongitude e Zoom, escolha o TileProvider, chame AddMarker para cada ponto e então leia 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

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Centro & zoom

CenterLatitude e CenterLongitude (Double) definem a visão inicial; Zoom (padrão 13) define o nível de zoom.

Tiles

TileProvider (TsgcHTMLMapTileProvider) seleciona mtOpenStreetMap, mtCartoDB (claro) ou mtCartoDBDark.

Marcadores

Markers (TsgcHTMLMapMarkers) contém os pins; cada TsgcHTMLMapMarker tem Latitude, Longitude, PopupText, TooltipText e Color.

Adicionar um marcador

AddMarker(aLat, aLng, aPopup, aTooltip) coloca um pin; o popup abre ao clicar e o tooltip aparece ao passar o mouse.

Dimensionamento

Height (um comprimento CSS como '420px') controla a altura do mapa; MapID define o id do elemento contêiner.

Saída

HTML retorna o link da folha de estilos Leaflet, o <div> do mapa e o script de inicialização — sirva-o ou atribua-o ao BodyContent de um template de página.

Recursos

Continue explorando

	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir

Map