Skip to content

niebert/Mapper4SDG

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

47 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Mapper4SDG

Mapper4SDG Maps is designed Activities, Projects, Source, Repositories to the UN Sustainable Development Goals SDGs.

Mapper4SDG is an OpenSource tool developed for creating markers/icons with a info popup for the tagged geolocation on a map. The popup contains information about the SDG-related activies at the geolocation marked on map with an icon. Mapper4SDG is generated with OpenLayers and as map source OpenStreetMap was used.

The data for the markers, popups for the geolocation are stored in a JSON file and shared with others. Stored JSON data can be loaded from the WebApp Markers4Map.

The information about the markers/icons/popups is stored in link/url that can be used e.g. Wikiversity for a specific learning resource.

The documentation for Markers4Map is available in Wikiversity-Markers4Map.

The WebApp Markers4Map is a AppLSAC with privacy friendly data management in the browser in mind.

Display of the markers is performend with the following package:

Online Demo

JSON Data

The JSON data has the following structure.

vDataJSON["mapicons"] = [
    {
        "title4map": "London",
        "geolocation": "-0.14467470703124907,51.493889053694915",
        "SDG": [
            "1",
            "3"
        ],
        "url": "https://en.wikipedia.org/wiki/London",
        "date": "3.9.2017, 07:03:16",
        "comment": "London created a Open Innovation Ecosystem for SDG Clean Water and Sanitation"
    },
    {
        "title4map": "Brimingham",
        "geolocation": "-1.81185,51.243141",
        "SDG": [
            "7",
            "3"
        ],
        "url": "https://en.wikipedia.org/wiki/Birmingham",
        "date": "10.10.2017, 12:33:56",
        "comment": "Birmingham created SDG-activities about SDG7 Clean and affordable Energy and SDG3 Health"
    }
]

The init data is defined in docs/db/data.js in a Javascript file, so that the data can be loaded with a default script-tag.

Load and Save data

You can load and save data in the WebApp with the Load and Save. Saving the current work on the local harddrive as JSON file is always recommended because the processing of data is not stored on a server. Data is kept in the browser and is saved in the LocalStorage of the browser (see https://en.wikiversity.org/wiki/AppLSAC)

Main Library for Large Arrays

Main library to handle large arrays is docs/js/editor4json.js https://github.com/niebert/Mapper4SDG/tree/master/docs

UML Diagram of Editor4JSON Class

UML Diagram of JS Class Editor4JSON

JSON to Schema Generator

Used the following tool that creates a JSON schema for a provided JSON file. Used the given JSON file to create the JSON Schema with JSON2schema.html.

Acknowledgement

Special thanks to the following individual developers and teams of OpenSource JavaScript projects:

  • JSON-Editor by Jeremy Dorn. The JSON Editor takes a JSON Schema and uses it to generate an HTML form. The JSON-Editor is partially used to edit JSON file of the Javascript Project in JSCC . The schemes of the JSON subtree are stored in the folder /tpl of the JavascriptClassCreator. The full potential of the JSON-Editor was not used in JSCC . This can be approved in the future. The JSON-Editor of Jeremy Dorn has full support for JSON Schema version 3 and 4 and can integrate with several popular CSS frameworks (bootstrap, foundation, and jQueryUI). This would lead to major code reduction of JSCC . Refactoring of JSCC would make more use of the JSON-Editor features. Check out an interactive demo (demo.html): http://jeremydorn.com/json-editor/
  • Developer Mihai Bazon create UglifyJS, a great tool to handle and parse Javascript Code and minify the Javascript code (see Source Code of UglifyJS).
  • The wrapper for UglifyJS is written Dan Wolff. His UglifyJS-Online example is used to minify/compress the exported Javascript code of generated JS Classes (For Online Example of the UglifyJS-Wrapper see source code on https://github.com/Skalman/UglifyJS-online for the Online-Version of the Wrapper.
  • Developers of ACE Code Editor https://ace.c9.io (Javascript Editing uses the Editor in iFrames)
  • FileSaver.js Developer Eli Grey provided the FileSaver.js that is used to store created JSCC files to the local filesystem. JSCC uses the same mechanism of browsers, that allows a Save as... in the context menu of a web pages or image. So not uncontrolled write access to your file system is implemented, because users have to select the locations in which the user whats to store the file (e.g. JSON, Javascript or HTML).
  • JointJS JointJS is a JavaScript diagramming library. It can be used to create either static diagrams. JointJS is used in this project to create UML-diagrams, that are interactive diagramming in conjunction and application builder in Javascript.
  • Inheritage for JavaScript with protoypes by Gavin Kistner
  • 3 ways to define a JavaScript class by Stoyan Stefanov
  • JQuery is used for the theme and standard operations in the Document Object Model (DOM) of HTML-pages. The JQuery-Themeroller was used to create a JQuery theme for JSCC.
  • FontAwesome by Dave Gandy used for the icons in HTML buttons

About

Mapper4SDG Maps is designed Activities, Projects, Source, Repositories to the UN Sustainable Development Goals SDGs

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages