TWebbrowser very slow to load real time markers from local google map HTML

Question

I am actually displaying every 2 seconds many real time GPS points (20) by showing it from an index.html (using google maps to display and treat points) in my TWebBrowser, and it slows a lot my app.

And as i got another module under the same application allowing me to enter data in my database, it freezes usually my app.

I know Threads are made for that, but i am not sure that it will solve my problem. Any ideas ???

Thanks Gwenael

PS : did the fact that i am loading my javascript code from an external file (and not the source code loadead in my delphi application), can slow my app ?

Can you include the source code which you are using to show the gps points? — RRUZ, Sep 05 '11 at 16:09

score 3 · Answer 1 · answered Sep 05 '11 at 23:27

If you get your javascript from an external file it will get cached, so no, that probably won't slow you down much, except for the first time maybe.

Probable causes for slowness, and suggestions to speed things up:

TWebBrowser wraps Internet Explorer, which is not exactly famous for its raw speed when it comes to this type of task; If you want fast JavaScript handling, consider DelphiChromiumEmbedded
If you draw a marker every two seconds, you'll have to draw 1800 markers for a one-hour drive. If you want to show multiple trips, it's just going to be a heavy task to draw all the icons with alpha-transparency and all.

I usually draw a marker (arrow with driving direction) every 2 minutes, or if more than 200m has been travelled since the last marker. That way you don't have to draw a whole cloud of markers when a car is standing still.

You can use douglas-peucker algorithm to simplify the line. As a parameter you'll give a maximum error that you allow in the line, and it'll remove as many points as possible without exceeding that error. So, when you have a straight line, it'll remove all points between the edges.

Also, you can consider clustering points at certain zoomlevels. If you would use OpenLayers instead, it would be easier, but with the help of the Google Maps Util Library you can do the same with Google Maps (Example). If you zoom out, it's a bit useless to draw 2000 overlapping icons on an area of 10x10 pixels.

If you show me your code, I can give you some more direct advice on how to speed things up.

THanks Wouter. I am actullay testing the TChronium which seems faster that TWebBrowser (btw, what is the TChromiumOSR ??). — Gwenael, Sep 06 '11 at 08:03
OSR mean OffScreen Renderer, it is a non visual component that let you render the browser yourself. There is a sample to render the browser to a Graphics32 Paintbox. — Henri Gourvest, Sep 06 '11 at 10:43

score 1 · Answer 2 · answered Sep 06 '11 at 08:09

Here is my Delphi code :

  i := 0;
  With DMMain.MDMain do
  begin
    QLastPositionGPS.Close ;
    QLastPositionGPS.Open ;
    QLastPositionGPS.First ;
    for i:=0 to QLastPositionGPS.RecordCount-1 do
    begin
      GPSLatitude     := StringReplace(QLastPositionGPS.FieldByName('latitude').AsString, ',', '.', [rfreplaceall]) ;
      GPSLongitude    := StringReplace(QLastPositionGPS.FieldByName('longitude').AsString, ',', '.', [rfreplaceall]) ;
      HeureDernierGPS := QLastPositionGPS.FieldByName('maj').AsString ;

      MDMain.QGPSactifs.Close ;
      MDMain.QGPSactifs.ParamByName('id_artisan').AsInteger := MDMain.QLastPositionGPS.FieldByName('id_artisan').AsInteger ;
      MDMain.QGPSactifs.Open ;
      if MDMain.QGPSactifs.FieldByName('etat').AsBoolean = True then
      begin         CdrCarto.Chromium1.Browser.MainFrame.ExecuteJavaScript('AjouterMarqueurCirculant('+ GPSLatitude + ', ' + GPSLongitude + ', ' + MDMain.QLastPositionGPS.FieldByName('id_artisan').AsString + ')', 'about:blank', 0) ;
      end else if OptionDisplayGPSActif then
        if (MDMain.QGPSactifs.FieldByName('etat').AsBoolean = False) and (MDMain.QGPSactifs.FieldByName('etat_serveur').AsBoolean = True) then
        begin
         CdrCarto.Chromium1.Browser.MainFrame.ExecuteJavaScript('AjouterMarqueurGPS('+ GPSLatitude + ', ' + GPSLongitude + ', ' + MDMain.QLastPositionGPS.FieldByName('id_artisan').AsString + ')', 'about:blank', 0);

        end;
      QLastPositionGPS.Next ;
      MDMain.QGPSactifs.Close ;
    end;
    QLastPositionGPS.Close ;
  end;
end;

and my Javascript code :

 function AjouterMarqueurCirculant(Lat, Long, notaxi) {
    var marker = new MarkerWithLabel({
      position: new google.maps.LatLng(Lat, Long),
       draggable: true,
       map: map,
       labelContent: "Taxi "+notaxi,
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labelsactif",                      // the CSS class for the label
       labelStyle: {opacity: 0.75},
       labelVisible: true,
      icon:"icones/taxi_circulant_ok.png"
     });

     var iw = new google.maps.InfoWindow({
       content: "Nom Prenom"
     });
     google.maps.event.addListener(marker, "click", function (e) { iw.open(map, marker); });

    markersCirculant.push(marker);
    bounds.extend(new google.maps.LatLng(Lat, Long));
  }

-1 for the language mix. It is not professional to mix languages and not easy to maintain by people that does not understand your language, especially for id's, css selectors, function names, filenames and other id's. — Codebeat, Oct 21 '12 at 19:50

TWebbrowser very slow to load real time markers from local google map HTML

2 Answers2