Giter Club home page Giter Club logo

tnocs / csweb Goto Github PK

View Code? Open in Web Editor NEW
28.0 13.0 18.0 108.37 MB

csWeb, short for common sense Web, is a userfriendly web application for showing (GIS) data on a map. It allows you to apply multiple filters to filter your data, and to style it, so you can immediately see what's important.

Home Page: http://tnocs.github.io/csWeb/

License: MIT License

TypeScript 78.61% HTML 8.61% CSS 3.82% JavaScript 8.94% Batchfile 0.01% Dockerfile 0.02%

csweb's Introduction

Codacy Badge Build Status Stories in Ready bitHound Score Coverage Status

README

csWeb, or the Common Sense Web application, is an intuitive open source web-based GIS application, providing casual users as well as business analysists and information manageners with a powerful tool to perform spatial analysis. It has a strong focus on usability and connectivity, be it connecting and sharing information with other users or connecting to services or calculation simulations and models. LIVE DEMO

Features

  • Basic map interactions (zooming, geo-locating, selecting different base layers)
  • Displaying geojson files
  • Specifying how properties must be displayed (formatting, title, tooltips, etc.)
  • Filtering on one or more properties
  • Coloring icons and regions based on one or more properties
  • Displaying data in a table, and allowing the users to download it
  • Searching for a feature

Technical overview

Technically, we use the following frameworks:

  • Typescript for coding the application
  • Angularjs as the MVC framework
  • Bootstrap 3 (and fontawesome) for the CSS design style
  • Leaflet for the 2D map layer, and Cesium for the 3D maps
  • d3, dc, crossfilter for filtering and styling

How do I get set up?

The application is written in Typescript, which compiles to regular JavaScript, and further uses Angularjs as the framework, Leaflet and Cesium for rendering maps, d3 and others. A detailed guide is provided here, a concise installation checklist here.

This repository consists of several project folders. The most important ones are csComp, a library containing client side functionality, and csServerComp, for server side components. Both libraries generate a JavaScript file that can be used by the actual map application which you can find in the example folder.

Deployment instructions

Just copy the example folder to a public folder and open the public\index.html file in that folder.

Using Docker containers

There are two types of docker containers built for CommonSense:

tnocs/csWeb-demo

This container runs whole csWeb application. To run it and access csWeb in the web browser at <port> run:

# replace <port> with the port number you want to access csWeb at
docker run -d -p 3002:<port> tnocs/csWeb-demo

If your're using docker running in your system (Linux), application should be avaiilable at localhost, otherwise when using docker-machine, you can ask about ip address with docker-machine ip default (in case your vm with docker is named default).

tnocs/csWeb-dev

This container is meant to run csWeb build in the docker container istread of local machine. csWeb local repository will be mounted inside the container and the build process will happen inside the container. This is usefull in at least two cases.

  • to check if you understand all dependencies of your build process since only dependencies specified in the Dockerfile will be installed
  • to avoid installing dependencies on local machin

Run container from within csWeb directory:

docker run -it --rm -p 3002:<port> -v $PWD:/app/ tno/csWeb-dev /bin/bash

Contribution guidelines

  • Writing tests
  • Code review
  • Other guidelines

Testing

karma start test/karma.conf.js

Who do I talk to?

  • Repo owner or admin

csweb's People

Contributors

arjanvanderleden avatar blootsvoets avatar bpmweel avatar c-martinez avatar codacy-badger avatar cornelissenja avatar damylen avatar driver-deploy-2 avatar erikvullings avatar fourdsoftware avatar jeffluppes avatar lukasdeboer avatar maartenvm avatar mkuzak avatar naisunev avatar rinzeb avatar waffle-iron 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

Watchers

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

csweb's Issues

3D view not working

Lots of files are missing, cannot switch back to 2D (layer isn't loaded anymore).

Working with multiple projects

The projects.json file already permits multiple references to project.json files. However, only the first one is used. It'd be very useful if we can define multiple project.json file (for different applications or demos).
Apparently, implementation of this only requires a directive, plus a description in the wiki.

Expert mode: update user interface

Currently, we can select the expert mode using a star rating. However, users might confuse this rating with a rating of the site. Replace it with another visual element.

More powerful legends

We need more powerful / versatile legens that can be associated with map layers. E.g. multi color, with user specified ranges per color. (e.g. colors associated with traffic speeds)

Scrolling, e.g. on the Styles tab

When displaying multiple styles (especially if there are legends with many entries), the styling tab can become so full that information drops off at the bottom of the window.
Having a scrolling capability would be helpful in such cases.
See the example below.

image

OfflineSearch

The current search only search loaded layers. In addition, it does not account for typos, and we would like to have a bit of fuzzyness, so Parnasia provides similar results to parnassia.

Guidelines

Are there any customisation guidlines?

reorder layers

enable interactive reordering of layers with corresponding z-index

Filter: support boolean type properties

Instead of showing a histogram, show a checkbox (three states: true, false, true or false), or a multi-select pulldown (as Excel does).

Optionally, include the count (e.g. true count = 300, false count =213, as the histogram does).

Heatmap

Allow a user to select among the loaded features where he likes to live or work: near some, and far away from others.

For example, a user might like to live near train stations and grocery stores, but far away from bars.

socket.io exception

In the console, I see a handshake exception with socket.io.

In addition, we should only load the flight tracker service when required (and when the user has Internet - currently, when using it without Internet, node crashes).

Heatmap cache

Cache the heatmap scores without weights. In case the user changes the weights, only weighted scores need to be recalculated instead of the complete heatmap.

Focus time in the project.json configuration is ignored.

In a project.json file you can add a timeLine section, e.g.

    "timeLine": {
        "start": 1375315200000,
        "end": 1425168000000,
        "range": 34128000000,
        "zoomLevelName": "years",
        "isLive": false
    },

However, when you include the focus time, it is ignored.

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.