User:anonymousLog inRegister
Recents:
Map Control

Control Description

It allows including a map in a Web Form and marking points on it. In addition, it allows setting map display properties such as precision, map type, zoom control, etc. Currently there are three providers Google and Yahoo for any city along the world.

Using the control

Uncompress the zip file to the User control directory of the GeneXus X installation. At design time, the control can be opened from View/Tool Windows/Toolbox. With drag & drop a map is added to the Web Form and a sample is consolidated to mark some points on the map.
For each point a title, text and link can be specified.
To geoposition the map or a point on it, the coordinates (latitude/longitude) are needed. To this end there is a City property with a set of cities and their coordinates or two Latitude Longitude properties (N/E positive number, S/W negative number).
These values are in decimal degrees format. In order to convert from degrees, minute and second could you se here

You can see a runtime example from http://samples.genexus.com/mapcontrol/mapcontrol.aspx

Example - GeneXus Code

&Radisson = new GxMap.Point()
&Radisson.PointLat = "-34.9056247303566"
&Radisson.pointLong = "-56.198415756225586
"
&Radisson.PointInfowinTit = 'XIX International GeneXus Meeting'
&Radisson.PointInfowinDesc = "Radisson Montevideo Victoria Plaza Hotel - September 14-16"
&Radisson.PointInfowinLink = "
http://genexus.com/event/"

&Radisson.PointInfowinLinkDsc = "Genexus Site"

&Radisson.PointIcon = "Red" // or http://wiki.gxtechnical.com/commwiki/servlet/apgetwikiimage?6327,1


&Radisson.PointInfowinImg
=
http://wiki.gxtechnical.com/commwiki/servlet/apgetwikiimage?6327,1


&GxMapdata.Points.Add(&Radisson)


// when &Radisson is based on GxMap.Pointtype and GxMapdata is based on GxMap type

The sample is consolidated in the object's start event when dragging and dropping the control.

New - Geocoding (Google)

 &httpclient.Host = 'maps.google.com'                       //build a post to get the address 

 &httpclient.BaseUrl = '/maps/api/geocode/'
 &postvar = 'xml?address=' + &address + '&sensor=false'
 &httpclient.Execute('GET',&postvar) //execute
 &var = &httpclient.ToString()
 &xmlreader.OpenFromString(&var) //parse the coordenates
 &xmlreader.Read()
 &xmlreader.ReadType(1,'lat')
 &lat = &xmlreader.Value
 &xmlreader.ReadType(1,'lng')
 &long = &xmlreader.Value
 GoogleMapControl1.Latitude =&lat //center the map in hte coordenates
 GoogleMapControl1.Longitude = &long
 GoogleMapControl1.Precision = &precision

To watch a video of geocoding  http://view.vzaar.com/333220.video

Other design (or runtime) properties of the control are as follows:
- precision (zoom scale is 1 to 16)
– type of map (map, satellite photo or hybrid)
- controls can be included within the map such as zoom, overview, etc.

Control Properties
Property Description
Provider

Defines what provider will be used to draw the map (Google, Yahoo, etc.)

Access Key Google :The key is obtained from http://www.google.com/apis/maps/signup.html
It has some restrictions such as number of accesses per day to the page. In version 2.0 or less this property is not taken into account at runtime.
Yahoo: The default value is "ajaxymap?v=3.0&appid=" and it is neccessary to concat the ApiKey Value at the end
The key is obtained from
http://developer.yahoo.com/maps/simple/index.html
In version 2.0 or less this property is not taken into account at runtime.
Type

Possible Values= Map, Satellital, ImageHybrid

City Offers a combo to position the map on a specific city. To define another place, set the "Specific Coordinate" value and set the Specific Latitude and Specific Longitude values. To add a city to the combo, edit the User Control/Map/Mapdefinition.xml
Latitude Used to center the map when City (Specific coordinate) is not selected.
Longitude Used to center the map when City (Specific coordinate) is not selected.
Precision

Levels 1 to 16 to indicate the zoom

ControlName

By default : GoogleMapControlX

   
Controls

Controls appearing inside the map

Small Lets us pan/zoom the map. It enables arrows to move (up, down, left, right) and zoom (control "+" and "-")
SmallZoom a small zoom control (no panning controls) used in the small map blowup windows used to display driving directions steps on Google Maps.

Large

a large pan/zoom control used on Google Maps. Appears in the top left corner of the map.

Overview a collapsible overview map in the corner of the screen . It's not valid por Yahoo provider

Scale-

a map scale Heigth

Data Binding

An SDT variable of GXmap type can be specified to indicate points on the map at runtime: the variable is created when dragging and dropping the control. For each point of the provided collection, the following is specified:
Point coordinates (PointLat, PointLong)
Icon – type of icon
infowindow - text to display upon clicking the point
InfowindowTit - title
InfowindowDesc - text
infowindowLink - Link

Google Provider
Icon

Offers a combo of colors and shape icons. The possible values are: Red, Green Blue,Green circle, Yellow circle, Blue Circle, Orange, Pink. Image:IconValues
These values are defined in http://gmaps-samples.googlecode.com/svn/trunk/markers/

