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:
- openlayer_display_markers URL: https://www.github.com/niebert/openlayer_display_markers
- Similar repository to Markers4Map for placing markers/icons with generic information in a popup infobox and an URL for the marked geolocation.
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.
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 to handle large arrays is docs/js/editor4json.js
https://github.com/niebert/Mapper4SDG/tree/master/docs
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.
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 inJSCC
. 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 ofJSCC
. Refactoring ofJSCC
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 createdJSCC
files to the local filesystem.JSCC
uses the same mechanism of browsers, that allows aSave 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