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.
Solved! Go to Solution.
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.
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
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,
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.
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.
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?
I would query as in your second option and send the results json to a div in the modal.