ext.panel undefined

[jahlxx]

Hi.

 

I'm trying a simple test mobile app.

 

When entering the app, always raise the error ext.panel is undefined, and does nothing.

 

some help please.

 

Thanks.

 

[Sherzod]

Hi,

 

You use uniPanel instead unimPanel

 

Best regards.

[jahlxx]

ok.

 

I'm using a unimpanel, and a ungmap inside the panel.

 

the problem is the map,

 

how can I solve this?

 

thanks.

[jahlxx]

any idea about this?

 

thanks.

[Farshad Mohajeri]

Unigmap is not for mobile apps.

[jahlxx]

ok.

 

I've reviewed the google maps sample in the unigui samples folder, in desktop version ans in mobile version.

 

I don't know how make markers and polygons.

 

If I could show marker and polygons with the samples, is enough for me, but I need some help.

 

thanks.

[jahlxx]

ok. after some google investigation, I've done this, based in the standard sample of unigui:

 

 

------------------------------

function afterupdatehtml(sender, eOpts)
{
   var latlng = new google.maps.LatLng(0.0, 0.0);
   var myOptions = {
      zoom: 1,  
      center: latlng,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    
    var umap = document.getElementById("uni_map_canvas");
    var map = new google.maps.Map(umap, myOptions);
    var marker, i;
    var locations = [
      ['MARKER 1', sender.x, sender.y, 1],
      ['MARKER 1', 37.222035, -5.334854, 2]
    ];    
    googleMap = map;

   for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[1], locations[2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

    google.maps.event.addListener(map, 'zoom_changed',
       function() {
         MainmForm.UnimSlider1.setValue(this.getZoom());
       }
    );

    google.maps.event.addListener(map, 'tilesloaded',
       function(e) {
         ajaxRequest(MainmForm.UnimHTMLFrame1,
                     'loaded', []);
       }
    );
   
}

 

 

------------------------------

 

 

the problem now, is that I don't know how to pass parameters (x e y), to draw the markers.

 

some help please.

 

thanks.

[bugra]

Inside afterupdatehtml function change google.maps.event.addListener(map, 'click', .. part like that

google.maps.event.addListener(map, 'click', 
       function(e) {
         var marker = new google.maps.Marker({
           position: e.latLng,
           map: map,
           title: 'My marker'
         });
       }
    );

after do this when you touch on map it add marker.

[jahlxx]

sorry, don't work.

 

the problem is that the script doesn't recognize the variables x and y.

 

I've tested

- x,y

- sender.x, sender.y

- mainform.x, mainform.y

 

without success.

 

If I could to solve this, the marks will be drawed, but I don't know how,

 

I think that the correct way is mainform.x and mainform.y, but it not works.

 

any idea?

[bugra]

if you wanna add marker when touch map change afterupdatehtml function like that

function afterupdatehtml(sender, eOpts)
{

   var latlng = new google.maps.LatLng(0.0, 0.0);
   var myOptions = {
      zoom: 1,  
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    var umap = document.getElementById("uni_map_canvas");
    var map = new google.maps.Map(umap, myOptions);
    googleMap = map;

    google.maps.event.addListener(map, 'zoom_changed', 
       function() {
         MainmForm.UnimSlider1.setValue(this.getZoom()); 
       }
    );

    google.maps.event.addListener(map, 'tilesloaded', 
       function(e) {
         ajaxRequest(MainmForm.UnimHTMLFrame1, 
                     'loaded', []);
       }
    );
    
    google.maps.event.addListener(map, 'click', 
       function(e) {
         var marker = new google.maps.Marker({
           position: e.latLng,
           map: map,
           title: 'My Marker'
         });
       }
    );
}

[jahlxx]

ok. thanks.

 

I wanted to draw a map, markers and polygons.

 

I think that I've solved the problem.

 

Not modifying the function afterupdatehtm. I keep that function as the original in the sample.

 

In the mainform, I rewrite this procedure to get that I want, and as I can see it works. I don't know if is the better solution, but ii works for me. any other idea will be well received.

 

 

procedure TMainmForm.SetCoord(Lat, Long : Real);
var
   script: string;
begin
  if WebMode then begin
    script := ('var gm=googleMap;if (typeof gm=="object") {gm.setCenter(new google.maps.LatLng('+
                        StringReplace(Format('%2.4f', [Lat]), ',', '.', [rfReplaceAll])+','+
                        StringReplace(Format('%2.4f', [Long]), ',', '.', [rfReplaceAll])+
                      ')); gm.setZoom(8);}');

    script := script +
       'var marker, i;' +
       'var locations = [' +
       '[''MARKER 1'', 37.222035, -5.334854, 1],' +
       '[''MARKER 2'', 37.322035, -5.434854, 2]' +
       '];' +
       'for (i = 0; i < locations.length; i++) {' +
       '   marker = new google.maps.Marker({' +
       '   position: new google.maps.LatLng(locations[1], locations[2]),' +
       '   map: googleMap,' +
       '   title: locations[0]' +
       '});' +
       '}';

    script := script +
        '   var vertices = ['+
        '{lat: 37.322067, lng: -5.4359651},' +
        '{lat: 37.3209311, lng: -5.4348386},' +
        '{lat: 37.3220418, lng: -5.4329825},' +
        '{lat: 37.32375, lng: -5.43318} ]; ' +
        'var poligono = new google.maps.Polygon({' +
        'map: googleMap,' +
        'paths: vertices,' +
        'strokeColor: ''#FF0000'',' +
        'strokeOpacity: 0.8,' +
        'strokeWeight: 3,' +
        'fillColor: ''#86CD31'',' +
        'fillOpacity: 0.35' +
        '});';

    script := script +
        '   var vertices = ['+
        '{lat: 37.222067, lng: -5.3359651},' +
        '{lat: 37.2209311, lng: -5.3348386},' +
        '{lat: 37.2220418, lng: -5.3329825},' +
        '{lat: 37.22375, lng: -5.33318} ]; ' +
        'var poligono = new google.maps.Polygon({' +
        'map: googleMap,' +
        'paths: vertices,' +
        'strokeColor: ''#FF0000'',' +
        'strokeOpacity: 0.8,' +
        'strokeWeight: 3,' +
        'fillColor: ''#86CD31'',' +
        'fillOpacity: 0.35' +
        '});';

    UniSession.AddJS(script);
  end;
end;