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; } } }

ArcGIS JS API Info Popup

victhomas

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

Najděte více příspěvků označených jako

Accepted answers

Anonymous User

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/

All comments

Anonymous User

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

victhomas

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?

Anonymous User

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/

RobertScheitlin__GISP

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.

victhomas

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,

kenbuja

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

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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