Coder Social home page Coder Social logo

ashiqmehmood / osm-analytics Goto Github PK

View Code? Open in Web Editor NEW

This project forked from hotosm/osm-analytics

0.0 0.0 0.0 27.44 MB

OSM Analytics lets you interactively analyze how specific OpenStreetMap features are mapped in a specific region.

Home Page: https://www.osm-analytics.org

License: BSD 3-Clause "New" or "Revised" License

HTML 0.59% JavaScript 91.21% CSS 8.10% Shell 0.10%

osm-analytics's Introduction

osm-analytics: data analysis tool frontend

Join the chat at https://gitter.im/hotosm/osm-analytics

OSM-Analytics lets you analyse interactively how specific OpenStreetMap features are mapped in a specific region.

Say, you'd like to know when most of a specific feature type (e.g. buildings) in a specific country or city were added. This tool lets you select the geographical region of interest and shows a graph of the mapping activity in the region. You can even select a specific time interval to get the number of touched features in that period, and the map will highlight the matching features. Alternatively, one can view the distribution of features by their mapper's user experience. The tool also gives a side by side comparison of the map state at different points in time and lets you view which HOT projects may have included the mapping of a region.

Features

  • supported feature types: buildings (any closed osm way with a building tag), roads (any osm way with a highway tag), rivers (any osm way with a waterway tag)
  • graphs of feature recency or mapper experience
  • highlighting of features by custom date range or user experience interval
  • calculated statistics: total number/length of features in selected region and date/experience range, number of contributors
  • shows which hot projects influenced the mapping of the selected region
  • compare map at different points in time
  • data updated daily

Technical Overview & Limitations

See documentation/architecture.md for background information.

Installation and Usage

The frontend is implemented in React/Redux and based on tj/Frontend Boilerplate.

Install dependencies:

$ npm install

Run in development mode:

$ npm start

Generate static build:

$ npm run build

The deploy.sh script can be useful to publish updates on github-pages.

Embedding

This user interface supports a custom UI for embedding on 3rd party websites, using an HTML iframe. It allows generating a time comparison between two points in time for the same region.

Comparison map

The above visualization can be generated using a specific URL structure:

https://osm-analytics.org/#/compare/<region>/<start_year>...<end_year>/<feature_layer>/embed/<theme_name>

  • iframe_base_url (http://osm-analytics.org)
  • region the area of interest the embedded map is shown for. Can be a bounding box (bbox:110.28050,-7.02687,110.48513,-6.94219), an encoded polyline of a polygon (e.g. polygon:ifv%7BDndwkBx%60%40aYwQev%40sHkPuf%40ss%40%7BfA_%40uq%40xdCn%7D%40%5E)), or a hot project id (e.g. hot:4053) or a link to a github gist that contains a polygon.geojson file (e.g. gist:36ea172ef996a44d36a554383d5fb4fa).
  • start_year (2016) represents the start year of an OpenDRI project
  • end_year (now) represents the end year of an OpenDRI project. now can also be provided to compare with latest OSM data
  • feature_layer (buildings) compare buildings, highways or waterways
  • theme_name (default) use the default OSM Analytics visual style, or the opendri theme

The gap detection view can also be used as an embedded map in a very similar way:

https://osm-analytics.org/#/gaps/<region>/buildings-vs-ghs/embed/<theme_name>

The edit recency and user experience views can also be embedded like this:

https://osm-analytics.org/#/show/<region>/<feature_layer>/embed/<theme_name>/recency or https://osm-analytics.org/#/show/<region>/<feature_layer>/embed/<theme_name>/experience

Here, one can optionally supply a time or user experience selection, which triggers highlights respective features or regions on the map that fall into the given time period or user experience range. Just append the respective query parameter to the embed URL: /?timeSelection=<timestamp_from>,<timestamp_to> (timestamps are seconds since epoch) or /?experienceSelection=<experience_from>,<experience_to> (experience values as defined in the respective layer's experience field).

See Also

osm-analytics's People

Contributors

tyrasd avatar nerik avatar tiagojsag avatar vectorsize avatar dependabot[bot] avatar dakotabenjamin avatar dodobas avatar cgiovando avatar david-hotosm avatar matkoniecz avatar robert-ancell avatar gitter-badger avatar willemarcel avatar rrequero 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.