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

reed-tom avatar iquitwow avatar meaghanlee avatar dependabot[bot] avatar ghudolin avatar oren-ned avatar

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.