Popups / Min Size

Oleg_Kyrylenko · July 26, 2021, 2:10pm

Hi,

Scenario:
I'm using popups as "Labels" for Markers. The text is very short , less than 10 chars (ID) :
We have many markers (> 100). so used icons are quite small, 24x24, png.

Problem:
I tried to setup Popup width in HTML- but it still large, and "hides" 2-3 markers, overlapping.
Also, popups look and size is little different for different map providers.

Question:
Is there is any format string that help to set popup size exactly to predefined width and height.
Or size is defined automatically + borders.

Thanks.

Pieter_Scheldeman · July 26, 2021, 3:19pm

We have tried to have a consistent look & feel across all services. each service has it's own way of providing popups, some popups are automatically calculated, some are manually set. For OpenLayers for example, the unit *.TMSFNCMaps.OpenLayers has the following code, which sets the size to a minimum of 100px:

type
  TTMSFNCOpenLayersEx = class(TTMSFNCOpenLayers)
    function GetHeadStyle: string; override;
  end;

function TTMSFNCOpenLayersEx.GetHeadStyle: string;
begin
  Result := '#' + MAPID + ', html, body {' + LB +
    '  height: 100%;' + LB +
    '  margin: 0;' + LB +
    '  padding: 0;' + LB +
    '  overflow: hidden;' + LB +
    '}';

  Result := Result + '.ol-popup {' + LB +
      '  position: absolute;' + LB +
      '  background-color: white;' + LB +
      '  box-shadow: 0 1px 4px rgba(0,0,0,0.2);' + LB +
      '  padding: 15px;' + LB +
      '  border-radius: 10px;' + LB +
      '  border: 1px solid #cccccc;' + LB +
      '  bottom: 12px;' + LB +
      '  left: -50px;' + LB +
      '  min-width: 100px;' + LB +
      '}' + LB +
      '.ol-popup:after, .ol-popup:before {' + LB +
      '  top: 100%;' + LB +
      '  border: solid transparent;' + LB +
      '  content: " ";' + LB +
      '  height: 0;' + LB +
      '  width: 0;' + LB +
      '  position: absolute;' + LB +
      '  pointer-events: none;' + LB +
      '}' + LB +
      '.ol-popup:after {' + LB +
      '  border-top-color: white;' + LB +
      '  border-width: 10px;' + LB +
      '  left: 48px;' + LB +
      '  margin-left: -10px;' + LB +
      '}' + LB +
      '.ol-popup:before {' + LB +
      '  border-top-color: #cccccc;' + LB +
      '  border-width: 11px;' + LB +
      '  left: 48px;' + LB +
      '  margin-left: -11px;' + LB +
      '}' + LB +
      '.ol-popup-closer {' + LB +
      '  text-decoration: none;' + LB +
      '  position: absolute;' + LB +
      '  top: 2px;' + LB +
      '  right: 8px;' + LB +
      '}' + LB +
      '.ol-popup-closer:after {' + LB +
      '  content: "✖";' + LB +
      '}';
end;

So, you can manipulate the CSS for each service (above code snippet is the default). It has min-width and padding applied.

Oleg_Kyrylenko · July 26, 2021, 5:10pm

thank you, Pieter. it works perfectly for OS maps. what about other maps: Here, GM ?
function TTMSFNCMapsHere.GetHeadStyle: string;
begin
Result := '';
end;

this solution resolves missing markers labels feature for OS maps.
small popup looks like marker label. I changed the code and all popups are following markers positions and visibility.
with such small popups I actually don't need markers, because marker icon may be just included in the popup html (img ref). that makes everything more simple / less objects on the map.
IF here maps wil support this popup customization than it will resolve another problem: local images for markers in HERE (not supported).
Everything will be fine.

Kind Regards.

Pieter_Scheldeman · July 26, 2021, 6:11pm

Here Maps is based on InfoBubbles, which are completely different from OpenLayers. The code above is specifically for TTMSFNCOpenLayers, or TTMSFNCMaps with service property set to msOpenLayers, if you want to have a abstract approach, you can inherit from TTMSFNCMaps and apply the same technique. You only need to switch the Service property between msHere and msOpenLayers the override for GetHeadStyle will return the appropriate overrides for the specific service.

For Here Maps, you can also override the GetHeadStyle, and use the following CSS, which is actually overriding the default CSS coming from:

