Information Window close button not able to see

[JulieBiju]

Thank U for ur time.

Information window added in the following way.It is success also. The problem is Information window header portion showing black colour and not possible to see the close button.How can i solve that?

Is it possible to avoid zoomto option from information window?

Script and style portion below

<style type="text/css">

        html, body, #mapDiv{

        padding: 0;

        margin: 0;

        height: 99.8%;

          z-index: -1;

         -moz-border-radius:4px;

        overflow:hidden;

        }

         .claro .dijitButtonText {

        color:#03c;

        font-family: Arial, Helvetica, sans-serif

        font-weight:bold;

      }

      .claro td.dijitMenuItemLabel {

        color:#03c;

        font-family: Arial, Helvetica, sans-serif

        font-weight:500;

      }

        .auto-style1 {

        }

        .auto-style2 {

           height: 20px;

        }

        .auto-style3 {

            height: 20px;

        }

        .auto-style4 {

            text-align: left;

        }

        .auto-style5 {

            width: 137px;

        }

        .auto-style6 {

            height: 2%;

            width: 279px;

        }

        .auto-style7 {

            width: 279px;

        }

        #TxtAltareeqEng {

            width: 55px;

        }

        #TxtAltareeqEng0 {

            width: 55px;

        }

    </style>

        <script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script>

    <script type="text/javascript" src="http://js.arcgis.com/3.14/"></script>

         <script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>

        <script type="text/javascript">

            window.onerror = function (msg, url, linenumber) {

                alert('Error message: ' + msg + '\nURL: ' + url + '\nLine Number: ' + linenumber);

                return true;

            }

            dojo.require("dijit.layout.BorderContainer");

            dojo.require("dijit.layout.ContentPane");

            dojo.require("esri.map");

            dojo.require("esri.dijit.BasemapGallery");

            dojo.require("dijit.Tooltip");

            dojo.require("dijit.form.Button");

            dojo.require("dijit.Menu");

            dojo.require("esri.dijit.Popup");

            dojo.require("esri.dijit.PopupTemplate");

            dojo.require("esri.graphicsUtils");

Coding

   var geomPoint = new esri.geometry.Point(list.d[recordcount].ELon, list.d[recordcount].ELat);

                            var symbol = new esri.symbol.PictureMarkerSymbol({

                                "url": colourstyle,

                                "height": 16,

                                "width": 16,

                                "type": "esriPMS"

                            });

                            var infoTemplate = new esri.InfoTemplate();

                            infoTemplate.content = strhotspot;

                            var pointGraphic = new esri.Graphic(geomPoint, symbol);

                            pointGraphic.setInfoTemplate(infoTemplate);

                            graphicsLayer.add(pointGraphic);

[RobertScheitlin__GISP]

Juile,

   It is going to be difficult for people to help you when you are providing code written in the OLD Legacy style. If you can attach your whole code by clicking "Use advanced editor" and then the attach link. then I can show you how your code should look in AMD.

[TracySchloss]

I would think twice about removing the ZoomTo button.  Most users seem to like it.  If you really want to remove it,  it could be you don't want to use an InfoTemplate, since that's part of it. There are other popups to use, not just InfoTemplate. Check out the section in the Help for Work with the API > Popups and InfoWindows.  It talks about various options for styling. Both the header and the text can be changed.I would remove all your styles related to the InfoWindow and add them back one at a time.

I agree with Robert, you'll see very little legacy code used in the forums and and you'll not get many people to give you examples in that format. 

[JulieBiju]

Very thankful to u. Actually I am in a big task for changing the platform from silverlight to javascript and I am very new in javascript writing.I cannot move forward without any help.Here my requirement s very simple. We have our own map which is published with ESRI server 10.1. Our two maps I need to show n our application + Bing maps also.For that I write the code below. Pls clcik the Last position button and u can see 3 graphics will add on map. Actually sometimes it is 10  number of graphics .Here I added the code for testing purpose.

