Code Monkey home page Code Monkey logo

simcoecountywebviewer's Introduction

Simcoe County OpenLayers Map Viewer

Live site can be found here

Please visit our release page for stable downloads. Releases

This site has officially went live as a production release on Mar 22nd, 2021.

This app is built using React, OpenLayers and GeoServer. Many components are configurable to point to your own WMS/WFS, XYZ services. Some components use a custom rest api, such as the search and property report.

It's built using a framework to easily create your own tools and themes (instructions below) using the provided templates. Control what layers, tools and themes are loaded using the config at the root of the src folder.

The Table of Contents (layers tab) utilizes groups in GeoServer.

Contributions are welcome. Even if you only clone it and add tools to your own project, please share them back and I'll integrate them if useful.

For a list of projects that support this site please visit our main page. SimcoeCountyGIS

Getting Started

We've built a deployment doc to help setup our solution. Deployment Doc here

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

Node JS

Installing

git clone https://github.com/county-of-simcoe-gis/SimcoeCountyWebViewer.git
cd SimcoeCountyWebViewer
npm install
npm start

*Note: if you are using NPM version 7 or higher you will need to use

npm install --legacy-peer-deps

Deployment

In the project diretory, type npm run build in the terminal. Details can be found with Create React App

To create a new tool

  1. Create new directory for tool in 'src/sidebar/components/tools/yourToolName'
  2. Copy template files into the previous directory from 'src/componentTemplate/ToolComponent.jsx' and 'src/componentTemplate/toolComponent.css
  3. Rename the files to your component name (case sentive)
  4. Add tool to the main config in 'src/config.json'. Copy existing tool text in the config, for an example.

To create a new theme

  1. Create new directory for theme in 'src/sidebar/components/theme/yourThemeName'
  2. Copy template files into the previous directory from 'src/componentTemplate/ThemeComponent.jsx' and 'src/componentTemplate/themeComponent.css
  3. Rename the files to your component name (case sentive)
  4. Add theme to the main config in 'src/config.json'. Copy existing theme text in the config, for an example.

Built With

Authors

Contributors

License

This project is licensed under the MIT License - see the LICENSE.md file for details

simcoecountywebviewer's People

Contributors

coolcanuck avatar dependabot[bot] avatar ghudolin avatar iquitwow avatar meaghanlee avatar oren-ned avatar reed-tom 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

simcoecountywebviewer's Issues

Would it be possible to deploy the webviewer for custom geoservers

I understand that my requirement is outside the purview of this project, but I need set up a webviewer and a GeoServer in a very short time period and I'm looking for plug and play options. Would it be possible to setup this project with a different Geoserver instance in order to display the layers in said server. Any help would be greatly appreciated. Even any suggestions on other open source plug and play options for a WebGIS. Thank You.

(branch rc/1.2.x) Table of Content: List View and Group View are not synchronized for layers created by Add Data

Hi

I noticed that there is an issue with the List view and Group View after adding data by using the Add Data tool.

Suppose I am currently under Group View, and I open up the Add Data tool and then upload an KML file. A layer will be created and will be added to the group that is specified in the Add Data tool. After that, if I switched to List View, the layer that I just added disappear, and I cannot find it in either All Layers or the group that I added this layer. As the following screenshots show (first two images are in Group View, and the last two are in List View):

image
image
image
image

When I switched back to the Group View, the added layer is still in there. The same situation happens when I added a layer in the situation that I am under List View, and the layer is not showing up in Group View. I am thinking that the state of layer changes is not synchronized for these two views

Thanks,

TOC Stuck at the bottom of the list when a layer activated from Search Bar.

