+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Adding geomapping to an existing custom module

Adding geomapping to an existing custom module

2 posts, 0 answered
  1. David van Geel
    David van Geel avatar
    59 posts
    Registered:
    19 Aug 2009
    20 May 2010
    Link to this post
    Hi All,

    Is there a way to add Geomapping functionality (like in the Events module) to a existing custom module. The custom module is not based on the Events module but on the ManagerBase class.

    I noticed the GeomappingEditor user control but I am wondering if it's a simple as defining the appriate meta fields (street, city, etc.) in the module and adding this control to the new and edit pages.

    Regards,


    David
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    20 May 2010
    Link to this post
    Hello David van Geel,

    It could be done.

    1. In your module add the Geomapping control declaration

    <div id="geomappingSettings">
                                   <p class="expandMapServiceOptions"><a href="javascript:toggleClass('geomappingSettings','');">Use geographic map in your site</a>(Google Maps, Yahoo! Maps or Live Search Maps)</p>
                                   <div id="mapServiceWrapper">
                                       <sfEvn:GeomappingEditor LayoutTemplatePath="~/CustomControls/GeomappingEditor.ascx" ID="Geomapping_Data" runat="server" CssClass="geomaping">
                                       </sfEvn:GeomappingEditor>
                                       <p class="closeMapOptions"><a href="javascript:toggleClass('geomappingSettings','noMapService');">Close</a></p>
                                   </div>
                          </div>
                        <script type="text/javascript">
                          
                           var geomapping = document.getElementById("geomappingSettings");
                           var geoOptionsWrapper = document.getElementById("mapServiceWrapper");
     
                           var geoOptions = document.getElementById("geomappingServicesOptions").getElementsByTagName("input");
                           if(geoOptions.length > 0) {
                               for ( var i = 0; i < geoOptions.length; i++) {
                                   if(geoOptions[i].value == "rdbNoMapService" && geoOptions[i].checked == true) {
                                       geomapping.className = "noMapService";
                                       geoOptionsWrapper.className = "showCloseBtn";
                                       var geomappingCoordsDivs = document.getElementById("geomappingCoords").childNodes;
                                       for(var j = 0; j < geomappingCoordsDivs.length; j++) {
                                           if(geomappingCoordsDivs[j].tagName == "DIV") {
                                               geomappingCoordsDivs[j].style.display = "none";
                                           }
                                       }
                                   }
                               }
                           }
                           function toggleClass(elID, elClass) {
                               document.getElementById(elID).className = elClass;
                      </script>

    2. Create a template of the GeomappingEditor

    <%@ Control Language="C#" %>
     
    <script type="text/C#" runat="server">
     
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            this.Page.ClientScript.RegisterClientScriptResource(typeof(Telerik.Events.WebControls.Admin.GeomappingEditor), "Telerik.Events.Resources.GeomappingEditor.js");
            if (this.GoogleMapsEnabled)
                this.Page.ClientScript.RegisterClientScriptInclude("googleGeomapping", String.Concat(this.GoogleMapsAPIUrl, this.GoogleMapsAPIKey));
           
            this.Page.ClientScript.RegisterClientScriptResource(typeof(Telerik.Events.WebControls.Admin.GeomappingEditor), "Telerik.Events.Resources.Geomapping.js");
          
             
            if (this.Street != null && this.City != null && this.Country != null && this.State != null)
            {
                this.Page.ClientScript.RegisterStartupScript(
                        typeof(Telerik.Events.WebControls.Admin.GeomappingEditor),
                        "create",
                        String.Format("GeomappingEditor.Create(\"{0}\", \"{1}\", \"{2}\", \"{3}\", \"{4}\", \"{5}\", \"{6}\", \"{7}\", \"{8}\", \"{9}\", \"{10}\", \"{11}\");",
                        this.ClientID,
                        this.hdnChosenMapService.ClientID,
                        this.pnlGeomapping.ClientID,
                        this.pnlGeomappingServiceDisabled.ClientID,
                        this.pnlMapPreview.ClientID,
                        ((WebControl)this.GeoLatitude).ClientID,
                        ((WebControl)this.GeoLongitude).ClientID,
                        ((WebControl)this.Street).ClientID,
                        ((WebControl)this.City).ClientID,
                        ((WebControl)this.Country).ClientID,
                        ((WebControl)this.State).ClientID,
                        "InvalidAddressMessage".Replace('"', '\'')
                        ), true);
            }
     
            this.pnlGeomapping.Style["display"] = "";
            this.pnlGeomappingServiceDisabled.Style["display"] = "";
     
            if(this.geomappingServiceName ==  "google")
            {
                    if (this.GoogleMapsEnabled)
                        this.pnlGeomappingServiceDisabled.Style["display"] = "none";
                    else
                        this.pnlGeomapping.Style["display"] = "none";
     
                
            }
     
            this.pnlMapPreview.Style["width"] = "500px";
            this.pnlMapPreview.Style["height"] = "300px";
            this.pnlMapPreview.Style["position"] = "relative";
            this.pnlMapPreview.Style["display"] = "none";
        }
     
        public string GoogleMapsAPIKey
        {
            get
            {
                if (String.IsNullOrEmpty(this.googleMapsAPIKey))
                    this.googleMapsAPIKey = Telerik.Events.Configuration.ConfigHelper.Handler.GoogleMapsAPIKey;
                return this.googleMapsAPIKey;
            }
            set
            {
                this.googleMapsAPIKey = value;
            }
        }
     
        public string GoogleMapsAPIUrl
        {
            get
            {
                if (String.IsNullOrEmpty(this.googleMapsAPIUrl))
                    this.googleMapsAPIUrl = Telerik.Events.Configuration.ConfigHelper.Handler.GoogleMapsAPIUrl;
                return this.googleMapsAPIUrl;
            }
            set
            {
                this.googleMapsAPIUrl = value;
            }
        }
     
        public bool GoogleMapsEnabled
        {
            get
            {
                return (this.GoogleMapsAPIKey.Length > 0 && this.GoogleMapsAPIUrl.Length > 0);
            }
        }
     
         
         
         
        private string geomappingServiceName;
        private string googleMapsAPIKey;
        private string googleMapsAPIUrl;
         
         
    </script>
     
                    <asp:Literal ID="ltrEventLocation" runat="server" Text="EventLocation"" /></h3>
                            <fieldset class="set">
                                <div class="setIn">
                                    <p class="example">
                                        <asp:Literal ID="ltrEventLocationNote" runat="server" Text="EventLocationNote" />
                                    </p>
                                    <ol>
                                        <li>
                                            <asp:Label ID="lblStreet" runat="server" Text="Street" AssociatedControlID="Street"></asp:Label>
                                            <asp:TextBox ID="Street" runat="server"></asp:TextBox>
                                        </li>
                                        <li>
                                            <asp:Label ID="lblCity" runat="server" Text="City" AssociatedControlID="City"></asp:Label>
                                            <asp:TextBox ID="City" runat="server"></asp:TextBox>
                                        </li>
                                        <li>
                                            <asp:Label ID="lblCountry" runat="server" Text="Country" AssociatedControlID="Country"></asp:Label>
                                            <asp:DropDownList ID="Country" runat="server">
                                                <asp:ListItem Text="-- Select country --" Value=""></asp:ListItem>
                                                <asp:ListItem Text="AFGHANISTAN" Value="AFGHANISTAN"></asp:ListItem>
                                                <asp:ListItem Text="ÅLAND ISLANDS" Value="ÅLAND ISLANDS"></asp:ListItem>
                                                <asp:ListItem Text="ALBANIA" Value="ALBANIA"></asp:ListItem>
                                                <asp:ListItem Text="ALGERIA" Value="ALGERIA"></asp:ListItem>
                                                <asp:ListItem Text="AMERICAN SAMOA" Value="AMERICAN SAMOA"></asp:ListItem>
                                                <asp:ListItem Text="ANDORRA" Value="ANDORRA"></asp:ListItem>
                                                <asp:ListItem Text="ANGOLA" Value="ANGOLA"></asp:ListItem>
                                                <asp:ListItem Text="ANGUILLA" Value="ANGUILLA"></asp:ListItem>
                                                <asp:ListItem Text="ANTARCTICA" Value="ANTARCTICA"></asp:ListItem>
                                                <asp:ListItem Text="ANTIGUA AND BARBUDA" Value="ANTIGUA AND BARBUDA"></asp:ListItem>
                                                <asp:ListItem Text="ARGENTINA" Value="ARGENTINA"></asp:ListItem>
                                                <asp:ListItem Text="ARMENIA" Value="ARMENIA"></asp:ListItem>
                                                <asp:ListItem Text="ARUBA" Value="ARUBA"></asp:ListItem>
                                                <asp:ListItem Text="AUSTRALIA" Value="AUSTRALIA"></asp:ListItem>
                                                <asp:ListItem Text="AUSTRIA" Value="AUSTRIA"></asp:ListItem>
                                                <asp:ListItem Text="AZERBAIJAN" Value="AZERBAIJAN"></asp:ListItem>
                                                <asp:ListItem Text="BAHAMAS" Value="BAHAMAS"></asp:ListItem>
                                                <asp:ListItem Text="BAHRAIN" Value="BAHRAIN"></asp:ListItem>
                                                <asp:ListItem Text="BANGLADESH" Value="BANGLADESH"></asp:ListItem>
                                                <asp:ListItem Text="BARBADOS" Value="BARBADOS"></asp:ListItem>
                                                <asp:ListItem Text="BELARUS" Value="BELARUS"></asp:ListItem>
                                                <asp:ListItem Text="BELGIUM" Value="BELGIUM"></asp:ListItem>
                                                <asp:ListItem Text="BELIZE" Value="BELIZE"></asp:ListItem>
                                                <asp:ListItem Text="BENIN" Value="BENIN"></asp:ListItem>
                                                <asp:ListItem Text="BERMUDA" Value="BERMUDA"></asp:ListItem>
                                                <asp:ListItem Text="BHUTAN" Value="BHUTAN"></asp:ListItem>
                                                <asp:ListItem Text="BOLIVIA" Value="BOLIVIA"></asp:ListItem>
                                                <asp:ListItem Text="BOSNIA AND HERZEGOVINA" Value="BOSNIA AND HERZEGOVINA"></asp:ListItem>
                                                <asp:ListItem Text="BOTSWANA" Value="BOTSWANA"></asp:ListItem>
                                                <asp:ListItem Text="BOUVET ISLAND" Value="BOUVET ISLAND"></asp:ListItem>
                                                <asp:ListItem Text="BRAZIL" Value="BRAZIL"></asp:ListItem>
                                                <asp:ListItem Text="BRITISH INDIAN OCEAN TERRITORY" Value="BRITISH INDIAN OCEAN TERRITORY"></asp:ListItem>
                                                <asp:ListItem Text="BRUNEI DARUSSALAM" Value="BRUNEI DARUSSALAM"></asp:ListItem>
                                                <asp:ListItem Text="BULGARIA" Value="BULGARIA"></asp:ListItem>
                                                
                                            </asp:DropDownList>
                                        </li>
                                        <li id="liState" runat="server">
                                            <asp:Label ID="lblState" runat="server" Text="State" AssociatedControlID="State"></asp:Label>
                                            <asp:DropDownList ID="State" runat="server">
                                                <asp:ListItem Text="-- Select state --" Value=""></asp:ListItem>
                                                <asp:ListItem Text="Alabama"></asp:ListItem>
                                                <asp:ListItem Text="Alaska"></asp:ListItem>
                                                <asp:ListItem Text="Arizona"></asp:ListItem>
                                                <asp:ListItem Text="Arkansas"></asp:ListItem>
                                            </asp:DropDownList>
                                        </li>
                                    </ol>
                                </div>
                              </fieldset>   
                                 
     
     
    <h5 class="radioLab"><asp:Literal ID="ltrChoosMapService" runat="server" Text="ChooseMapService" /></h5>
    <div class="directionFloat">
    <ul class="radio clearfix" id="geomappingServicesOptions">
        <li><asp:RadioButton ID="rdbNoMapService" runat="server" GroupName="mapService" Text="NoMapService" /></li>
        <li><asp:RadioButton ID="rdbGoogleMaps" runat="server" GroupName="mapService" Text="GoogleMaps" /></li>
        <li><asp:RadioButton ID="rdbYahooMaps" runat="server" GroupName="mapService" Text="YahooMaps "/></li>
        <li><asp:RadioButton ID="rdbLiveSearchMaps" runat="server" GroupName="mapService" Text="LiveSearchMaps" /></li>
    </ul>
    </div>
    <div class="geomaping" id="geomappingCoords">
     
        <asp:Panel ID="pnlGeomapping" runat="server">
            <ol class="geomapCoordinates">
                <li>
                    <asp:Label runat="server" Text="GeoLatitude"
                        AssociatedControlID="GeoLatitude"></asp:Label>
                    <asp:TextBox ID="GeoLatitude" runat="server"></asp:TextBox>
                </li>
                <li>
                    <asp:Label runat="server" Text="GeoLongitude"
                        AssociatedControlID="GeoLongitude"></asp:Label>
                    <asp:TextBox ID="GeoLongitude" runat="server"></asp:TextBox>
                </li>
                <li>
                    <asp:LinkButton ID="lnkAcquireGeoPosition" runat="server" Text="AcquireCoordinates" class="eq"></asp:LinkButton>
                </li>
            </ol>
             
            <asp:Panel ID="pnlMapPreview" runat="server"></asp:Panel>
     
            <asp:HiddenField ID="hdnChosenMapService" runat="server" />
        </asp:Panel>
     
        <asp:Panel ID="pnlGeomappingServiceDisabled" runat="server">
            <p>
                <asp:Literal ID="lblGeomappingServiceDisabled1" runat="server" Text="GeomappingServiceDisabled1" />
                <asp:LinkButton ID="geomappingSettingsButton" runat="server" Text="ThisLink "></asp:LinkButton>
                <asp:Literal ID="lblGeomappingServiceDisabled2" runat="server" Text="GeomappingServiceDisabled2" />
            </p>
        </asp:Panel>
    </div>

    You could extend the code the support yahoo maps. Currently it works with Google maps and

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
2 posts, 0 answered