1.How to write this code in AMD?

2.Here TareeqENG and TareeqARB are our maps(for security reasns I added the sample ESRI link).I need to add these maps first. Then need to add Bing maps in createBasemapGallery. But if I will add the order like I pasted below Bing map will not show.How to solve this? If I add Bingmap first then no issue in displaying the Bing maps but other two maps will take time to show sometimes.

3.if Graphics count is 10 how can I set visibility of all graphics(setextent)?

4.How can i see the close button of information window?

5.Sometimes graphics will add only two icons,But if I will put some alert message in between it will show all the graphics.How can I solve?

Pls help me and no words for ur valuable time. I am very new here in jsapi...so sorry for the mistakes.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html>

<html>

    <head id="Head1" runat="server">

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior

    of the samples on iOS devices-->

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Basemap Gallery - Bing Maps</title>

    <link rel="stylesheet" href="./CSS/claro.css">

    <link rel="stylesheet" href="./CSS/esri.css">

    <style type="text/css">

        html, body, #mapDiv{

        padding: 0;

        margin: 0;

        height: 100%;

          z-index: -1;

         -moz-border-radius:4px;

        overflow:hidden;

        }

         .claro .dijitButtonText {

        color:#03c;

        font-family: Arial, Helvetica, sans-serif

        font-weight:bold;

      }

      .claro td.dijitMenuItemLabel {

        color:#03c;

        font-family: Arial, Helvetica, sans-serif

        font-weight:500;

      }

        .auto-style1 {

        }

        .auto-style2 {

           height: 20px;

        }

        .auto-style3 {

            height: 20px;

        }

        .auto-style6 {

            height: 2%;

            width: 279px;

        }

        .auto-style7 {

            width: 279px;

        }

        #TxtAltareeqEng {

            width: 55px;

        }

        #TxtAltareeqEng0 {

            width: 55px;

        }

    </style>

        <script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script>

    <script type="text/javascript" src="http://js.arcgis.com/3.14/"></script>

         <script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>

        <script type="text/javascript">

            window.onerror = function (msg, url, linenumber) {

                alert('Error message: ' + msg + '\nURL: ' + url + '\nLine Number: ' + linenumber);

                return true;

            }

            dojo.require("dijit.layout.BorderContainer");

            dojo.require("dijit.layout.ContentPane");

            dojo.require("esri.map");

            dojo.require("esri.dijit.BasemapGallery");

            dojo.require("dijit.Tooltip");

            dojo.require("dijit.form.Button");

            dojo.require("dijit.Menu");

            dojo.require("esri.dijit.Popup");

            dojo.require("esri.dijit.PopupTemplate");

            dojo.require("esri.graphicsUtils");

            var map;

            var TareeqENG, TareeqARB, gMap, BingLayer;

            var graphicsLayer;

            var AltareeqArb, AltareeqEng;

            var lastposdate = "";

            var DoorOpenClose = 'NO';

            var ResolutionCount = 0

            var maxdate;

            var fahrID = "";

            var FahrName = "";

            var basemapGallery;

            function init() {

                map = new esri.Map("mapDiv", {

                    center: [6.389, 36.054],

                    zoom: 4

                });

                var RadioButtonList1 = document.getElementsByName("RadioButtonList1");

                if (RadioButtonList1[0].checked) {

                    dijit.byId("LnkLastPosition").set("label", "LastPosition");

                    dijit.byId("LnkTracking").set("label", "Tracking");

                }

                else {

                    dijit.byId("LnkLastPosition").set("label", "الموقف الأخير");

                    dijit.byId("LnkTracking").set("label", "التتبع");

                }

                createBasemapGallery();

            }

            function createBasemapGallery() {

                AltareeqEng = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapSer...";

                AltareeqArb = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer";

                //Manually create a list of basemaps to display

                var basemaps = [];

                TareeqENG = new esri.dijit.Basemap({

                    layers: [new esri.layers.ArcGISDynamicMapServiceLayer(AltareeqEng)],

                    id: "TareeqENG",

                    title: "Al-Tareeq(ENG)"

                });

                basemaps.push(TareeqENG);

                TareeqARB = new esri.dijit.Basemap({

                    layers: [new esri.layers.ArcGISDynamicMapServiceLayer(AltareeqArb)],

                    id: "TareeqARB",

                    title: "Al-Tareeq(AR)"

                });

                basemaps.push(TareeqARB);

                BingMapsRoad = new esri.dijit.Basemap({

                    layers: [new esri.dijit.BasemapLayer({

                        type: "BingMapsRoad"

                    })],

                    id: "bmRoad",

                    title: "BingMaps-Road"

                });

                basemaps.push(BingMapsRoad);

                BingMapsAerial = new esri.dijit.Basemap({

                    layers: [new esri.dijit.BasemapLayer({

                        type: "BingMapsAerial"

                    })],

                    id: "bmAerial",

                    title: "BingMaps-Aerial"

                });

                basemaps.push(BingMapsAerial);

                BingMapsHybrid = new esri.dijit.Basemap({

                    layers: [new esri.dijit.BasemapLayer({

                        type: "BingMapsHybrid"

                    })],

                    id: "bmHybrid",

                    title: "BingMaps-Aerial-Labels"

                });

                basemaps.push(BingMapsHybrid);

                basemapGallery = new esri.dijit.BasemapGallery({

                    showArcGISBasemaps: false,

                    basemaps: basemaps,

                    bingMapsKey: "key",

                    map: map

                });

                graphicsLayer = new esri.layers.GraphicsLayer();

                map.addLayer(graphicsLayer);

                //BasemapGallery.startup isn't needed because we aren't using the default basemap, instead

                //we are going to create a custom user interface to display the basemaps, in this case a menu.

                dojo.forEach(basemapGallery.basemaps, function (basemap) {

                    //Add a menu item for each basemap, when the menu items are selected

                    dijit.byId("bingMenu").addChild(new dijit.MenuItem({

                        label: basemap.title,

                        onClick: dojo.hitch(this, function () {

                            this.basemapGallery.select(basemap.id);

                        })

                    }));

                });

            }

            function LastPosClick() {

                map.infoWindow.hide();

                colourstyle = "Images/sphere-blue-dark-16x16.png"

                Status = "status";

                var procname = "procname";

                var location = "location";

                var Driver = "Drv";

                var strhotspot = "strhotspot";

                var geomPoint1 = new esri.geometry.Point(58.46236, 23.61581);

                var geomPoint2 = new esri.geometry.Point(59.46236, 23.61581);

                var geomPoint3 = new esri.geometry.Point(60.43362666666, 23.583081666666);

                var symbol = new esri.symbol.PictureMarkerSymbol({

                    "url": colourstyle,

                    "height": 16,

                    "width": 16,

                    "type": "esriPMS"

                });

                var infoTemplate = new esri.InfoTemplate();

                infoTemplate.content = strhotspot;

                var pointGraphic = new esri.Graphic(geomPoint1, symbol);

                var pointGraphic2 = new esri.Graphic(geomPoint2, symbol);

                var pointGraphic3 = new esri.Graphic(geomPoint3, symbol);

                pointGraphic.setInfoTemplate(infoTemplate);

                pointGraphic2.setInfoTemplate(infoTemplate);

                pointGraphic3.setInfoTemplate(infoTemplate);

                graphicsLayer.add(pointGraphic);

                graphicsLayer.add(pointGraphic2);

                graphicsLayer.add(pointGraphic3);

                setextent()

                var DivesriLogoImage = document.getElementById('DivesriLogoImage');

                var mapDiv = document.getElementById('mapDiv');

                mapDiv.style.visibility = "visible";

                DivesriLogoImage.style.visibility = "hidden";

            }

            function setextent() {

                //var graphics = graphicsUtils.graphicsExtent(graphicsLayer.graphics);

                //map.setExtent(graphics)

            }

            dojo.ready(init);

        </script>

