Giter Club home page Giter Club logo

qwc2-demo-app's Introduction

QGIS Web Client 2 Demo Application

QGIS Web Client 2 (QWC2) is a modular next generation responsive web client for QGIS Server, built with ReactJS and OpenLayers.

This repository contains a sample QWC2 application.

Some examples of QWC2 production deployments:

Screenshot

Main Features

  • Modular and easily configurable and extensible
  • Responsive, separately configurable for desktop and mobile devices
  • Theme switcher
  • Arbitrarily configurable search providers
  • Layer tree
    • Toggle layers and groups
    • Change layer order and opacity
    • Import external WMS/WFS/WMTS/GeoJSON/KML layers
  • Feature info
  • Compare layers
  • Share permalinks
  • Bookmarks
  • Measuring tools
  • Height profile
  • Redlining
  • Editing
  • Attribute table
  • DXF export
  • Raster export
  • Printing
  • Time manager for temporal layers
  • Themeable with color schemes

License

QWC2 is released under the terms of the BSD license.

qwc2-demo-app's People

Contributors

andreasneumann avatar autra avatar benoitblanc avatar dependabot[bot] avatar e-ruiz avatar gwenandres avatar hirtarmin avatar huggla avatar jef-n avatar kant avatar lpinca avatar lucamanga avatar luciman avatar manisandro avatar mbernasocchi avatar mhaelsig avatar missflash avatar mwa avatar pka avatar stamogis avatar stephaschu avatar tudorbarascu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

qwc2-demo-app's Issues

Discussion: should feature highlight with more than one hit highlight all returned geometries?

When a feature info returns one unique result, the concerned feature is immediately highlighted in the map. When more than one hit is returned, no element is highlighted.

It should be discussed whether all hits should be highlighted first, until another feature info request is made or an individual feature is chosen in the feature info result window.

To be discussed at the next coordination meeting.

The "coordinates" search provider doesn't work correctly

I've noticed two problems with the "coordinates" search provider:

  1. It doesn't work with negative values. For example no results are displayed/suggested when typing -3.
  2. It displays three results when typing "30": "3, 0 (EPSG:3857)", "3°E, 0°N" et "0°E, 3°N". Instead it should wait for a separator (coma or space) before making suggestions.

ThemeSwitcher auto width

Hi,
Depending on how many themes are in the theme switcher, it can have unnecessary large width.
As you can see from the following image, the user has to go all over the screen to get to the theme, which is bad, especially on large screens.
I've made a git patch as a quick way of solving this (look at the bottom of the image)
theme_issue

