ArcGIS JS API Info Popup

1004
6
Jump to solution
06-06-2019 10:29 PM
victhomas
New Contributor II

Hello all, 

Looking for some help as to where to start. 

I'm looking to make a pop up info window when a user click on a feature(polygon). The style I'm looking for resemble the pop up that Google have when search for Speed Test in Google search and click on the "Run Speed Test" blue button. Once clicked on the "Run Speed Test" a info box pop up with the background shaded gray(please see the attached picture for reference).  Any idea on how to accomplish this kind of pop-up style, preferably in 3.x.  Minus the graphic gauge of course. Thanks in advance.

pop up style

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
KevinMacLeod4
Frequent Contributor

you could make it yourself with a dijit and templates above and CSS. Or...easier, use a stack.   I would recommend jQuery UI or MDBootstrap.

jQuery UI and Bootstrap are the basics.

http://jqueryui.com/dialog/#modal-form

https://getbootstrap.com/docs/4.0/components/modal/

MDBootstrap and jQuery UI extensions for example below, slickify further.

https://mdbootstrap.com/docs/jquery/modals/basic/

https://jquerymodal.com/

View solution in original post

6 Replies
KenBuja
MVP Honored Contributor

There are several samples that show how to add other types of content to your popup. You don't mention if you're using 3.x or 4.x

Info window with chart | ArcGIS API for JavaScript 3.28 

Multiple popup elements | ArcGIS API for JavaScript 4.11 

victhomas
New Contributor II

Sorry, this is for 3.x version of the API, but open to the idea if it can be easily done with 4.x

It looks like I have to look into custom pop up widget? 

I'm looking for that kind of style, where the pop up is prominently display on-top of everything(z-index?) and have background as darkened. Also the rectangle shape, with the square edges(not round/curve edge), is this something CSS would help?  

Thanks,

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Vic,

   In 3.x you just need to display a Dialog dijit once the user has clicked on a feature layers feature using it's on click event.

KevinMacLeod4
Frequent Contributor

you could make it yourself with a dijit and templates above and CSS. Or...easier, use a stack.   I would recommend jQuery UI or MDBootstrap.

jQuery UI and Bootstrap are the basics.

http://jqueryui.com/dialog/#modal-form

https://getbootstrap.com/docs/4.0/components/modal/

MDBootstrap and jQuery UI extensions for example below, slickify further.

https://mdbootstrap.com/docs/jquery/modals/basic/

https://jquerymodal.com/

View solution in original post

victhomas
New Contributor II

thanks Kevin, this looks like something that I'm looking for with https://getbootstrap.com/docs/4.0/components/modal/ 

Do dyou think I should approach this by using the esri/InfoTemplate to instantiate a new object first var template = new InfoTemplate();

Or create a onclick event function with esri/tasks/query and esri/tasks/queryTask inside of it to query for the data/values.

Then find a way to pass those results to the html Modal dialog?

KevinMacLeod4
Frequent Contributor

I would query as in your second option and send the results json to a div in the modal.

0 Kudos