In my previous blog posted on June 23rd, I walked through the steps necessary to go from Project & Data to completed web app using Boundless’ new Web App Builder. I encourage you to take a minute to review the initial blog, as there’s some important context. The sample flood data application used a sampling of the most commonly anticipated controls and options that are available, but there’s a lot of functionality I didn’t explore. This post we will explore more of these, including the following that someone desiring greater control might seek to leverage:
-> using different themes
-> augmenting the HTML of an information popup,
-> using bookmarks map control.
I think it’s worth noting that the extensibility of QGIS – for more on this, my colleague Anthony’s recent post is a great place to start – means these are only the start, there is lots more room for additional functionality to be added.
THEMES
To refresh your memory… When we start the Web App Builder, the first tab presented to us is the Description tab. Here we enter an application name, add a logo image, and choose a theme. The Web App Builder currently includes three themes: Basic, Fullscreen, and Tabbed.
Below is the same application created using the three different themes.
Basic
Fullscreen
Tabbed
As you can see from the images the primary difference between the themes is the location of the controls. In the basic theme the tools are placed in the upper right and clicking the tool brings up a new panel. In the tabbed version the tools are the title of the tab and the information (about, chart, etc) is contained inside its respective tab.* To maximize real estate for the map the full screen version places the tools are in a pull-down on the top.* The three themes provide flexibility in the look and feel of your application, deciding on the best fit is up to you.
AUGMENTING THE HTML
Just as important as finding the right theme for your application is formatting the attribute data for features. The configuration dialogue for info popups is accessible from the QGIS Layers tab and is specific to each layer.** The Info popup for the layers uses HTML, which we can use to format the attributes and other popup content.
Let’s start by looking at how we add feature attributes to the popup. While the editor dialogue is initially empty, clicking ‘Add all attributes’ in the Info Popup Editor dialogue will add every attribute to the popup along with the field name, colon, and line break.
Info Popup after clicking Add all Attributes
Resulting Info Popup
However the HTML tags can be used for more than just formating. They can also be used to link to other documents or reports based on information in the attributes. In our sample Flood Data Viewer Application I’ve added a reports sub-folder that has PDFs for each of the parcels using the Parcel ID as the file name.* Using the HTML Link tag we can create a link to the PDF report using the parcel ID.
Owner Name:[OWNER_NAME]
Parcel ID: [PARCELID]
Parcel Report
From the popup a user is presented with a clickable link that takes them to the corresponding PDF report for the parcel.
BOOKMARKS
Located under the controls tab, the Bookmarks control allows us to import bookmarks or a bookmarks layer from QGIS, and with a little configuration can turn our map into a story panel.
Right-clicking on the control opens the configuration dialogue.
There are two tabs for configuring the bookmarks, the first is used to specify which bookmarks to use and the second to define how the bookmarks are presented.
The first step is adding bookmarks, they can be added from QGIS or from a separate layer. In our case the bookmarks are saved with the QGIS project. Once added, we can change the order of the bookmarks by dragging and dropping them in the list, and can add a description to each bookmark.
If we stop here and preview the application we see the bookmarks are presented in a drop down.
Choosing a bookmark will pan and zoom the map to that location.
Selecting “Show as story panel” on the second tab of the bookmarks configuration dialogue changes the bookmark display from a drop down to an inset where the intro title and description are used in the overview inset. Clicking the arrow in the inset advances the map to the next bookmark, while checking “Move automatically with each X seconds” will cycle through the bookmarks automatically.
Overview map
1st bookmark
The screenshots above illustrate the story panel concept, this is useful for making presentations or guiding users through key points of interest. However, for our limited text the story panel is much too large. Let’s take a quick look at how we can adjust it, using the description tab click configure theme.* Here we see the setting that can easily be changed for the components of the web app:
We want to change the pixel values for the height and width inside the “.story-panel”:
Here is the story panel after the change.
As we have seen in this post the Web App Builders’ configuration options provide a lot of flexibility for your application. If you need to make changes beyond the configurations many of the theme components and controls can be customized using CSS or HTML, which again means web developers can support the application without being GIS experts.
Currently the Web App builder is available by contacting Boundless at sales@boundlessgeo.com.* In the near future the Web App Builder will be available to install from the Boundless plugin server, simplifying the install and update process.
The post Building an OpenLayers 3 Web App Without Writing Code – Part II appeared first on Boundless.
أكثر...
-> using different themes
-> augmenting the HTML of an information popup,
-> using bookmarks map control.
I think it’s worth noting that the extensibility of QGIS – for more on this, my colleague Anthony’s recent post is a great place to start – means these are only the start, there is lots more room for additional functionality to be added.
THEMES
To refresh your memory… When we start the Web App Builder, the first tab presented to us is the Description tab. Here we enter an application name, add a logo image, and choose a theme. The Web App Builder currently includes three themes: Basic, Fullscreen, and Tabbed.
Below is the same application created using the three different themes.Basic
Fullscreen
Tabbed
As you can see from the images the primary difference between the themes is the location of the controls. In the basic theme the tools are placed in the upper right and clicking the tool brings up a new panel. In the tabbed version the tools are the title of the tab and the information (about, chart, etc) is contained inside its respective tab.* To maximize real estate for the map the full screen version places the tools are in a pull-down on the top.* The three themes provide flexibility in the look and feel of your application, deciding on the best fit is up to you.AUGMENTING THE HTML
Just as important as finding the right theme for your application is formatting the attribute data for features. The configuration dialogue for info popups is accessible from the QGIS Layers tab and is specific to each layer.** The Info popup for the layers uses HTML, which we can use to format the attributes and other popup content.
Let’s start by looking at how we add feature attributes to the popup. While the editor dialogue is initially empty, clicking ‘Add all attributes’ in the Info Popup Editor dialogue will add every attribute to the popup along with the field name, colon, and line break.
Info Popup after clicking Add all Attributes
Resulting Info Popup
However the HTML tags can be used for more than just formating. They can also be used to link to other documents or reports based on information in the attributes. In our sample Flood Data Viewer Application I’ve added a reports sub-folder that has PDFs for each of the parcels using the Parcel ID as the file name.* Using the HTML Link tag we can create a link to the PDF report using the parcel ID.
Owner Name:[OWNER_NAME]
Parcel ID: [PARCELID]
Parcel Report
From the popup a user is presented with a clickable link that takes them to the corresponding PDF report for the parcel.BOOKMARKS
Located under the controls tab, the Bookmarks control allows us to import bookmarks or a bookmarks layer from QGIS, and with a little configuration can turn our map into a story panel.
Right-clicking on the control opens the configuration dialogue.
There are two tabs for configuring the bookmarks, the first is used to specify which bookmarks to use and the second to define how the bookmarks are presented.The first step is adding bookmarks, they can be added from QGIS or from a separate layer. In our case the bookmarks are saved with the QGIS project. Once added, we can change the order of the bookmarks by dragging and dropping them in the list, and can add a description to each bookmark.
If we stop here and preview the application we see the bookmarks are presented in a drop down.
Choosing a bookmark will pan and zoom the map to that location.
Selecting “Show as story panel” on the second tab of the bookmarks configuration dialogue changes the bookmark display from a drop down to an inset where the intro title and description are used in the overview inset. Clicking the arrow in the inset advances the map to the next bookmark, while checking “Move automatically with each X seconds” will cycle through the bookmarks automatically.
Overview map
1st bookmarkThe screenshots above illustrate the story panel concept, this is useful for making presentations or guiding users through key points of interest. However, for our limited text the story panel is much too large. Let’s take a quick look at how we can adjust it, using the description tab click configure theme.* Here we see the setting that can easily be changed for the components of the web app:
We want to change the pixel values for the height and width inside the “.story-panel”:
Here is the story panel after the change.
As we have seen in this post the Web App Builders’ configuration options provide a lot of flexibility for your application. If you need to make changes beyond the configurations many of the theme components and controls can be customized using CSS or HTML, which again means web developers can support the application without being GIS experts.Currently the Web App builder is available by contacting Boundless at sales@boundlessgeo.com.* In the near future the Web App Builder will be available to install from the Boundless plugin server, simplifying the install and update process.
The post Building an OpenLayers 3 Web App Without Writing Code – Part II appeared first on Boundless.
أكثر...