Building a web app to display your data can be a daunting task if you aren’t a developer, especially if you aren’t familiar with GIS concepts. At Boundless we’ve been working on ways to help our customers build such web maps, leveraging all of the great capabilities now available with the release of OpenLayers3 (www.openlayers.org) without needing to work from the command line.
One of the mechanisms we’ve developed is via a plugin for QGIS. This plugin allows you to publish a QGIS project as an OpenLayers 3 (“OL3”) web app simply by following some prompts and filling in a few forms. This requires no coding skills, however if you have some “dev chops” it is fully extensible (We’ll look at that in a future blog post).
My goal for this post is to walk you through the steps necessary to go from Project & Data to completed web app, all within QGIS using Boundless’s new Web App Builder plugin. The intent is to demonstrate the simplicity of building an app without needing to resort to code.
To start with you need to install QGIS 2.8.2 for the OpenGeo Suite. This is available (using Windows or Mac OS X 10.9 and higher) to Boundless customers at http://boundlessgeo.com/solutions/solutions-software/qgis/
Once installed the Web App Builder is accessible via the plugins drop down (click to zoom all images).
However before we can create an app we need a QGIS project with the supporting data. In this example we will be using some data from floods in Boulder County, Colorado in 2013 to create a flood event viewer.
I loaded three layers — Total Rainfall, Parcels with Flooding, and Inundated Areas. I also adjusted their symbology for better viewing over a basemap.
Now that we have our QGIS project let’s build an app!
First choose the Plugins menu -> Boundless -> Web App Builder. This will bring up the Web App Builder Dialogue and help us define our application.
This dialogue will help us step through the process of creating our app. We’ll start by titling our app, choosing a logo icon, and selecting a theme. The themes can be adjusted to meet your specific needs using the “Configure theme” button. In this example we are going to use the default values for the basic theme.
Under the Base Layers tab we can choose which base map service we would like to use and also select layers that can be used as overlays. For this app we are going to use the MapQuest aerial as our base layer to help show some of the terrain where the rain event occurred and provide the user with better context than a street map. The overlays provide access to services that include near real time weather, additional labeling, etc. For this example we will use the MapQuest labels overlay service to show city names, major roads, etc. Now let’s define the layers we want to place on top of the basemap.
In the Layers tab we configure the data layers that will be used in our application. By default all the layers we added to our QGIS project, except for basemaps, will show up in the list. In our case we only have a handful of layers — if you had many layers you can search for them using the search bar at the top of the dialogue box. We want to display all of the layers so we will leave them all checked.
Next we need to decide how the data for our app will be stored. Choosing the “Connect to this layer using” drop down we are presented with a number of choices.
The data we have for our flooding event viewer is a small static dataset, so using the file directly makes good sense. If we had a larger dataset or dynamic data we could choose to host it in GeoServer or a PostGIS DB. Those options give us greater customization for our data using the power of GeoServer. In our case the QGIS symbology will be created in the app using OL3 symbology and rendered by the application.
Now that we have defined how we want to connect to the layers we need to decide if we want popups and what content we would like to have presented in the popups. Clicking edit opens the popup editor dialogue. It is initially blank, but clicking ‘Add all attributes’ will populate it with a [field_name] pair for each field in the layer.
In our case we are going to have a popup that shows the Stream Name for the Inundated Areas, no popup for Parcels, and the Total Rainfall layer will have a popup that shows the Min and Max rainfall for that area.
Inundated Areas Popup expression:
StreamName: [StreamName]
Total Rainfall popup expression:
RainfallMin: [RainfallMi]
RainfallMax: [RainfallMa]
Moving onto the widgets tab we see a large number of controls, tools and widgets to choose from. Selecting a widget will add it to the app, while right clicking on a widget will give you configuration options.
There’s obviously a lot here – we’ll save exploring widgets for a later post. For the purposes of this posting we are going to use with the default controls and configure the Layers List to allow the user to change the opacity of the layers.
Let’s add an About Panel widget to the application, and edit the content to let users know more about what they are looking at.
Once we have configured the controls and widgets we move to the Deploy tab. This tab is used to configure the connections to PostGIS and GeoServer. In our case we are not publishing our data into either PostGIS or GeoServer so we can skip this and move to settings.
The settings page gives us the opportunity to define how we want to deal with the Extent, zoom levels, and layer styling. For our application we are going to accept all of the defaults.
We’ve finished configuring our application, now let’s preview the app and see how it looks.
This sample application looks ready to go! If we wanted to make any changes we can step back and change any of the configurations to meet our needs and preview again. Once the application is configured and ready to be published, click Create App. The web app builder will prompt you for a location to save the files, build your application, and ask if you would like to view it.
We have a completed application ready for use, executed with a few clicks of the mouse and filling in some forms. At no point during this process was coding needed.
To find out more about the Web App Builder plugin contact Boundless at*sales@boundlessgeo.com.
The finished 2013 Boulder County Flood Viewer can be viewed at http://wilson.boundlessps.com:8080/BoulderCountyFloods2013/
The post Building an OpenLayers 3 Web App Without Writing Code appeared first on Boundless.
أكثر...
One of the mechanisms we’ve developed is via a plugin for QGIS. This plugin allows you to publish a QGIS project as an OpenLayers 3 (“OL3”) web app simply by following some prompts and filling in a few forms. This requires no coding skills, however if you have some “dev chops” it is fully extensible (We’ll look at that in a future blog post).
My goal for this post is to walk you through the steps necessary to go from Project & Data to completed web app, all within QGIS using Boundless’s new Web App Builder plugin. The intent is to demonstrate the simplicity of building an app without needing to resort to code.
To start with you need to install QGIS 2.8.2 for the OpenGeo Suite. This is available (using Windows or Mac OS X 10.9 and higher) to Boundless customers at http://boundlessgeo.com/solutions/solutions-software/qgis/
Once installed the Web App Builder is accessible via the plugins drop down (click to zoom all images).
However before we can create an app we need a QGIS project with the supporting data. In this example we will be using some data from floods in Boulder County, Colorado in 2013 to create a flood event viewer.I loaded three layers — Total Rainfall, Parcels with Flooding, and Inundated Areas. I also adjusted their symbology for better viewing over a basemap.
Now that we have our QGIS project let’s build an app!First choose the Plugins menu -> Boundless -> Web App Builder. This will bring up the Web App Builder Dialogue and help us define our application.
This dialogue will help us step through the process of creating our app. We’ll start by titling our app, choosing a logo icon, and selecting a theme. The themes can be adjusted to meet your specific needs using the “Configure theme” button. In this example we are going to use the default values for the basic theme.Under the Base Layers tab we can choose which base map service we would like to use and also select layers that can be used as overlays. For this app we are going to use the MapQuest aerial as our base layer to help show some of the terrain where the rain event occurred and provide the user with better context than a street map. The overlays provide access to services that include near real time weather, additional labeling, etc. For this example we will use the MapQuest labels overlay service to show city names, major roads, etc. Now let’s define the layers we want to place on top of the basemap.
In the Layers tab we configure the data layers that will be used in our application. By default all the layers we added to our QGIS project, except for basemaps, will show up in the list. In our case we only have a handful of layers — if you had many layers you can search for them using the search bar at the top of the dialogue box. We want to display all of the layers so we will leave them all checked.
Next we need to decide how the data for our app will be stored. Choosing the “Connect to this layer using” drop down we are presented with a number of choices.
The data we have for our flooding event viewer is a small static dataset, so using the file directly makes good sense. If we had a larger dataset or dynamic data we could choose to host it in GeoServer or a PostGIS DB. Those options give us greater customization for our data using the power of GeoServer. In our case the QGIS symbology will be created in the app using OL3 symbology and rendered by the application.Now that we have defined how we want to connect to the layers we need to decide if we want popups and what content we would like to have presented in the popups. Clicking edit opens the popup editor dialogue. It is initially blank, but clicking ‘Add all attributes’ will populate it with a [field_name] pair for each field in the layer.
In our case we are going to have a popup that shows the Stream Name for the Inundated Areas, no popup for Parcels, and the Total Rainfall layer will have a popup that shows the Min and Max rainfall for that area.Inundated Areas Popup expression:
StreamName: [StreamName]
Total Rainfall popup expression:
RainfallMin: [RainfallMi]
RainfallMax: [RainfallMa]
Moving onto the widgets tab we see a large number of controls, tools and widgets to choose from. Selecting a widget will add it to the app, while right clicking on a widget will give you configuration options.
There’s obviously a lot here – we’ll save exploring widgets for a later post. For the purposes of this posting we are going to use with the default controls and configure the Layers List to allow the user to change the opacity of the layers.
Let’s add an About Panel widget to the application, and edit the content to let users know more about what they are looking at.
Once we have configured the controls and widgets we move to the Deploy tab. This tab is used to configure the connections to PostGIS and GeoServer. In our case we are not publishing our data into either PostGIS or GeoServer so we can skip this and move to settings.
The settings page gives us the opportunity to define how we want to deal with the Extent, zoom levels, and layer styling. For our application we are going to accept all of the defaults.We’ve finished configuring our application, now let’s preview the app and see how it looks.
This sample application looks ready to go! If we wanted to make any changes we can step back and change any of the configurations to meet our needs and preview again. Once the application is configured and ready to be published, click Create App. The web app builder will prompt you for a location to save the files, build your application, and ask if you would like to view it.We have a completed application ready for use, executed with a few clicks of the mouse and filling in some forms. At no point during this process was coding needed.
To find out more about the Web App Builder plugin contact Boundless at*sales@boundlessgeo.com.
The finished 2013 Boulder County Flood Viewer can be viewed at http://wilson.boundlessps.com:8080/BoulderCountyFloods2013/
The post Building an OpenLayers 3 Web App Without Writing Code appeared first on Boundless.
أكثر...