Steps to re-create the issue.
1- Load the map (https://opengis.simcoe.ca).
2- Search for School.
3- Click to the School (Popular Layers) – or you can search and click any other layer in a list other than All Layers.
4- Back to Search bar and search School again.
5- This time pick the School (All Layers).
6- Issue: -- TOC Scrolls to the bottom of the All Layers list and for 8-9 second doesn’t let you scroll up using scroll bar or Mouse.

Road Construction Theme bridge and road projects don't zoom to project locations

When a bridge project is clicked from the Road Construction Theme panel, the map zooms to 0,0.
When a road project is clicked from the Road Construction Theme panel, the map does not appear to do anything, and this error is thrown in the console:

Uncaught Error: Unknown Geometry Type react-dom.production.min.js:232
at T (turf.min.js:316)
at Object.le [as centroid] (turf.min.js:1900)
at Object.a.itemClick [as onClick] (ThemeDataList.jsx:75)
at onClick (InfoRow.jsx:37)
at Object. (react-dom.production.min.js:49)
at p (react-dom.production.min.js:69)
at react-dom.production.min.js:73
at C (react-dom.production.min.js:140)
at M (react-dom.production.min.js:168)
at O (react-dom.production.min.js:158)

Arrow Drawing Does Not Print

@Saspect-IO

It seems as though the arrow drawing either doesn't allow exports to print, or when it does, it does not show up. I have tested this with PNG, PDF, and JPG outputs, with Topo/Imagery, with different settings for exports, and with different arrows. In most cases there is a print error, and in very few cases does the map actually export to something, and when it has, the arrow has not been present.

image

All Layer group in Folder TOC is back?

All Layer group in Folder TOC is back. Is this intentionally brought back? If this is still a requirement for County of Simcoe should we make this a configurable item?

image

Right mouse click behavior - while using Draw and Measurement tools

Right moues click is still working while Draw and Measurement tools are in use. Right mouse button opens content menu and also works as left click.

Suggestion: Left click can be configured to cancel the current Drawing Tool action and the RED x can button can be removed from Draw tool bar.

IssueReport1

Identify - for both pop-up and content menu

RC/1.2.x
Issues: With the recent changes.
1 - the popup identify (default left click) cycles all the layers regardless if they are turned on or off.
2 - Identify report (right click and pick from content menu) crashes the app.

Module not found: Can't resolve 'txml/txml'

Hi,

I encountered an issue of Failed to compile when I tried to run the application with npm start. Before running the code, I already ran npm install to install all the dependencies. Below is the versions of Node and NPM that I used.

node: v14.17.4
npm: 6.14.14

and below is the full description of the error:

image

If you also noticed this issue and have no a solution for it. A temporary solution to this problem is to modify the file ./node_modules/geotiff/src/geotiffimage.js by changing the code on the 4-th line from import { parse } from 'txml/txml'; to import { parse } from 'txml/dist/txml';

image

I am also not very sure about whether the problem is caused by the geotiff package or by any other thing. It would be great if the problem can be resolved.

Thanks,

ADD-LAYER FUNCTION

Adding layers to “Pre-Defined Maps (Groups)” from the "All layers" Group

If “Historical”, “Popular” and “Topo Overly” are pre-defined maps then allowing end-user to add layers from “All Layers" group (which is the list of all the available layers) to the pre-defined maps.

This change will allow more flexibility MAP configuration pattern for pre-defined maps while allowing "All Layers" group layers is parsed and created in the background since it will be used a list of all available layers which can be added to the per-configured maps. All Layers may not be needed as a pre-configured map???.

Add layer function can use the “Search Function” which will show only “All Layers” group content and when user clicks to the plus (+) beside the search dorp down this layer will be added to the active Map Configuration (Group).

Additionally an "Add Layer” button can be placed somewhere on the TOC which will get focus to Search drop down and extend it with layers listed when pressed.

"Add to My Maps" not works after identifying a feature from layers added from Services

Hi,

When I open up the application with the link provided on the homepage, I added a layer from the "Services" by using the Add Data tool. The "Add to My Maps" button in the Reports tab is not working after I identifying a feature from that layer, and the app throws the following error. (It was an issue in the rc/1.2.x branch before, but since now the identify is not working for those layers added via Services in rc/1.2.x, I use the link provided on the home page to open the application, and also found this issues)

Uncaught TypeError: Cannot read property 'getType' of null

image

Thanks,

Coordinates Tool

  • Enter or edit map coordinates on hitting enter scrolls to top and does not update marker symbol on map

Uncommented Sidebar object Merge removes the flexibility to configure different maps with no real benefit.

When the Sidebar Object Merge is commented out:

  • if DB config has a Object Configuration it uses only what is included in DB config.
  • if there is Sidebar object Configuration in DB config than it uses tools included in the main config.json to make sure the tools are available for people who test the project and doesn't have an API up and running.
  • Having this logic allows max flexibility when configuring different maps for different requirements.
  • It allows absolute control over which tools will include in each map configuration and their order.
  • Having merge doesn't really provide any real benefit to the process.

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.