</head> 

<body class="claro" style="background-image: url('Images/menubackground.png');"  >

<form id="form1" runat="server">

    <div style="width: 100%; height: 100%">

                <table id="Tablecontrols0"   style="font-size: 15px; z-index: 101;

            background-color: #5B748B; width: 100%; height: 100%;">

            <tr style="font-family: Times New Roman">

                <td style="border-style: none; background-color: #496277; "

                    valign="top" class="auto-style6" >

                    <asp:RadioButtonList ID="RadioButtonList1" runat="server" Font-Bold="True" Font-Italic="False" ForeColor="White" RepeatDirection="Horizontal" AutoPostBack="True" Font-Names="Verdana" Font-Size="10pt">

                        <asp:ListItem Selected="True">English</asp:ListItem>

                        <asp:ListItem>العربية</asp:ListItem>

                    </asp:RadioButtonList>

                </td>

                <td align="left"    style="border-style: none; background-color: #496277; height: 2%;"

                    valign="top" class="auto-style3" >

                                                  </td>

            </tr>

            <tr style="font-family: Times New Roman">

                <td style="border-style: none;"

                    valign="top" bgcolor="#496277" class="auto-style7"  >

                    <table id="Tablecontrols"   style="border-color: #F2F0EE; font-size: 15px; z-index: 101;

            background-color: #496277; width:auto; height: 274px; font-family: verdana; color: tomato; font-weight: bold; border-top-style: none;" align="left">

            <tr style="font-family: Times New Roman">

                <td

                    rowspan="1" valign="top" height="10px" class="auto-style1">

                     </td>

                <td

                    rowspan="1" style="border-style: none;"

                    valign="top" height="10px" >

                     </td>

            </tr>

            <tr style="font-family: Times New Roman">

                <td

                    rowspan="1" style="font-weight: bold; " valign="top" height="10px" class="auto-style1" >

                     </td>

                <td

                    rowspan="1" style="border-style: none;"

                    valign="top" height="10px" >

                     </td>

            </tr>

            <tr style="font-family: Times New Roman">

                <td style="font-weight: bold; " valign="top" height="10" class="auto-style1" colspan="2" >

                     </td>

            </tr>

            <tr style="font-family: Times New Roman">

                <td style="font-weight: bold; text-align: center; " valign="top" class="auto-style2" >

                        <button dojoType="dijit.form.Button" id="LnkLastPosition" onClick="LastPosClick()"style="font-family: Arial; font-size: x-small; font-weight: normal">

                    Last Position</button> </td>

                <td style="border-style: none; text-align: center;"

                    valign="top" class="auto-style3" >

                        <button dojoType="dijit.form.Button" id="LnkTracking" onClick="LastPosClick()"style="font-family: Arial; font-size: x-small; font-weight: normal">

                    Tracking</button> </td>

            </tr>

            <tr style="font-family: Times New Roman">

                <td

                    colspan="2" rowspan="1" style="border-top: 2px solid #547289; border-bottom: 2px solid #547289; font-weight: bold;  position: static;

                    height: 100%; text-align: left; width: 30%; border-left-width: 2px; border-right-width: 2px;" valign="top" align="left">

                      <div id="Something">

    </div>

                      <div style="width: 300px; height: 356px; overflow: scroll">

                </div>

                                  </td>

            </tr>

            </table>

               </td>

                <td style="border-style: none; background-color: white;  width: 100%; height:100%;"

                    valign="top" id="td11" >

             <div id="mapDiv" runat ="server"  dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000; visibility: hidden; height: 100%;">

        <div style="position:absolute; right:50px; top:100px; z-Index:99;">

          <button id="dropdownButton"  label="Basemaps"  data-dojo-type="dijit.form.DropDownButton">

            <div data-dojo-type="dijit.Menu" id="bingMenu">

              <!--The menu items are dynamically created using the basemap gallery layers-->

            </div>

          </button>

        </div>

      </div>

    </div>

