best practice, openlayers, google maps with UniGUI

[markokas]

Hi all,

 

What is best practice using UniGUI, to access all functions/properties of google maps or Openlayers. GoogleMap component (from patmap) has limitation.

Can I use HTMLFrame to execute JavaScript functions inside?

 

What is best approach?

 

Thank you for your comments,

 

mk.

[Farshad Mohajeri]

Have you tried our GoogleMaps demo under \demos folder?

[markokas]

Have you tried our GoogleMaps demo under \demos folder?

 

 

I did, but I need also other functionalities.

I check also component from patmap and still are missed functionalities, like re-position of marker.

 

It would be nice possibility to call all properties or functions inside HTMLFrame ...

 

br,mk.

[Farshad Mohajeri]

You can call them yourself. In demo it is shown how to call Google API functions.

[bruno-pere]

What Farshad said is correct.

 

I did another application based on that demo and I use markermanager.js (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js) to manage the markers.

 

1) Add the link to CustomFiles in ServerManager.

 

2) In the html frame->extevents->onafterupdatehtml something like this (added mgr = ...)

 

function Onafterupdatehtml(sender)

{

var latlng = new google.maps.LatLng(0,0);

 

var myOptions = {

zoom: 4,

minZoom: 4,

maxZoom: 20,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

 

var map = new google.maps.Map(document.getElementById("uni_map_canvas"), myOptions);

googleMap = map;

 

/*google.maps.event.addListener(map, 'zoom_changed',

function() {

MainForm.UniTrackBar1.setValue(this.getZoom());

});*/

 

mgr = new MarkerManager(googleMap);

 

google.maps.event.addListener(mgr, 'loaded',

function(e) {

ajaxRequest(UniFrame1.UniHF,

'loaded',

[]);

});

 

google.maps.event.addListener(map, 'click',

function(e) {

ajaxRequest(UniFrame1.UniHF,

'mapClick',

['lat='+e.latLng.lat(), 'lng='+e.latLng.lng()]);

});

 

}

 

3) Add marks like this:

 

procedure TUniFrame1.CreateMapMarks;

var

path,c1,c2,lat,lng,info: string;

cmd1,cmd2: TStringList;

i: integer;

begin

if WebMode then

begin

 

try

path := AppPath + 'files\';

 

cmd1 := TStringList.Create;

cmd1.LoadFromFile( path + 'CreateMapMarks1.js' );

cmd1.Add('');

c1 := cmd1.Text;

 

cmd2 := TStringList.Create;

cmd2.LoadFromFile( path + 'CreateMapMarks2.js' );

cmd2.Add('');

c2 := cmd2.Text;

 

with UniMainModule do

begin

i := 0;

ADOTabPoste.First;

while not ADOTabPoste.Eof do

begin

inc(i);

 

lat := ADOTabPosteLatitude.Value;

lng := ADOTabPosteLongitude.Value;

info := ADOTabPosteIdentificador.Value;

 

c1 := c1 +

Format( c2,[

lat,

lng,

'false',

info,

IntToStr(i),

lat,

lng

]

);

 

 

ADOTabPoste.Next;

end;

ADOTabPoste.First;

end;

 

c1 := 'if (typeof googleMap=="object") {'

+ c1 +

 

'mgr.refresh(); };';

 

UniSession.AddJS(

c1

);

 

finally

cmd1.Free;

cmd2.Free;

end;

end;

end;

 

where the two external javascript files are:

 

createmapmark1.js

// Origins, anchor positions and coordinates of the marker

// increase in the X direction to the right and in

// the Y direction down.

var image = new google.maps.MarkerImage('imagens/light2.png',

// This marker is 20 pixels wide by 32 pixels tall.

new google.maps.Size(26, 32),

// The origin for this image is 0,0.

new google.maps.Point(0,0),

// The anchor for this image is the base of the flagpole at 0,32.

new google.maps.Point(0, 32));

var shadow = new google.maps.MarkerImage('imagens/light2.png',

// The shadow image is larger in the horizontal dimension

// while the position and offset are the same as for the main image.

new google.maps.Size(26, 32),

new google.maps.Point(0,0),

new google.maps.Point(0, 32));

// Shapes define the clickable region of the icon.

// The type defines an HTML <area> element 'poly' which

// traces out a polygon as a series of X,Y points. The final

// coordinate closes the poly by connecting to the first

// coordinate.

var shape = {

coord: [1, 1, 1, 32, 26, 32, 26 , 1],

type: 'poly'

};

 

createmapmark2.js

var myLatLng = new google.maps.LatLng(%s, %s);

var marker = new google.maps.Marker({

position: myLatLng,

//map: googleMap,

shadow: shadow,

icon: image,

shape: shape,

draggable: %s,

title: '%s',

zIndex: %s

});

 

google.maps.event.addListener( marker, 'click', function(e){googleMap.setCenter(new google.maps.LatLng(%s, %s)); googleMap.setZoom( ((googleMap.getZoom()==20)?20:googleMap.getZoom()+2) );

ajaxRequest(UniFrameCadPostes.UniHF,

'mapClick',

['lat='+e.latLng.lat(), 'lng='+e.latLng.lng()]); } );

 

mgr.addMarker(marker,4);

 

4) And you can call some google functions like this:

 

procedure TUniFrameCadPostes.ClearMarkers;

begin

if WebMode then

UniSession.AddJS('if (typeof googleMap=="object") { mgr.clearMarkers(); mgr.refresh(); };');

end;

 

 

Did help?

 

Bye!

 

Bruno

[bruno-pere]

