Geocortex Web allows developers to build visually stunning applications with a flexible viewer framework. This about amount versatility ensures you have full control over the look and feel of your applications.
In today’s Geocortex Tech tip, we take you through the flexibility of layouts within Geocortex Web and show you how to tailor bookmarks within your mapping applications.
Video Transcript
“Hi, I’m Cam Barnard, I’m a Product Manager here that works on Geocortex software. Specifically, I work on Geocortex Web, and Geocortex Web has some amazing capabilities around layout flexibility. Far different and in excess of what we’ve done in the past, and I’d like to show some of those to you today…so let’s get started!
Let’s dig into flexibility of layouts within Geocortex Web. I’m going to focus this presentation on our ‘Bookmarks’ component. I’m actually going to go ahead and make a couple quick changes here. We are going to call this ‘Map Bookmarks’ and we’re going to give it a different icon, just for interest’s sake. I’m going to go ahead and save this application, so those changes that I’ve made are now parts of this application. We can see the changed logo there. Just for interest’s sake, before we even get started, we are going to go ahead and add a new ‘use it, find it bookmark’ for the ‘Big Blue Bridge.’ I got some functional bookmarks that I can use, all the way down to my ‘Big Blue Bridge,’ and they are a part of this little expander.
Alright I’ll save that, and we are going to go ahead now and download a copy of those configuration files. We are going to get right into configuration today. Don’t be scared, it’ll all be fine! We are going to extract this out, so I now have a folder and I got two files: an ‘apps.json’ as well as a layout ‘.xml’. Once I get those open, we can have a look.
We’ll only look at this ‘.json’ very briefly. Let’s have a look for ‘bookmark.’ What I want you to take away is that, in the ‘app.json’, there is functional behavior. We have an icon specified; that is a ‘book’. We specified a language string. If you ever find yourself in a situation where you are like “Where is the language string?” just do another quick search and you can see there is your language string, which we called ‘Map Bookmarks.’
That’s the functional behavior of ‘bookmarks.’ We are going to spend our time looking at the layout side of this. To start with, you can see here that the ‘bookmarks’ are living inside an expander. On the map, it’s slotted in the ‘bottom-right’ hand corner of the map. That’s really exciting. The first thing we are going to do is pull it out of the expander. For the purposes of this, this is our original, and you can see here I created a new string that is now slotted in the ‘bottom-right’ of the map but I’ve removed all the expander stuff from it. Let’s go ahead and paste that in, over top of what’s currently there. Now it’s no longer in an expander. I save my file and come back to here to zip it up, and now we are going to go ahead and upload it. Let’s upload this.
We are loading new configurations. The very first thing this does, as you can see, is that it come out of the expander – this is still all fully functional. Ok, so that’s kind of exciting, but now let’s get it off the map entirely. So we are going to get it off the map, and we are going to replace this image up here with the ‘bookmarks’ control. How do we go about doing that?
Well, here’s what we are going to do. We’re going to transform it from this, back into an expander, so we can put it somewhere else. Now, the big thing that you have to do here is we need this map model reference because this is no longer in the context of a map, so we have to tell it specifically where to go.
We’ll take this ‘bookmarks’ out. We’ll have a look around. It might take a second to find it, but there’s the toolbar, there’s the image, and we’re going to just go ahead and paste that chunk of layout in there. It looks kind of ugly, but it doesn’t really matter because it’ll still work. We are going to go back through that same procedure again.
I’m going to delete that zip so that you don’t get confused. We’ll re-zip this back up, and we are ready to bring this back in. This is going to move from here and be up there, so let’s go ahead and do that. We no longer have a ‘bookmarks’ control here; we now have it sitting up here. Of course, it is still a functional component.
The last thing I’m going to do is – it might be interesting to put those ‘bookmarks’ over here in a tab, that might look better – but what I’m going to do is I’m actually going to leave it here because the other big idea I want you to walk away with is that: I can have multiple things in my layout referencing the same thing. We are going to pull the expander out. We can see that I got my ‘bookmarks,’ ‘configs,’ and I’m referencing the ‘map model’ because this is nowhere on the map. We’re going to drop this into our set of tabs, so now we have to find the tabs. Often, if I can’t find them, I would just use ‘search,’ but I found them here. We want it right after the legend. Let’s go ahead and paste that in there and go through the same procedure again. Delete the old zip we don’t want anymore and zip this back up. Go ahead and upload it.
Keep in mind, I haven’t removed this one. I left this one intact, but now we added it to our ‘Map Bookmarks’. You can see our new title there. This is still functional. I can go here to the ‘Big Blue Bridge’ but of course this is still functional as well. The idea again is that the functional behavior of the ‘apps.json’ is completely independent of where things live or even how many times they live in your layout.
“This is all cool, Cam,” you say, “but a little bit complicated and I don’t really want to be editing ‘.xml’ files.” So I’m really excited to tell you that a: we agree with you, and b: you’ll start seeing new functionality in designer in our October and then in our December releases to allow you to do this type of layout editing directly within the designer interface. That’s it for today, thanks for watching!
Want to see more of Geocortex Web? Click the button below to learn more or to schedule a personal demonstration.
Contributors