<%--        

                    <%--<asp:Image runat="server" ImageUrl="Images/tareeq Logo1.jpg" ID="esriLogoImage" Height="495px" style="margin-right: 36px" Width="100%"  />--%>

              <div id="DivesriLogoImage" runat ="server"  style="background-color: #FFFFFF; width: 80%; height:99.8%; visibility: hidden; position: absolute; top: 72px;" align="center">

    <asp:Image runat="server" ID="esriLogoImage" ImageAlign="Middle" Height="564px"  />

  </div>

                                     </td>

            </tr>

            </table>

     </div>

        </form>

</body>

</html>

[RobertScheitlin__GISP · Accepted solution]

Julie,

  Here is your code in AMD style and everything working. I don't use Visual Studio for JS development so I remove or commented out all the asp/aspx stuff from the code.  As I mentioned before Almost all the JS API sample are written in AMD so it should be easier for you to learn that then the legacy style you were starting with.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior

    of the samples on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Basemap Gallery - Bing Maps</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">

  <style type="text/css">
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      z-index: -1;
      -moz-border-radius: 4px;
      overflow: hidden;
    }

    .claro .dijitButtonText {
      color: #03c;
      font-family: Arial, Helvetica, sans-serif font-weight: bold;
    }

    .claro td.dijitMenuItemLabel {
      color: #03c;
      font-family: Arial, Helvetica, sans-serif font-weight: 500;
    }

    .auto-style1 {}

    .auto-style2 {
      height: 20px;
    }

    .auto-style3 {
      height: 20px;
    }

    .auto-style6 {
      height: 2%;
      width: 279px;
    }

    .auto-style7 {
      width: 279px;
    }

    #TxtAltareeqEng {
      width: 55px;
    }

    #TxtAltareeqEng0 {
      width: 55px;
    }
  </style>

  <script type="text/javascript" src="http://js.arcgis.com/3.14/"></script>
  <!--<script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>-->
  <script type="text/javascript">
    window.onerror = function (msg, url, linenumber) {
      alert('Error message: ' + msg + '\nURL: ' + url + '\nLine Number: ' + linenumber);
      return true;
    }

    var map, basemapGallery;
    require([
        "esri/map",
        "esri/graphic",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/GraphicsLayer",
        "esri/geometry/Extent",
        "esri/geometry/Point",
        "esri/symbols/PictureMarkerSymbol",
        "esri/InfoTemplate",
        "esri/dijit/Basemap",
        "esri/dijit/BasemapGallery",
        "esri/dijit/BasemapLayer",
        "esri/graphicsUtils",
        "dojo/_base/array",
        "dojo/parser",
        "dojo/dom",
        "dojo/_base/lang",
        "dijit/MenuItem",
        "dijit/Menu",
        "dijit/layout/ContentPane",
        "dijit/form/Button",
        "dijit/form/RadioButton",
        "dijit/form/DropDownButton",
        "dojo/domReady!"
        ],
      function (
        Map,
        Graphic,
        ArcGISDynamicMapServiceLayer,
        GraphicsLayer,
        Extent,
        Point,
        PictureMarkerSymbol,
        InfoTemplate,
        Basemap,
        BasemapGallery,
        BasemapLayer,
        graphicsUtils,
        array,
        parser,
        dom,
        lang,
        MenuItem
      ) {
        parser.parse();

        var TareeqENG, TareeqARB;
        var graphicsLayer;
        var AltareeqArb, AltareeqEng;

        /*Manually define the maps LODs*/
        var lods = [
         {
          "level": 0,
          "resolution": 156543.03392800014,
          "scale": 5.91657527591555E8
         },
         {
          "level": 1,
          "resolution": 78271.51696399994,
          "scale": 2.95828763795777E8
         },
         {
          "level": 2,
          "resolution": 39135.75848200009,
          "scale": 1.47914381897889E8
         },
         {
          "level": 3,
          "resolution": 19567.87924099992,
          "scale": 7.3957190948944E7
         },
         {
          "level": 4,
          "resolution": 9783.93962049996,
          "scale": 3.6978595474472E7
         },
         {
          "level": 5,
          "resolution": 4891.96981024998,
          "scale": 1.8489297737236E7
         },
         {
          "level": 6,
          "resolution": 2445.98490512499,
          "scale": 9244648.868618
         },
         {
          "level": 7,
          "resolution": 1222.992452562495,
          "scale": 4622324.434309
         },
         {
          "level": 8,
          "resolution": 611.4962262813797,
          "scale": 2311162.217155
         },
         {
          "level": 9,
          "resolution": 305.74811314055756,
          "scale": 1155581.108577
         },
         {
          "level": 10,
          "resolution": 152.87405657041106,
          "scale": 577790.554289
         },
         {
          "level": 11,
          "resolution": 76.43702828507324,
          "scale": 288895.277144
         },
         {
          "level": 12,
          "resolution": 38.21851414253662,
          "scale": 144447.638572
         },
         {
          "level": 13,
          "resolution": 19.10925707126831,
          "scale": 72223.819286
         },
         {
          "level": 14,
          "resolution": 9.554628535634155,
          "scale": 36111.909643
         },
         {
          "level": 15,
          "resolution": 4.77731426794937,
          "scale": 18055.954822
         },
         {
          "level": 16,
          "resolution": 2.388657133974685,
          "scale": 9027.977411
         },
         {
          "level": 17,
          "resolution": 1.1943285668550503,
          "scale": 4513.988705
         },
         {
          "level": 18,
          "resolution": 0.5971642835598172,
          "scale": 2256.994353
         },
         {
          "level": 19,
          "resolution": 0.29858214164761665,
          "scale": 1128.497176
         },
         {
          "level": 20,
          "resolution": 0.1492910708238083,
          "scale": 564.248588
         },
         {
          "level": 21,
          "resolution": 0.0746455354119042,
          "scale": 282.124294
         }
        ];

        map = new Map("mapDiv", {
          center: [6.389, 36.054],
          zoom: 4,
          lods: lods
        });
        createBasemapGallery();

        dijit.byId("radioOne").on("change", function(isChecked){
          if(isChecked){
            dijit.byId("LnkLastPosition").set("label", "LastPosition");
            dijit.byId("LnkTracking").set("label", "Tracking");
          }
        }, true);

        dijit.byId("radioTwo").on("change", function(isChecked){
          if(isChecked){
            dijit.byId("LnkLastPosition").set("label", "الموقف الأخير");
            dijit.byId("LnkTracking").set("label", "التتبع");
          }
        }, true);

        dijit.byId("LnkLastPosition").on("click", LastPosClick);
        dijit.byId("LnkTracking").on("click", LastPosClick);

        function createBasemapGallery() {
          AltareeqEng = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapSer...";
          AltareeqArb = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer";

          //Manually create a list of basemaps to display
          var basemaps = [];

          /*Add the your basemaps is reverse order. We need the Bing basemap loaded first in the BasemapGallery
          we will latter reverse the array so that it lists in the order you want*/
          BingMapsHybrid = new Basemap({
            layers: [new BasemapLayer({
              type: "BingMapsHybrid"
            })],
            id: "bmHybrid",
            title: "BingMaps-Aerial-Labels"
          });
          basemaps.push(BingMapsHybrid);

          BingMapsAerial = new Basemap({
            layers: [new BasemapLayer({
              type: "BingMapsAerial"
            })],
            id: "bmAerial",
            title: "BingMaps-Aerial"
          });
          basemaps.push(BingMapsAerial);

          BingMapsRoad = new Basemap({
            layers: [new BasemapLayer({
              type: "BingMapsRoad"
            })],
            id: "bmRoad",
            title: "BingMaps-Road"
          });
          basemaps.push(BingMapsRoad);

          TareeqARB = new Basemap({
            layers: [new ArcGISDynamicMapServiceLayer(AltareeqArb)],
            id: "TareeqARB",
            title: "Al-Tareeq(AR)"
          });
          basemaps.push(TareeqARB);

          TareeqENG = new Basemap({
            layers: [new ArcGISDynamicMapServiceLayer(AltareeqEng)],
            id: "TareeqENG",
            title: "Al-Tareeq(ENG)"
          });
          basemaps.push(TareeqENG);

          basemapGallery = new BasemapGallery({
            showArcGISBasemaps: false,
            basemaps: basemaps,
            bingMapsKey: "yourbingkey",
            map: map
          });
          basemapGallery.startup();

          graphicsLayer = new GraphicsLayer();
          map.addLayer(graphicsLayer);

          //BasemapGallery.startup isn't needed because we aren't using the default basemap, instead
          //we are going to create a custom user interface to display the basemaps, in this case a menu.
          array.forEach(basemapGallery.basemaps.reverse(), function (basemap) {
            //Add a menu item for each basemap, when the menu items are selected
            dijit.byId("bingMenu").addChild(new MenuItem({
              label: basemap.title,
              onClick: lang.hitch(this, function () {
                this.basemapGallery.select(basemap.id);
              })
            }));
          });
          /*Select that basemap that you want to be initially displayed*/
          basemapGallery.select(TareeqENG.id);
        }

        function LastPosClick() {
          map.infoWindow.hide();
          var colourstyle = "images/sphere-blue-dark-16x16.png"
          var Status = "status";
          var procname = "procname";
          var location = "location";
          var Driver = "Drv";
          var strhotspot = "strhotspot";
          var geomPoint1 = new Point(58.46236, 23.61581);
          var geomPoint2 = new Point(59.46236, 23.61581);
          var geomPoint3 = new Point(60.43362666666, 23.583081666666);
          var symbol = new PictureMarkerSymbol({
            "url": colourstyle,
            "height": 16,
            "width": 16,
            "type": "esriPMS"
          });

          var infoTemplate = new InfoTemplate();
          infoTemplate.content = strhotspot;
          var pointGraphic = new Graphic(geomPoint1, symbol);
          var pointGraphic2 = new Graphic(geomPoint2, symbol);
          var pointGraphic3 = new Graphic(geomPoint3, symbol);
          pointGraphic.setInfoTemplate(infoTemplate);
          pointGraphic2.setInfoTemplate(infoTemplate);
          pointGraphic3.setInfoTemplate(infoTemplate);
          graphicsLayer.add(pointGraphic);
          graphicsLayer.add(pointGraphic2);
          graphicsLayer.add(pointGraphic3);
          setextent();
          var DivesriLogoImage = dom.byId('DivesriLogoImage');
          var mapDiv = dom.byId('mapDiv');
          mapDiv.style.visibility = "visible";
          DivesriLogoImage.style.visibility = "hidden";
        }

        function setextent() {
          var gextent = graphicsUtils.graphicsExtent(graphicsLayer.graphics).expand(1.2);
          map.setExtent(gextent);
        }
      });
  </script>
