TMS FNC Leaflet — Guides

Tile layers

Add custom tile layers via TileLayers.Add (TTMSFNCLeafletTileLayer) and set the tile URL template. Multiple tile layers can be stacked.

Markers

Add markers via Markers.Add and set Coordinate.Latitude, Coordinate.Longitude, and Title.

Polygons and polylines

Use Polygons.Add (TTMSFNCLeafletPolygon) and Polylines.Add (TTMSFNCLeafletPolyline) to add area and route overlays.

Heat maps

Heat maps show density and intensity across a region without turning every data point into a clickable marker. Add a heat map via HeatMaps.Add (TTMSFNCLeafletHeatMap), or call AddHeatMap when a coordinate array is already available. Populate WeightedCoordinates with latitude, longitude, and a Weight value per point, then tune Opacity and the GradientStartColor/GradientMidColor/GradientEndColor colors so the overlay stays readable against the active tile layer.

procedure TForm1.ConfigureLeafletHeatMap;
var
  LHeatMap: TTMSFNCLeafletHeatMap;
  LWeightedCoordinate: TTMSFNCMapsWeightedCoordinate;
begin
  TMSFNCLeaflet1.HeatMaps.Clear;

  LHeatMap := TMSFNCLeaflet1.HeatMaps.Add;
  LHeatMap.Opacity := 0.6;
  LHeatMap.GradientStartColor := gcGreen;
  LHeatMap.GradientMidColor := gcYellow;
  LHeatMap.GradientEndColor := gcRed;

  LWeightedCoordinate := LHeatMap.WeightedCoordinates.Add;
  LWeightedCoordinate.Coordinate.Latitude := 51.5074;
  LWeightedCoordinate.Coordinate.Longitude := -0.1278;
  LWeightedCoordinate.Weight := 0.9;

  LWeightedCoordinate := LHeatMap.WeightedCoordinates.Add;
  LWeightedCoordinate.Coordinate.Latitude := 51.5155;
  LWeightedCoordinate.Coordinate.Longitude := -0.1419;
  LWeightedCoordinate.Weight := 0.6;
end;

Prefer a heat map when the audience needs a regional trend (busy areas, sensor readings, request volume) and markers or labels when they need an exact point. Call HeatMaps.Clear or ClearHeatMaps before repopulating a layer so refreshed data does not stack on top of the previous set.

Right-click events

Leaflet exposes right-click hooks for the map canvas, markers, and poly elements. Wire OnMapRightClick, OnMarkerRightClick, and OnPolyElementRightClick when the application needs context menus, quick edit actions, or inspection panels without taking over the normal left-click navigation and selection flow.

procedure TForm1.ConfigureLeafletContextEvents;
begin
  TMSFNCLeaflet1.OnMapRightClick := TMSFNCLeaflet1MapRightClick;
  TMSFNCLeaflet1.OnMarkerRightClick := TMSFNCLeaflet1MarkerRightClick;
  TMSFNCLeaflet1.OnPolyElementRightClick := TMSFNCLeaflet1PolyElementRightClick;
end;

procedure TForm1.TMSFNCLeaflet1MapRightClick(Sender: TObject;
  AEventData: TTMSFNCMapsEventData);
begin
  { Show a map-level context menu at AEventData.Coordinate. }
end;

procedure TForm1.TMSFNCLeaflet1MarkerRightClick(Sender: TObject;
  AEventData: TTMSFNCMapsEventData);
begin
  if Assigned(AEventData.Marker) then
    AEventData.Marker.Title := 'Selected marker';
end;

procedure TForm1.TMSFNCLeaflet1PolyElementRightClick(Sender: TObject;
  AEventData: TTMSFNCMapsEventData);
begin
  if Assigned(AEventData.PolyElement) then
    AEventData.PolyElement.DataString := 'Selected poly element';
end;

Each handler receives a TTMSFNCMapsEventData argument, so the same pattern reads the clicked Coordinate, Marker, or PolyElement depending on which event fired. Keep handlers short; long-running work should be deferred so the embedded browser stays responsive.

See also

• TTMSFNCLeaflet
• Product overview