Geocortex Web provides you with a powerful viewer framework that includes the ability to add Geocortex Web events. These events are essentially messages that get fired when a change or update occurs in the viewer.
Examples of this could include when the app initializes, changes, or whenever a result is hovered or selected.
There are so many different ways to customize these events, and in this Geocortex Tech Tip, we will show you a few examples of where you can tinker, ranging from simple to more complex real-world examples.
Video Transcript
“Hi everyone. My name’s Patrick Fingler and I work on our Technical Sales team, and in this Tech Tip video, we’re going to take a look at how to configure events inside of Geocortex Web, so you can provide a really intuitive UI to your end-users. Let’s dive in!
So, here we are in Geocortex Web and I’m going to show you how you can configure the events that get fired in Geocortex Web to do a variety of different operations to make the user experience better for your end-users.
What’s interesting about Geocortex Web is when you click on a feature or pan the map, there’s events essentially that are registering that user input, and then they’ll be firing a variety of different commands based on that event.
Here for example when I click on a feature there’s an event that fires, which is the map being clicked and then it’s saying, okay if there are features then let’s display some details or results on those features and what’s super powerful is that these events are entirely configurable through our out-of-the-box commands and through Geocortex Workflow.
Let’s go ahead and let me do an identify operation here and select the ‘Results’ component. Now, a variety of components will actually have this ‘Events’ section here. So, let’s expand this. You can see this results list component, which we’re currently seeing here has a variety of events that are getting fired.
There’s the ‘Result Clicked’ – when I click on this result, there’s an event that gets fired which essentially performs this command. This is a Geocortex Web command, and you can find a list of all of the out of the box commands at the Geocortex Developer Center.
So, here you navigate to Geocortex Web go to ‘API Commands Operations and Events Reference’. There’s a list of commands and their underlying inputs and outputs and so on. There you can see this is just the out of the box command that that gets fired, and you can chain these commands to do a variety of different operations kind of simultaneously.
If I go back here and click on a different result, we’re simply just firing this command. Now if I scroll down, you can see there’s a number of different events. So, there’s ‘Results Shown’ when a result has been added to the results list, and here you can see there’s also this ‘Result Hovering’ event. When I hover over each of these results it’s doing this ‘Pulse Highlight’. Again, I’m not a huge fan of this ‘Pulse Highlight’ that’s available within the 4.x Javascript API. I prefer to have a nice highlight being applied. So let’s change this command – and here these are some default commands that we provide you with, but again you can define a custom command using our list of commands in the API – but here I’m going to ‘Add Focus ‘and I’ll click ‘Select’, and what I’ll also do is there’s this also ‘Result Hovered’ event. This gets fired when a result’s mouse-over ends. I’ll also configure this to remove the focus.
Now that I have both of those configured, let’s hover over some results and you can see here rather than doing that pulse highlighting, it’s being nicely configured to highlight each individual feature. As I hover over it. Now here, you can see I used the out of the box commands here, however, if you go to customize, or the option there was the option to apply a custom command you would essentially be given this option, and then here you can start chaining these commands together.
For example, if we go back up to our ‘Result Clicked’ option, if I add a comma, and hit enter, I can start typing ‘zoom’ for example and I’ll get a list of some of the out of the box command. Here I might want to also zoom to my feature when a result is clicked.
So, now that that’s been implemented, we’ll first display the details and then we’ll also zoom to that feature, and so on if I go back and click on a different feature here, we’ll then zoom to that feature and so on.
There are tons of different events available within Geocortex Web. If I go back, there’s events specific to the result details there’s specific results also that get fired when you’re using the search tool, and you just have to expand them and you can then start customizing and configuring them to match your operations. If we actually navigate to the ‘Map’ here, the map also has different commands available.
If we scroll down, we can expand the ‘Events’ tab and then here there’s events that get fired every time the map is clicked and then you can also configure events every time a viewpoint or the extent has changed and so on, or even when the map is just initialized on startup.
When I click on the map, for example, if I click on this water main here, it’s going to essentially run a series of operations. It’s going to perform and identify and then it’ll display some details and so on. So, there you can see that’s been performed, but what’s really neat is you can also customize this. I could convert this to a workflow. we’ll just call this ‘Tech Tip – Map Identify Clicked’ and click ‘Convert’ and then you have full control of this entire process.
Let’s open this up in Geocortex Workflow. There are activities in Workflow for calling Geocortex commands and operations using the API. Here there’s this ‘Run Operation’ activity and then there’s also commands as well.
If we navigate to ‘Get Inputs’, here we can see the inputs that this workflow is retrieving is going to be the coordinates of the location that the user clicked, and we can confirm this using a log activity. Add a Log and just do ‘$getWorkflowInputs.inputs’ and click ‘Save’.
Let’s go back to Geocortex Web here and you can see now that my workflow is configured. I hit ‘F12’ here and click a point we can see that we’re logging and we’re retrieving the geometry and so on as well as the X and Y coordinates. From there you can do really whatever you want.
A really quick example might be to pan the map to that geometry. So, let’s set our map extent to the geometry that the user selected. I’ll do ‘$getWorkflowinputs.inputs.context.geometry’ and where I’m getting this information from is if we go back to here, you can see here it’s ‘context.geometry’ and that’ll be the geometry again of what the location that the user selected.
We’ll set the map extent to that location, click ‘Save’, and then now when I click on a location, we’re going to pan to that point and so on that’s getting fired every time map is clicked.
I would highly recommend you check this capability out. It’s extremely powerful and if you want to see a real-world example, I’ll just quickly show this is the City of Bellevue it’s an application we put together. It’s a little bit more sophisticated than the example that I showed you.
Here we’ve got some KPI indicators that are being displayed, and here I’ve configured some events every time the map viewpoint changes to then query the extent and then update these KPI charts. So, we’ll just give this a second here.
We can see that’s been updated. If I zoom in or pan the map, it’s going to be updated as well, and so on. So, that’s really neat and again here you can configure different capabilities when you click on our result, hover over a result, and so on.
Have fun with it and I hope you found this Tech Tip valuable. Bye for now!’
Want to learn more about Geocortex Web or see it in action? Click the button below to find out more or to schedule a demo!
Contributors