</head>

<body class="claro">
  <!--style="background-image: url('Images/menubackground.png');"-->
  <form id="form1" >
    <div style="width: 100%; height: 100%">
      <table id="Tablecontrols0" style="font-size: 15px; z-index: 101; background-color: #5B748B; width: 100%; height: 100%;">
        <tr style="font-family: Times New Roman">
          <td style="border-style: none; background-color: #496277; " valign="top" class="auto-style6">
            <input type="radio" data-dojo-type="dijit/form/RadioButton" name="uilanguage" id="radioOne" checked value="English"/><label for="radioOne">English</label><br />
            <input type="radio" data-dojo-type="dijit/form/RadioButton" name="uilanguage" id="radioTwo" value="العربية"/><label for="radioTwo">العربية</label>
          </td>
          <td align="left" style="border-style: none; background-color: #496277; height: 2%;" valign="top" class="auto-style3">
          </td>
        </tr>
        <tr style="font-family: Times New Roman">
          <td style="border-style: none;" valign="top" bgcolor="#496277" class="auto-style7">
            <table id="Tablecontrols" style="border-color: #F2F0EE; font-size: 15px; z-index: 101;
            background-color: #496277; width:auto; height: 274px; font-family: verdana; color: tomato; font-weight: bold; border-top-style: none;" align="left">
              <tr style="font-family: Times New Roman">
                <td rowspan="1" valign="top" height="10px" class="auto-style1">
                </td>
                <td rowspan="1" style="border-style: none;" valign="top" height="10px">
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td rowspan="1" style="font-weight: bold; " valign="top" height="10px" class="auto-style1">
                </td>
                <td rowspan="1" style="border-style: none;" valign="top" height="10px">
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td style="font-weight: bold; " valign="top" height="10" class="auto-style1" colspan="2">
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td style="font-weight: bold; text-align: center; " valign="top" class="auto-style2">
                  <button dojotype="dijit/form/Button" id="LnkLastPosition" style="font-family: Arial; font-size: x-small; font-weight: normal">
                    Last Position</button>
                </td>
                <td style="border-style: none; text-align: center;" valign="top" class="auto-style3">
                  <button dojotype="dijit/form/Button" id="LnkTracking" style="font-family: Arial; font-size: x-small; font-weight: normal">
                    Tracking</button>
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td colspan="2" rowspan="1" style="border-top: 2px solid #547289; border-bottom: 2px solid #547289; font-weight: bold;  position: static;
                    height: 100%; text-align: left; width: 30%; border-left-width: 2px; border-right-width: 2px;" valign="top" align="left">
                  <div id="Something"></div>
                  <div style="width: 300px; height: 356px; overflow: scroll"></div>
                </td>
              </tr>
            </table>
          </td>
          <td style="border-style: none; background-color: white;  width: 100%; height:100%;" valign="top" id="td11">
            <div id="mapDiv"  dojotype="dijit/layout/ContentPane" region="center" style="border:1px solid #000; visibility: visible; height: 100%;">
              <div style="position:absolute; right:50px; top:100px; z-Index:99;">
                <button id="dropdownButton" label="Basemaps" data-dojo-type="dijit/form/DropDownButton">
                  <div data-dojo-type="dijit/Menu" id="bingMenu">
                    <!--The menu items are dynamically created using the basemap gallery layers-->
                  </div>
                </button>
              </div>
            </div>
            <!--<asp:Image  ImageUrl="Images/tareeq Logo1.jpg" ID="esriLogoImage" Height="495px" style="margin-right: 36px" Width="100%" />-->
            <div id="DivesriLogoImage"  style="background-color: #FFFFFF; width: 80%; height:99.8%; visibility: hidden; position: absolute; top: 72px;" align="center">
              <!--<asp:Image  ID="esriLogoImage" ImageAlign="Middle" Height="564px" />-->
            </div>
          </td>
        </tr>
      </table>
    </div>
  </form>
</body>

</html>

[JulieBiju]

Dear Robert,

Yes it is working perfecttttt...

No words to express my gratitude for ur kindness…… Thank a loootttt

If u don’t mind Shall I ask , Is it possible to add google-map also in this list????

[RobertScheitlin__GISP]

Julie,

   I will not be able to help with that as I believe that it is a violation of the Google Terms of Service.

[JulieBiju]

Robert,

Ok. Fine....

I am modifying my module as per ur gr8 suggestions. Thank u so much.