OpenlinkInNewwindow
It allows open a new windows when click the PointInfowinLink inside the baloom.
Getcoordenates

 

Geticon It allows to change the color of the icon which is use to get the coordinate of any point
OnClick

It allows get the latitud/longitude of any point, just clicking on the map  
Values
      getvalue & center  : return coordenates of the clicked point and center the map there.
      getvalue  : return coordenates of the clicked point. 
      none  : there is no action when click on the map

getlatitude
getlongitude
This properties are read only in design time, just for using in runtime.
It means that, to get coordenate of any point in yhe map , it is possible to programming any event with the following code: 
 
     &newpointlatitude = googlemapcontrol1.getlatitude
      &newpointlongitude = googlemapcontrol1.getlongitude
   

Notes:
The Street/StreetNumber/Cross Street properties have not been implemented with Google and Yahoo providers.
The Data binding Icon property still isn't taken into account at runtime.

Licensing

Google Provider: You have to obtain an access key from http://www.google.com/apis/maps/signup.html with the following terms of use

Yahoo Provider: You have to obtain an access key from http://developer.yahoo.com/maps/simple/index.html with the following terms of use


Implementation

Versions:
6.0 - coming soon ... using V3 implementation of the api 
5.2 - Distribute with GxXev1 U3 
        Geocoding

5.1 - Distribute with GxXev1 U1 
        New properties: 
OpenlinkinNewwindow. 
        Rename property Get readonly to Onclick and include a new value "getvalue & center"
        Fix: 
when is marked a point , it is possible to use another icon different from the predetermined 
5.0 - Breaking change: Change the name of the control to GoogleMapControl
        New GetCoordenate section include GetIcon Property, Get readonly property and 
getlatitude/getlongitude (boths are readonly in design time).
4.0 - Access to new api V2 (required for Ruby prototyping ) 
       It is possible to change the icon color:
                   For the entire map using the Icon property of the control 
                   Per each marked point using the PointIcon property of Gxmap.point data type
3.1 - Fix some default values and implement the Access Yahoo Key
3.0 - Include Icon (google Provider). Include Linkdescription and image (google, yahoo)
2.0 - Include Ica Provider - Montevideo Local Map
1.3 - Include a fix for google and Yahoo map
1.2 - Update the control for breaking change of Build 6884
1.0 - google and Yahoo map implementation

You can choose the control provider from the window properties selecting and setting the Provider property. Your selection depends of your needs because each provider offers differents functionalities.

Image:Map control - Properties

Provider = Google (googlemaps.js)

Image:MapcontrolgooImage

  • City – coordinates (Latitude, Longitude) of the city represented in grades. They are defined in User control/Map/Mapdefinition.xml
  • Specific Latitude – the value is represented in grades. N/E positive, S/W negative
  • Specific Longitude – the value is represented in grades. N/E positive, S/W negative
  • Precision - levels 1 to 16 to indicate the zoom (the higher the number, the closer the zoom)
    map.setCenter(new GLatLng(This.Latitude,this.Longitude), This.Precision );  
    Type
    • Map
    • Satellital Image
    • Hybrid
       map.setMapType(this.Type); 

  • Access Key – the key is obtained from http://www.google.com/apis/maps/signup.html. The URL for publishing the map has to be specified. It has some restrictions such as the number of accesses per day to the page.
    • Small - let us pan/zoom the map.
      map.addControl(newGSmallMapControl());
       
      SmallZoom
    • map.addControl(new GSmallZoomControl());
    • Type

      map.addControl(newGMapTypeControl());
    • Overviewype (Only Google)
      map.addControl(new GOverviewMapControl());
    • Large-
      map.addControl(new GLargeMapControl());
    • Scale-
      map.addControl(new GScaleControl());
       
       
Provider = Yahoo (yahoomaps.js)

Image:MapcontrolyahImage

  • City – Similar to Google's implementation
    map.drawZoomAndCenter(new YGeoPoint(this.Latitude,this.Longitude, this.Precision)
     
     
    Type
  • Specific Latitude – the value is represented in grades. N/E positive, S/W negative
  • Specific Longitude – the value is represented in grades. N/E positive, S/W negative
  • Precision - levels 1 to 16 to indicate the zoom (the smaller the number, the closer the zoom)
     
    • Map
    • Satellital Image
    • Hybrid
        map.setMapType(value);
    • Small - let us pan/zoom the map.

      map.addZoomLong();
       
      SmallZoom
    • map.addZoomShort();
    • Type
      map.addTypeControl()
    • Large-
      map.addPanControl();
    • Scale-
      map.addZoomScale()
       
       

Please visit: Default Installation Instructions for User Controls.



Created: 08/02/07 09:57 AM by jlarrosa Last update: 08/05/10 04:37 PM by jlarrosa
 
Page
Categories
Group
 
Powered by GXwiki 3.0 (generated with GeneXus X Evolution 1 U3)