Farshad, i'm trying to add markermanager.js directly from the folder instead from the internet. But when I add /files/markermanager.js in the customfiles, i get some errors.

 

From the internet, it works.

 

What is the correct way to add custom javascript files locally?

 

Thx!

 

Bruno

[thecrgrt]

Farshad, i'm trying to add markermanager.js directly from the folder instead from the internet. But when I add /files/markermanager.js in the customfiles, i get some errors.

 

From the internet, it works.

 

What is the correct way to add custom javascript files locally?

 

Thx!

 

Bruno

If your file was reside in files folder remove / in front of "/files/markermanager.js", it should be "files/markermanager.js".

[bruno-pere]

when I do that, it shows an error:

 

getCurrentMapType has no properties

 

thx!

 

Bruno

[markokas]

What Farshad said is correct.

 

I did another application based on that demo and I use markermanager.js (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js) to manage the markers.

 

1) Add the link to CustomFiles in ServerManager.

 

2) In the html frame->extevents->onafterupdatehtml something like this (added mgr = ...)

 

function Onafterupdatehtml(sender)

{

var latlng = new google.maps.LatLng(0,0);

 

var myOptions = {

zoom: 4,

minZoom: 4,

maxZoom: 20,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

 

var map = new google.maps.Map(document.getElementById("uni_map_canvas"), myOptions);

googleMap = map;

 

/*google.maps.event.addListener(map, 'zoom_changed',

function() {

MainForm.UniTrackBar1.setValue(this.getZoom());

});*/

 

mgr = new MarkerManager(googleMap);

 

google.maps.event.addListener(mgr, 'loaded',

function(e) {

ajaxRequest(UniFrame1.UniHF,

'loaded',

[]);

});

 

google.maps.event.addListener(map, 'click',

function(e) {

ajaxRequest(UniFrame1.UniHF,

'mapClick',

['lat='+e.latLng.lat(), 'lng='+e.latLng.lng()]);

});

 

}

 

3) Add marks like this:

 

procedure TUniFrame1.CreateMapMarks;

var

path,c1,c2,lat,lng,info: string;

cmd1,cmd2: TStringList;

i: integer;

begin

if WebMode then

begin

 

try

path := AppPath + 'files\';

 

cmd1 := TStringList.Create;

cmd1.LoadFromFile( path + 'CreateMapMarks1.js' );

cmd1.Add('');

c1 := cmd1.Text;

 

cmd2 := TStringList.Create;

cmd2.LoadFromFile( path + 'CreateMapMarks2.js' );

cmd2.Add('');

c2 := cmd2.Text;

 

with UniMainModule do

begin

i := 0;

ADOTabPoste.First;

while not ADOTabPoste.Eof do

begin

inc(i);

 

lat := ADOTabPosteLatitude.Value;

lng := ADOTabPosteLongitude.Value;

info := ADOTabPosteIdentificador.Value;

 

c1 := c1 +

Format( c2,[

lat,

lng,

'false',

info,

IntToStr(i),

lat,

lng

]

);

 

 

ADOTabPoste.Next;

end;

ADOTabPoste.First;

end;

 

c1 := 'if (typeof googleMap=="object") {'

+ c1 +

 

'mgr.refresh(); };';

 

UniSession.AddJS(

c1

);

 

finally

cmd1.Free;

cmd2.Free;

end;

end;

end;

 

where the two external javascript files are:

 

createmapmark1.js

// Origins, anchor positions and coordinates of the marker

// increase in the X direction to the right and in

// the Y direction down.

var image = new google.maps.MarkerImage('imagens/light2.png',

// This marker is 20 pixels wide by 32 pixels tall.

new google.maps.Size(26, 32),

// The origin for this image is 0,0.

new google.maps.Point(0,0),

// The anchor for this image is the base of the flagpole at 0,32.

new google.maps.Point(0, 32));

var shadow = new google.maps.MarkerImage('imagens/light2.png',

// The shadow image is larger in the horizontal dimension

// while the position and offset are the same as for the main image.

new google.maps.Size(26, 32),

new google.maps.Point(0,0),

new google.maps.Point(0, 32));

// Shapes define the clickable region of the icon.

// The type defines an HTML <area> element 'poly' which

// traces out a polygon as a series of X,Y points. The final

// coordinate closes the poly by connecting to the first

// coordinate.

var shape = {

coord: [1, 1, 1, 32, 26, 32, 26 , 1],

type: 'poly'

};

 

createmapmark2.js

var myLatLng = new google.maps.LatLng(%s, %s);

var marker = new google.maps.Marker({

position: myLatLng,

//map: googleMap,

shadow: shadow,

icon: image,

shape: shape,

draggable: %s,

title: '%s',

zIndex: %s

});

 

google.maps.event.addListener( marker, 'click', function(e){googleMap.setCenter(new google.maps.LatLng(%s, %s)); googleMap.setZoom( ((googleMap.getZoom()==20)?20:googleMap.getZoom()+2) );

ajaxRequest(UniFrameCadPostes.UniHF,

'mapClick',

['lat='+e.latLng.lat(), 'lng='+e.latLng.lng()]); } );

 

mgr.addMarker(marker,4);

 

4) And you can call some google functions like this:

 

procedure TUniFrameCadPostes.ClearMarkers;

begin

if WebMode then

UniSession.AddJS('if (typeof googleMap=="object") { mgr.clearMarkers(); mgr.refresh(); };');

end;

 

 

Did help?

 

Bye!

 

Bruno

 

Thank you Bruno for insight,

very helpful,

 

Probaly I can use also Openlayers in this way ...

 

br,mk.