Map

TsgcHTMLComponent_Map — render an interactive Leaflet.js map with OpenStreetMap or CartoDB tiles and your own markers, popups and tooltips, in Delphi, C++ Builder and .NET.

TsgcHTMLComponent_Map

A mapping component that emits a Leaflet.js map container plus the script that initialises it. Set the centre, zoom and tile provider, add markers, then read the HTML property.

Component class

TsgcHTMLComponent_Map

Renders

Leaflet.js map + tile layer

Languages

Delphi, C++ Builder, .NET

Centre it, drop markers, render it

Set CenterLatitude, CenterLongitude and Zoom, pick the TileProvider, call AddMarker for each point, then read 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

Key properties & methods

The members you reach for most often.

Centre & zoom

CenterLatitude and CenterLongitude (Double) set the initial view; Zoom (default 13) sets the zoom level.

Tiles

TileProvider (TsgcHTMLMapTileProvider) selects mtOpenStreetMap, mtCartoDB (light) or mtCartoDBDark.

Markers

Markers (TsgcHTMLMapMarkers) holds the pins; each TsgcHTMLMapMarker has Latitude, Longitude, PopupText, TooltipText and Color.

Add a marker

AddMarker(aLat, aLng, aPopup, aTooltip) drops a pin; the popup opens on click and the tooltip shows on hover.

Sizing

Height (a CSS length such as '420px') controls the map height; MapID sets the container's element id.

Output

HTML returns the Leaflet stylesheet link, the map <div> and the init script — serve it, or assign it to a page template's BodyContent.

Keep exploring

All sgcHTML ComponentsBrowse the full feature matrix of 60+ components.
Download Free TrialThe 30-day trial ships the 60.HTML demo projects.
PricingSingle, Team and Site licenses with full source code.

Ready to Get Started?

Download the free trial and add interactive maps to your Delphi, C++ Builder or .NET web app.