Jump to content

best practice, openlayers, google maps with UniGUI


markokas

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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".

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...