nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Button in infoWindow

CliveSwan

Hi,

Is it possible to create a button in the infoWindow to launch a new window/web page??

Thanks,

Clive

Vind meer berichten getagd met

Accepted answers

All comments

HemingZhu

Hi,

Is it possible to create a button in the infoWindow to launch a new window/web page??

Thanks,

Clive

Yes, you could customized infoWindow a lots of way you want. In your case you could write a HTML Markup for a button and attach a onclick handler to open a new web page, and then set your infoWindow content to that html markup. You can read this to get more info: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp/intro_formatinfowindow.htm

CliveSwan

Hi Zhu,

Thanks for the email. I was trying to implment the page you sent.

I am updating code spread over 4 files.

>>>>>>>>>>>>>>>>>>>>
The code in my code is:

            //Set the infoTemplate.
            infoTemplate = new esri.InfoTemplate();
            infoTemplate.title = "${STREET_NAME}";
            infoTemplate.content = "<b>Address: </b>${ADDRESS}<br /><b>PostCode: </b>${POSTCODE}"
            graphic.setInfoTemplate(infoTemplate);
>>>>>>>>>>>>>>>>>>>>>>>>

I tried to put a button and URL into this, no luck. It did not work

CliveSwan

Also tried this, does not work ... error

In webpage
>>>>>>>>>>>>
map.infoWindow.setTitle("Identify Results");
map.infoWindow.setText(<a target='_blank' href=http://en.wikipedia.org/wiki/"+ +">Wikipedia Entry</a>");
map.infoWindow.setContent(tc.domNode);
map.infoWindow.resize(360, 200);
>>>>>>>>>>>>

In infoWindow
>>>>>>>>>>>>
this._closeButton = dojo.create("div", { "class": "close", title: "Close" }, this.domNode);
this._title = dojo.create("div", { "class": "title" }, this.domNode);
this._setText = dojo.create("div", { "class": "text" }, this.domNode);
this._content = dojo.create("div", { "class": "content" }, this.domNode);
>>>>>>>>>>>>

HemingZhu

Also tried this, does not work ... error

In webpage
>>>>>>>>>>>>
map.infoWindow.setTitle("Identify Results");
map.infoWindow.setText(<a target='_blank' href=http://en.wikipedia.org/wiki/"+ +">Wikipedia Entry</a>");
map.infoWindow.setContent(tc.domNode);
map.infoWindow.resize(360, 200);
>>>>>>>>>>>>

In infoWindow
>>>>>>>>>>>>
this._closeButton = dojo.create("div", { "class": "close", title: "Close" }, this.domNode);
this._title = dojo.create("div", { "class": "title" }, this.domNode);
this._setText = dojo.create("div", { "class": "text" }, this.domNode);
this._content = dojo.create("div", { "class": "content" }, this.domNode);
>>>>>>>>>>>>

Should something like this:

infoTemplate.content="<input type='button' value='open newpage' onclick='window.open(...)'/>"

CliveSwan

Hi Zhu,

I added the code you suggested, still getting an error.
I am trying to get a button at the top of the infoWindow.

>>>>>>>>>>>>>
map.infoWindow.setTitle("Identify Results");

map.infoWindow.setText(infoTemplate.content=="<input type='button' value='open newpage' onclick='window.open(http://www.google.co.uk)'/>" );

map.infoWindow.setContent(tc.domNode);
map.infoWindow.resize(360, 200);
>>>>>>>>>>>>>>>>>>>>>>>

HemingZhu

Hi Zhu,

I added the code you suggested, still getting an error.
I am trying to get a button at the top of the infoWindow.

>>>>>>>>>>>>>
map.infoWindow.setTitle("Identify Results");

map.infoWindow.setText(infoTemplate.content=="<input type='button' value='open newpage' onclick='window.open(http://www.google.co.uk)'/>" );

map.infoWindow.setContent(tc.domNode);
map.infoWindow.resize(360, 200);
>>>>>>>>>>>>>>>>>>>>>>>

I don't think infoWindow has a setText method. I know it has setContent method.

CliveSwan

Hi Zhu,

I changed the code, still getting the same error "addIdentifyResultsToMap error, details: [object error]"

                map.infoWindow.setTitle("Identify Results");
map.infoWindow.setContent(infoTemplate.content=="<input type='button' value='open newpage' onclick='window.open(http://www.google.co.uk)'/>");
                map.infoWindow.setContent(tc.domNode);
                map.infoWindow.resize(360, 200);

CliveSwan

I have commented out the external infoWindow.js.
I have added in the code from the ESRI example (below).

I still get the external infoWindow not the default ESRI infoWindow??

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title> Mapping - COLGIS v0.01</title>

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/esri/dijit/css/Popup.css">
    <style>
       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
       .esriScalebar{
         padding: 20px 20px;
       }
       #map{
         padding:0;
       }
       .esriPopup.myTheme .titlePane,
       .dj_ie7 .esriPopup.myTheme .titlePane .title {
         background-color: #899752;
         color: #333333;
         font-weight: bold;
       }
       .esriPopup.myTheme .titlePane {
         border-bottom: 1px solid #121310;
       }
       .esriPopup.myTheme a {
         color: #d6e68a;
       }
       .esriPopup.myTheme .titleButton,
       .esriPopup.myTheme .pointer,
       .esriPopup.myTheme .outerPointer,
       .esriPopup.myTheme .esriViewPopup .gallery .mediaHandle,
       .esriPopup.myTheme .esriViewPopup .gallery .mediaIcon {
           background-image: url(../images/popup.png);
       }
       .esriPopup.myTheme .contentPane,
       .esriPopup.myTheme .actionsPane {
         border-color: 1px solid #121310;
         background-color: #424242;
         color:#ffffff;
      }

</style>

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dojox/grid/resources/claro.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7"></script>
<script type="text/javascript" src="javascript/jquery-1.5.2.min.js"></script>
// <script type="text/javascript" src="myModules/infoWindow.js"></script>
// <link rel="stylesheet" type="text/css" href="myModules/infoWindow.css">
<link rel="stylesheet" type="text/css" href="myModules/colgis.css">
<link rel="stylesheet" type="text/css" href="myModules/BingMapControl.css">
<script type="text/javascript" src="myModules/col_common.js" ></script>
<script type="text/javascript" src="myModules/colgis.js" ></script>
<link href="css/screen.css" media="screen" rel="stylesheet" type="text/css">

</head>

CliveSwan

I have 3 files. Test.html; test.js and infoWindow.js.
If I comment out the infoWindow.js, I get an error.

I added the following code in test.js and infoWindow.js, I still do not get a button added

>>>>>>>>>>>>>>>>>>>>>>>>>>>>
test.js
map.infoWindow.setTitle("Identify Results");

/// ADDED
map.infoWindow.setContent( tc.domNode =="<input type='button' value='open newpage' onclick='window.open(http://www.google.co.uk)'/>");
/// ADDED

map.infoWindow.setContent(tc.domNode);
map.infoWindow.resize(360, 200);
>>>>>>>>>>>>>>>>>>>>>>>>>>>>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>
infoWindow.js
dojo.addClass(this.domNode, "myInfoWindow");
    /// ADDED
    this._openButton = dojo.create("div", { "class": "openButton", title:"Open" }, this.domNode);
   /// ADDED

    this._closeButton = dojo.create("div", { "class": "close", title: "Close" }, this.domNode);
    this._title = dojo.create("div", { "class": "title" }, this.domNode);
    this._content = dojo.create("div", { "class": "content" }, this.domNode);
>>>>>>>>>>>>>>>>>>>>>>>>>>>>

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.