diff --git a/MapStore2 b/MapStore2
--- a/MapStore2
+++ b/MapStore2
@@ -1 +1 @@
-Subproject commit a8f23d91d6536f6db5774f77068aa02f651302bb
+Subproject commit a8f23d91d6536f6db5774f77068aa02f651302bb-dirty
diff --git a/QWC2Components/components/SideBar.jsx b/QWC2Components/components/SideBar.jsx
index bb371a2..c92a514 100644
--- a/QWC2Components/components/SideBar.jsx
+++ b/QWC2Components/components/SideBar.jsx
@@ -57,7 +57,7 @@ const SideBar = React.createClass({
         let visible = this.props.currentTask === this.props.id;
         let style = {
             width: this.props.width,
-            right: visible ? 0 : 'calc(-' + this.props.width + ' - 8px)',
+            right: visible ? 0 : '-100%',
             zIndex: visible ? 5 : 4
         }
         return (
diff --git a/QWC2Components/plugins/ThemeSwitcher.jsx b/QWC2Components/plugins/ThemeSwitcher.jsx
index 7495e59..589424c 100644
--- a/QWC2Components/plugins/ThemeSwitcher.jsx
+++ b/QWC2Components/plugins/ThemeSwitcher.jsx
@@ -176,7 +176,7 @@ const ThemeSwitcher = React.createClass({
             <input className="themeswitcher-filter" type="text" value={this.props.filter} onChange={this.filterChanged} placeholder={LocaleUtils.getMessageById(this.context.messages, "themeswitcher.filter")}/>
         );
         return (
-            <SideBar id="ThemeSwitcher" width="85%" title="appmenu.items.ThemeSwitcher"
+            <SideBar id="ThemeSwitcher" width="auto" title="appmenu.items.ThemeSwitcher"
                 icon={assetsPath + "/img/themes.svg"} extraTitlebarContent={extraTitlebarContent}>
                 {this.renderThemeGroup(this.state.themes)}
             </SideBar>

Feature Info: allow suppressing of emtpy attribute values

QWC 1 had a global option to suppress attribute values if they are empty, so generating lower list in cases where tables contain many empty values.

It should be discussed at the upcoming coordination meeting how we handle this in the future, e.g. a global option with a way to override per project and per layer?

Allow disabling of automatic map following when geolocation is active

When enabling the location button, the map keeps following the current location and pans back to it after panning manually. Also a new map image must be fetched after every location change.

There should be an option to disable the automatic map following while only updating the current location. This would allow independent manual panning and need less frequent map updates.

FeatureInfo window should be resizeable

Often the content of a feature info responsive is wider or taller than what can be displayed in the standard feature info result window.

Therefore it would be good being able to resize this window.

According to Sandro, this is not trivial. The upstream implementation of the MapStore2 component does not support resizing and the window implementation is quite complex. Either it could be fixed upstream or QWC2 would have its own window object.

missing symbols for redlining

trash.svg:1 GET http://localhost:8081/assets/img/trash.svg 404 (Not Found)
pick.svg:1 GET http://localhost:8081/assets/img/pick.svg 404 (Not Found)
point.svg:1 GET http://localhost:8081/assets/img/point.svg 404 (Not Found)
line.svg:1 GET http://localhost:8081/assets/img/line.svg 404 (Not Found)
polygon.svg:1 GET http://localhost:8081/assets/img/polygon.svg 404 (Not Found)

QGIS Server 3 printing

I noticed that the new Layout manager in QGIS Server 3 doesn't yet advertise the layouts, see
https://issues.qgis.org/issues/17747

I tested QWC2 with QGIS Server 3 and the layouts in the old Composer manager work but the GetPrint request bbox must be reversed now according to the axis. Basically, the requests for QGIS 3 are different than for QGIS 2.

It seems that qwc2 will need to have the option to switch between QGIS Servers versions.
Has anyone tested this? Any thoughts?

Show image in feature info

I want to show an image in the feature info window. The only way I've suceded to do it is to create an virtual attribute in the qgis project like this:
'<img src="http://ikarta.kristianstad.se/img/legend/skno/'|| "legend" ||'.PNG" /><a></a>'
the <a></a> is a workaround to pass through the test if(text.indexOf("</a>") !== -1) on line 297 in IdentifyViewer.jsx.
Could it be changed to:
if(text.indexOf("</a>") !== -1 || text.indexOf("<img") !== -1)
or is there another way to show images?

Changing a theme should not change the map extent

In the old QWC a change of theme would retain the current map extent. In QWC2, if one changes the theme, the map extent is changed to the full view of the new theme.

I think the old behaviour of QWC was more intuitive, because often one wants to see the same map extent in different themes.

Print panel: Scale and Resolution widget should be a combobox

It would be more user friendly if the widgets for scale and resolution would be comboboxes.

The scale should have the same values as the combobox in the bottom bar - if possible with the ability to override the scale.

The resolution should be configurable in a global option, perhaps with 96, 150, 300 (default), 600 as built-in default values.

Running demo on Debian errors?

Trying the dummy startup here on a fresh Debian testing box.
Installed yarn, and try to start, I get the following output.
As a green node/nodejs person, I do not know how to proceed.
Any hints?

richard@west/tmp/qwc2-demo-app (stable)$ yarn start
yarn start v0.18.1
$ npm run themesconfig && webpack-dev-server --progress --colors --port 8081

[email protected] themesconfig /tmp/qwc2-demo-app
node themesConfig.js

/tmp/qwc2-demo-app/themesConfig.js:42
let bboxw = extent[2] - extent[0];
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:974:3

npm ERR! [email protected] themesconfig: node themesConfig.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] themesconfig script.
npm ERR! This is most likely a problem with the QWC2App package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node themesConfig.js
npm ERR! You can get their info via:
npm ERR! npm owner ls QWC2App
npm ERR! There is likely additional logging output above.
npm ERR! System Linux 4.8.0-2-amd64
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "run" "themesconfig"
npm ERR! cwd /tmp/qwc2-demo-app
npm ERR! node -v v4.6.1
npm ERR! npm -v 1.4.21
npm ERR! code ELIFECYCLE
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian

npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /tmp/qwc2-demo-app/npm-debug.log
npm ERR! not ok code 0
error Command failed with exit code 1.

map parameter not working in theme url

Normally when having several .qgs files in one directory and want a wms from one of those you add the map=project.qgs parameter to the url. But if you, in themesConfig.json, give an url with the map parameter the theme ends up broken in qwc2.

Feature Info links

Links in feature info window not clickable. Right click and open link in new tab works.

"No theme selected" message problem

Hi, when first loading a map, if the user goes to a bigger scale, e.g. 1:1000 and presses the Print button, the No theme selected message appears.

Only after the user collapses the Print box and repress the button the Print layout selection appears.

Moreover, after it appears, the default Print scale is at the smallest value, e.g. 1:1000000.
I think it should have been as close to the map scale as possible.

Is there something I'm missing?

coco

Print request: needs to send GRID_INTERVAL parameters

QGIS server has a GRID_INTERVAL_X, GRID_INTERVAL_Y parameter that needs to be sent along with the GetPrint Request.

QGIS web client I had a hard coded mapping of scale to GRID_INTERVAL - see https://github.com/qgis/QGIS-Web-Client/blob/master/site/js/QGISExtensions.js#L370

Here the GRID_INTERVAL_X/Y is concatenated in the URL:
https://github.com/qgis/QGIS-Web-Client/blob/master/site/js/QGISExtensions.js#L443

Obviously, this hard-coded way is not very elegant. Perhaps the grid interval could be calculated from the map width/height - or, we could have an associative array in themesConfig.json, where one can specify the interval along with the scales in the setting "defaultScales".

To be discussed.

Support for high-dpi WMS requests

The OpenLayer 3 based ol3mobile viewer from Sourcepole supports high-dpi WMS support for displays with higher-dpi than standard. OpenLayers 3 supports them as well, and so does QGIS server.

QWC2 should also support high-dpi display, e.g. for mobile devices.

See also sourcepole/ol3-mobile-viewer@8837f04
and https://github.com/sourcepole/ol3-mobile-viewer/search?utf8=%E2%9C%93&q=dpi

or ask Matthias ;-)

I'll create a separate ticket for WMTS - as this requires more research and can be treated separately.

Layer tree needs functionality to fold/unfold groups

Some topics (like a cadastral map, or utility map (gaz, water, electricty, etc.)) have a very large layer tree. For such topics, it would be better if the groups are folded by default and a functionality exists to unfold the selected group.

Configurable legend image

I think the ability to customize the legend image would be a good enhancement. And not so tricky. Someting like The layer image is the output of the WMS GetLegendGraphic request.
{
"name": "LayerTree",
"cfg": {
"showLegendIcons": true,
"appendToGetLegendGraphic":"&ICONLABELSPACE=2&LAYERTITLE=FALSE&ITEMFONTSIZE=9&LAYERSPACE=1&SYMBOLSPACE=1"

in the config.json file

Printing: preview doesn't match effective print extent

It seems like the print preview in the web client does not match the effective printing area. It shows a bigger area than the print result in the PDF file.

I assume that the preview shows the area as if the map would not have a header and margins. The GetProjectSettings command delivers the correct frame size:

<ComposerTemplates> <ComposerTemplate width="210" height="297" name="A4-Hoch"> <ComposerMap width="189" height="233.5" name="map0"/> </ComposerTemplate> <ComposerTemplate width="297" height="210" name="A4-Quer"> <ComposerMap width="276" height="147" name="map0"/> </ComposerTemplate> <ComposerTemplate width="297" height="420" name="A3-Hoch"> <ComposerMap width="276" height="356.5" name="map0"/> </ComposerTemplate> <ComposerTemplate width="420" height="297" name="A3-Quer"> <ComposerMap width="399" height="234" name="map0"/> </ComposerTemplate> </ComposerTemplates>

QWC2 has to use the smaller size as defined in the element. It seems like currently it uses the width and height of the element.

Printing panel: label with IDs need to be exposed

The printing panel needs to be enhanced to allow set an alternative text:

If the GetProjectSettings contains one or more "ComposerLabel" elements - see snippet below:

<ComposerTemplate width="210" height="297" name="A4-Hoch">
<ComposerMap width="189" height="233.5" name="map0"/>
<ComposerLabel name="Titel"/>
</ComposerTemplate>

the printing panel nees to have an additional line widget per ComposerLabel element and send the alternative string along with the GetPrint request. See http://blog.sourcepole.ch/2011/02/03/web-based-printing-with-qgis-server/

The line widget should be labelled with the ID of the ComposerLabel element.

WMS Version standardize

Now we have for themes the defaultWMSVersion, for GetFeatureInfo it's uses version 1.1.1, for RasterExport - GetMap is 1.3.0 and for GetPrint it's uses 1.3 (which is not correct and the behavior is from 1.1.1)

I think it will be good if there will be a parameter for each theme and use the same wms version everywhere.

The problem occurs when a projection with reverse axis is used.
Also make a function to check if there is 1.3.0 used for correct the bbox for 'neu' axies projection from requests of RasterExport, GetPrint and GetFeatureInfo

Moreover, shouldn't all the requests to the QGIS Server be 1.3.0?

Print drawing features and delete the feature after reuse the tool

Hi developers
i have installed the new qwc2 -> verry good job;-)
i test the new tool -> drawing.
I wanted to print the drawing. the result was e map without the drawing.
1printoverview
2print

...and after reuse the drawing tool (leave menu, and go in again) the features i created befor, it is not possible to change the color and are not able to delete. I can only change the form and can move it.

regards
tom

Layer title, name and displayField in Feature info

Seems that layer title (entered in the metadata tab in layer properties) is never used in the layer info window. DisplayField is only working with the title and shortname set to same as layername or leaved blank.

yarn run prod gives error

Row 7 in package-commands.sh:
NODE_ENV='production' webpack

Gives the following error:

ERROR in webpack-dev-server.js from UglifyJs Unexpected token: name (urlParts) [webpack-dev-server.js:8349,4]

I'm using latest Node and Yarn on Ubuntu 17.04

Projection choice in status bar should have alias names

In the bottom status bar one can choose a CRS system for the display of the coordinates.

Our average Web-GIS users are not familiar with EPSG codes. For them it would be beneficial if we could display an alias name instead of the EPSG code, e.g.

EPSG:2056 --> CH1903/LV95
EPSG:21781 --> CH1903/LV03
EPSG:4326 --> WGS84
etc.

The combobox would display the Alias names, but internally use the EPSG codes.

package-commands.sh is bash script but is executed with sh

package-commands.sh starts with #!/bin/sh but since the script actually is a bash script I think it would be better if it began with #!/bin/bash. In Ubuntu 16.04 /bin/sh is a symlink to dash and executing package-commands.sh with dash fails with syntax errors.

Allow WMTS only themes

For some themes (like Orthoimage or base maps) it would be useful being able to have a theme without a WMS. These are typically used as the startup theme and would accelerate the speed of the initial topic that is loaded.

We need, however, the ability to specify a WMS printing layer for such WMTS-only layer.

Needs discussion.

Perhaps best solved by enhancing QGIS server to also accept WMS printing layers that could either be external to the project or from an entirely different source.

Launch a new app in development mode

Hi,
I'm trying to create a new app with my own specification, and when i use the command below:
./node_modules/.bin/webpack-dev-server --config qwc2/MapStore2/web/client/examples/myapp/webpack.config.js --progress --colors --port 8081 --content-base web/client/examples/myapp
it shows many errors, i think it may be about some missing files in MapStore2 integrated in qwc2 project, or maybe the code was optimised and it exist another command to run it on the right way.
zeeee

If you have any idea about this issue please tell me as soon as possible.
Thank you.

Atrribute maptip shouldn't be visible if FeatureInfo only contains a maptip

The issue is shown here:
maptip1

A possible solution could be found here:
stephaschu/qwc2@4eae4a9
I'm not sure if this is a clean solution, but it works ;)

diff --git a/QWC2Components/components/IdentifyViewer.jsx b/QWC2Components/components/IdentifyViewer.jsx
index 20c1b7d..3602ecf 100644
--- a/QWC2Components/components/IdentifyViewer.jsx
+++ b/QWC2Components/components/IdentifyViewer.jsx
@@ -178,12 +178,20 @@ const IdentifyViewer = React.createClass({
                         if(this.props.theme.skipEmptyFeatureAttributes && (!feature.properties[attrib] || feature.properties[attrib] === "NULL")) {
                             return null;
                         }
-                        return (
-                            <tr key={attrib}>
-                                <td className="identify-attr-title"><i>{attrib}</i></td>
-                                <td className="identify-attr-value" dangerouslySetInnerHTML={{__html: this.addLinkAnchors(feature.properties[attrib])}}></td>
-                            </tr>
-                        );
+                        if(properties.length === 1 && feature.properties["maptip"]) {
+                            return (
+                                <tr key={attrib}>
+                                    <td className="identify-attr-value" dangerouslySetInnerHTML={{__html: this.addLinkAnchors(feature.properties[attrib])}}></td>
+                                </tr>
+                            );
+                        } else {
+                            return (
+                                <tr key={attrib}>
+                                    <td className="identify-attr-title"><i>{attrib}</i></td>
+                                    <td className="identify-attr-value" dangerouslySetInnerHTML={{__html: this.addLinkAnchors(feature.properties[attrib])}}></td>
+                                </tr>
+                            );
+                        }
                     })}
                 </tbody></table>
             </div>

GetFeatureInfo requests are not compliant

I am trying to use qwc2-demo-app together with QGIS Server 2.99/master, and WMS GetFeatureInfo queries don't work. The problem is that qwc2-demo-app sends "ill-formed" GetFeatureInfo requests. QGIS Server 2.18 accepted them, but QGIS Server 2.99/master (in its current form) does not accept them.

The issue is tha GetFeatureInfo requests is that the set of layers in query_layers may not be a subset of the set of layers in layers. This is for example a GFI request sent by the qwc2.sourcepole.ch application:

http://qwc2.sourcepole.ch/wms/wolfsburg/qwc2_demo?service=WMS&version=1.1.1&request=GetFeatureInfo&srs=EPSG:3857&info_format=text%2Fxml&x=51&y=51&exceptions=application%2Fjson&id=Wolfsburg1508484111470&layers=Wolfsburg&query_layers=Beschriftung,Abfallwirtschaft,Bushaltestellen,Hilfsorganisationen&height=101&width=101&bbox=1203546.3855321205,6872708.797678056,1208890.968865454,6878053.38101139&feature_count=10&FI_POINT_TOLERANCE=16&FI_LINE_TOLERANCE=8&FI_POLYGON_TOLERANCE=4

In this GFI request layers is

layers=Wolfsburg

while query_layers is

query_layers=Beschriftung,Abfallwirtschaft,Bushaltestellen,Hilfsorganisationen

Although QGIS Server may be changed to be more lenient (while still retaining its OGC conformity), and accept such "ill-formed" requests, I think qwc2-demo-app (or qwc2 or MapStore2) should be fixed to issue "well-formed" requests.

Raster image export needs a DPI parameter

The old QWC1 had a dpi parameter for the export to allow the export of higher-dpi rasters. This is important for printed publications, like reports, etc.

Similar to the image format combobox there should be a second combobox with the dpi choice, taken from the defaultPrintResolutions parameter.

wms 1.3.0 modify bbox/extent for print, raster export, dxf export, get feature info if projection hasneu axis orientation

a function should be created to check if the wms version = 1.3.0 and projection axis orientation = 'neu' for change the bbox for requests.
openlayers 4.6.0 has getAxisOrientation()

Now there is a check in RasterExport just for EPSG:4326
https://github.com/qgis/qwc2/blob/fa78ca97223f9e2d84f78d2824f9b20ae67b9ed4/QWC2Components/plugins/RasterExport.jsx#L143
which was good when there was wms version hardcoded to 1.3.0, but now if the theme defaultWMSVersion is 1.1.1 the extent should not be invert

vector style

@manisandro Is there any possibility to set/change the style for search result features stile and the identify features, other than changing in qwc2/MapStore2/web/client/components/map/openlayers/plugins/VectorLayer.js

Thank you!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.