https://js.api.here.com/v3/3.1/mapsjs-ui.css

  TTMSFNCMapsEx = class(TTMSFNCMaps)
    function GetHeadStyle: string; override;
  end;

function TTMSFNCMapsEx.GetHeadStyle: string;
begin
  Result := '#' + MAPID + ', html, body {' + LB +
    '  height: 100%;' + LB +
    '  margin: 0;' + LB +
    '  padding: 0;' + LB +
    '  overflow: hidden;' + LB +
    '}';

  case Service of
    msHere:
    begin
      Result := Result +
      '.H_ib_body {' + LB +
      '  background: rgb(45, 213, 201);' + LB +
      '}' + LB +

      '.H_ib.H_ib_top .H_ib_tail::after {' + LB +
      '    border-color: rgb(45, 213, 201) transparent;' + LB +
      '}';
    end;
    msOpenLayers:
    begin
      Result := Result + '.ol-popup {' + LB +
          '  position: absolute;' + LB +
          '  background-color: white;' + LB +
          '  box-shadow: 0 1px 4px rgba(0,0,0,0.2);' + LB +
          '  padding: 15px;' + LB +
          '  border-radius: 10px;' + LB +
          '  border: 1px solid #cccccc;' + LB +
          '  bottom: 12px;' + LB +
          '  left: -50px;' + LB +
          '  min-width: 100px;' + LB +
          '}' + LB +
          '.ol-popup:after, .ol-popup:before {' + LB +
          '  top: 100%;' + LB +
          '  border: solid transparent;' + LB +
          '  content: " ";' + LB +
          '  height: 0;' + LB +
          '  width: 0;' + LB +
          '  position: absolute;' + LB +
          '  pointer-events: none;' + LB +
          '}' + LB +
          '.ol-popup:after {' + LB +
          '  border-top-color: white;' + LB +
          '  border-width: 10px;' + LB +
          '  left: 48px;' + LB +
          '  margin-left: -10px;' + LB +
          '}' + LB +
          '.ol-popup:before {' + LB +
          '  border-top-color: #cccccc;' + LB +
          '  border-width: 11px;' + LB +
          '  left: 48px;' + LB +
          '  margin-left: -11px;' + LB +
          '}' + LB +
          '.ol-popup-closer {' + LB +
          '  text-decoration: none;' + LB +
          '  position: absolute;' + LB +
          '  top: 2px;' + LB +
          '  right: 8px;' + LB +
          '}' + LB +
          '.ol-popup-closer:after {' + LB +
          '  content: "✖";' + LB +
          '}';
    end;
  end;
end;

So to change the CSS for the infobubble, you can use all elements starting with ".H_ib" which is the style for the info bubble applied in the default CSS (see the link I mentioned earlier).

Google Maps uses InfoWindow, but those are not styleable. Instead there needs to be a custom OverlayView, but this is also currently not supported. We are working on that feature to be included in a future version.

Oleg_Kyrylenko · July 26, 2021, 6:46pm

Thanks again. Pieter. I'll use this approach for OS maps and HERE. It's OK.
Unfortunately, I have to stay with FNC map ver 1.0.3 for now (Here geocoding 6 vs 7).

Oleg_Kyrylenko · July 27, 2021, 5:28pm

playing more with here popups customization, found that fnc popups is very nice feature,
that can replace "labels" and even "markers". the only micro issue - scaling here map with popus that were created using dx/dy shift. for other maps shift works fine. it's a micro problem for me. may ignore it. anyway I'll stay on old fnc version for now.
thanks again for great product (FNC and book).

   ShowPopup(FNC_Point.Latitude, FNC_Point.Longitude, 'Maaaaaaaaaaaaaaaaaa'+ IntToStr(Random(10000)),  0, -24);

2 images attached.
what I set fore here popups to make them small and looking more like gm popups.

function TTMSFNCMapsHere.GetHeadStyle: string;
var
Result_1: string;
begin
//Result := '';
Result_1 := '#' + MAPID + ', html, body {' + LB +
' height: 100%;' + LB +
' margin: 0;' + LB +
' padding: 0;' + LB +
' overflow: hidden;' + LB +
'}';

// 1. "biruza" bkg color
Result := Result_1 +
(*
'.H_ib_body {' + LB +
' background: rgb(45, 213, 201); border-width: 0' + LB +
'}' + LB +
*)
// 2. small text and popup
'.H_ib_content {' + LB +
'min-width: 50px;' + LB +
'font: 11px "Lucida Grande", Arial, Helvetica, sans-serif;' + LB +
'line-height: 18px;' + LB +
'margin: 4px 7px 5px 4px;' + LB +
'}' + LB +

// 3. small "close" btn
'.H_ib_close {'+ LB +
' font-size: 8px;'+ LB +
' position: absolute;' + LB +
' right: 2px;'+ LB +
' top: 2px;'+ LB +
' width: 8px;' + LB +
' height: 8px;' + LB +
' cursor: pointer;'+ LB +
' z-index: 1;' + LB +
' background: none;' + LB +
' box-shadow: none;' + LB +
'} '// + LB +

(*
// 4. red tail color
'.H_ib.H_ib_top .H_ib_tail::after {' + LB +
' border-color: rgb(255, 0, 127) transparent;' + LB +
'}';
*)

end;

Pieter_Scheldeman · July 27, 2021, 7:58pm

Hi,

Looks cool! Thank you for the feedback, it helps improving TMS FNC Maps. The shifting of pixels is problematic, we'll see if we can change the behavior, or convert it to coordinates based on the view distance.

Oleg_Kyrylenko · July 27, 2021, 8:56pm

Hi Pieter,
Yes, I think that popups is a way to go, more powerful than markers, and labels.
I just tried to replaced my 100's of markers and labels with popups only (html, image / gif animation), and found that it opens unlimited opportunities. for our tracker: instead of images, I'll play gif animation, that makes map super cool / live, Using popups/html I can display animated status or warnings, etc.. for all map providers (7). vs OS Marker (gif) animation is not played and HERE Marker (localfile ) even not displayed. Everything is good with popups.

One more question.
because use FNC Maps I've purchased FNC Maps Book, and very happy withy this book (+ git examples)..

I'm going to buy ALL Holger's books, one by one, but it's not clear what TMS SW I should buy first.
This information is available only in the book.

Could you please provide information for each book: TMS SW required to run book examples.
Depending on your answer I'll plan my purchase / budget.

Kind Regards.

Oleg_Kyrylenko · July 27, 2021, 9:07pm

attached image illustrates HERE map with Popups (HTML), including animated gif, local file.
gifs are playing for all maps.
BTW: for creating GIFs I use Blumentals SW

Pieter_Scheldeman · July 28, 2021, 6:32am

Map looks cool!

@Holger_Flick can you enlighten the question about the books?

Holger_Flick · July 28, 2021, 3:28pm

@Oleg_Kyrylenko

TMS WEB Core is mostly TMS WEB Core with one chapter also using TMS XData.
All Hands-on books have a huge span of products. At the "core" are: VCL UI Pack, TMS WEB Core, XData, FlexCel for reporting, FNC Maps at the center of the FNC Maps book. A few examples use FNC UI and FNC Dashboard controls.

However, all examples can be compiled using the trial versions of each product so this should not be a hurdle.

Oleg_Kyrylenko · July 28, 2021, 4:53pm

OK. I already have everything for Windows dev. and use only DevExpress, Steema Pro, ReportBuilder, DevArt components, many others. From TMS I'm looking only web dev tools (all new for me, except maps).
It seems that I need to buy this:
TMS FNC Chart / € 95
TMS FNC Cloud Pack / € 150
TMS FNC Dashboard Pack / € 95
TMS FNC UI Pack / € 245
TMS WEB Core / € 395
TMS FNC Maps / already have
Total / € 980 = 1450 CAD
-------------------------------------------------------*
TMS WEB Core: Web Application Development with Delphi / $50
Introduction to TMS Web Core/ Video Training / $200

Thank you

Holger_Flick · July 28, 2021, 5:12pm

Have a look at All Access as well. It might be a better deal after 1 year for you!

Oleg_Kyrylenko · July 28, 2021, 5:46pm

ok. I'll check. as I understand in this case I should use only the latest versions of all tools, incl. fnc maps + fnc core. this doesn't work for me. I'll stay with fnc maps 1.0.3 temporary because of here maps geocoding changes in 1.5, not backward compatible.
thank you for your information, and nice fnc maps product and the book, and quick response (Pieter) to any questions..

Popups / Min Size

2 images attached. what I set fore here popups to make them small and looking more like gm popups.

end;

2 images attached.
what I set fore here popups to make them small and looking more like gm popups.