{"id":18053166,"url":"https://github.com/dennisguse/thekarte","last_synced_at":"2025-04-10T19:42:25.334Z","repository":{"id":75766410,"uuid":"141787097","full_name":"dennisguse/TheKarte","owner":"dennisguse","description":"TheKarte: A keyboard-first web map application using OpenLayers.","archived":false,"fork":false,"pushed_at":"2020-09-22T17:20:24.000Z","size":3725,"stargazers_count":5,"open_issues_count":5,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-24T17:21:18.779Z","etag":null,"topics":["geographic-data","keyboard-shortcuts","openlayers","vim"],"latest_commit_sha":null,"homepage":"https://g00se.org/projects/TheKarte/TheKarte.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dennisguse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-07-21T06:24:21.000Z","updated_at":"2023-04-15T06:23:50.000Z","dependencies_parsed_at":"2023-03-13T20:15:26.484Z","dependency_job_id":null,"html_url":"https://github.com/dennisguse/TheKarte","commit_stats":{"total_commits":134,"total_committers":2,"mean_commits":67.0,"dds":0.03731343283582089,"last_synced_commit":"bff7ac630651afc03950a955f08d5c8bf1d0a58a"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dennisguse%2FTheKarte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dennisguse%2FTheKarte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dennisguse%2FTheKarte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dennisguse%2FTheKarte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dennisguse","download_url":"https://codeload.github.com/dennisguse/TheKarte/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248281418,"owners_count":21077423,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["geographic-data","keyboard-shortcuts","openlayers","vim"],"created_at":"2024-10-30T23:16:19.099Z","updated_at":"2025-04-10T19:42:25.315Z","avatar_url":"https://github.com/dennisguse.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"TheKarte\n===\n\n![TheKarte: logo](img/TheKarte-logo.svg)\n\n\n_TheKarte_ is an interactive map application to visualize and to create geographical data.\nIt was designed with two design criteria in mind:\n\n1. It works as a stand-alone application (i.e., keeping data private).\n2. Everything _can be done_ with a keyboard, _is done_ with the keyboard.\n\n_TheKarte_ uses a VI-inspired menu for interacting with the map.\nTherefore, the application does not _contain_ any buttons or other UI components beside the map.\nMoreover, TheKarte is implemented as [single page application](https://en.wikipedia.org/wiki/Single-page_application).\n\n![Screenshot](demo/TheKarte-screenshot.png)\n\n## Functionality\nFunctionality for data handling:\n* draw features (e.g., circles, points and polygons) and delete features,\n* add and delete layers, and\n* select features using other features (e.g., a subset of points within a polygon).\n\nLoading and exporting data:\n* load features from files (via drag and drop),\n* exporting data via local download.\n\nFunctionality for styling:\n* (default) every layer is assigned a distinctive color,\n* use image (one per layer) to represent points (via drag and drop), and\n* clip lower layers (hide background map).\n\nFunctionality to change the view:\n* change the background tile,\n* zoom to the extend of the current layer, and\n* change rendering method if performance is not sufficient.\n\n_Privacy:_ Please note that all geographical data only resides in your web browser (while TheKarte is executed) and nothing is send to any servers.\nFor background maps, see below.\n\n## Getting started\n_TheKarte_ presents a UI consisting of a map, which is presented in full screen.\nAs expected, a user can interact with the map using his mouse or touchscreen for panning and zooming.\n\n### Demos\n* Demonstration of the basic features: [demo/TheKarte-basic.mp4](demo/TheKarte-basic.mp4?raw=true) \n* Demonstration on how to create images: [demo/TheKarte-image.mp4](demo/TheKarte-image.mp4?raw=true)\n\n### Keyboard-based menu\nTo access more advanced functionality the _keyboard-based menu_ needs to be used.\nBy default, the menu is configured for use with the _left hand_ with the fingers resting on _ASDF_.\nThe menu is navigated by pressing the adequate key to navigate lower into sub-folders or execute desired actions (e.g., leafs).\n\nSpecial keys are:\n* __'h'__: (top of the menu only) show the menu structure in an extra window as well as on the browser's _developer console_.\n* __'g'__: (for actions that require a parameter) enter the parameter first and then execute the action. For example, switch to a different layer.\n* __'v'__: navigate the menu upwards (incl. exiting currently executed interaction).\n\nOn example on how to use TheKarte (in brackets are the keys to pressed for the keyboard-based menu):\n1. _Draw points:_\n  1. Press __'a'__ and then __'s'__ to execute _MenuActionFeatureAdd(Point)_.\n  2. Click on desired locations to draw points.\n  3. When you are done: press __'v'__ to stop drawing while remaining in __'a'__ sub-menu.\n2. _Add a new layer:_ press __'a'__ to execute _MenuActionLayerAdd_. This action is immediately executed and thus __'v'__ is not necessary.\n3. _Draw circles:_\n  1. Press __'f'__ to execute _MenuActionFeatureAdd(Circle)_.\n  2. Click on desired locations to draw new circles.\n  3. When you are done: press __'v'__ (twice) to stop drawing and navigating to the _main menu_.\n4. _Export created data as KML:_ press __'w'__, __'a'__ and then __'d'__.\n\nThe keyboard-based menu is defined in _TheKarte.html_.\nPlease adjust to your personal needs (for example, remove unnecessary functionality).\n\n__Hint:__ The browser's _developer console_ shows useful information about the usage of TheKarte.\n\n### Loading and exporting data\nTheKarte loads geographical data via _drag and drop_: just drag files from your local computer onto TheKarte.\n\nThe following _file formats_ are accepted:\n* _Keyhole markup language (KML)_: file suffix __'.kml'__,\n* _GPS exchange format (GPX):_ file suffix __'.gpx'__,\n* _GeoJSON:_ file suffix __'.json'__ or __'.geojson'__.\n* _Well-known text (WKT):_ file suffix __'.wkt'__\n  WKT can also be loaded by _(a)_ dragging it as _text_ and _(b)_ pasting it onto TheKarte.\n\nMoreover, two _tools_ are included for data conversion:\n* _TheKarte-2kml.html_: convert CSV-files and JSON-files to KML as well as KML to CSV.\n* _TheKarte-TheKarte-geocoder-OSM-nominatim.html_: geocodes addresses via [OpenStreetMap's Nominatim](https://nominatim.openstreetmap.org/).\n\n### Background maps\nBy default, some background map services (i.e., [Web Map Service (WMS)](https://en.wikipedia.org/wiki/Web_Map_Service)) are included in TheKarte.\n\n__PRIVACY ISSUE:__ Please be aware that by using such services you _(a)_ download data from them and therefore _(b)_ these can derive, which parts of the world you are looking at (incl. zoom level).\nIf this is an issue, please use your own WMS (e.g., export of OpenStreetMap).\n\n### Screenshots\nTheKarte enables to export the map as PNG image. See action _MenuActionExportPNG_.\nAn exported image has the exact resolution of the map, which is by default identical to the map shown on the screen.\n_Hint:_ The resolution can be increased by zooming out using the brower's zoom feature and respositing the map.\n\n### Configuration\nTheKarte can be easily configured.\nThis mainly considers modifying the settings to your needs or adjusting the keyboard-based menu. \nAll relevant code for this resides in `TheKarte.html`.\nTo create a new configuration, just copy `TheKarte.html`, modify this copy, and open in your web browser.\n\n## Autopilot\nTheKarte features has an autopilot feature (i.e., allowing to load data and interact with it automatically).\nThis scripting feature enables to pre-setup TheKarte if desired.\n\nTo use the autopilot, a URL containing the commands must be provided as [location.search](https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search).\nCommands are separated by the variable separator `\u0026` and are executed in order from left to right.\n\nSupported commands:\n* all __configured__ keyboard-based menu commands (spelling must be identical to configuration)\n* `geoText(dataType, TEXT)`\n* `geoURL(dataType, URL)`\n* `styleImageURL(URL)`\n* `screenshot(filename)`\n\n__ATTENTION__: Please note that the parameters _usually_ need (depending on your browser) to be [URI-encoded](https://en.wikipedia.org/wiki/Query_string#URL_encoding) (e.g. `encodeURI()` for JavaScript).\nFor example, white spaces need to be encoded as `%20` in a URL. This is relevant especially while using [WKT(https://en.wikipedia.org/wiki/Well-known_text) (e.g., `POINT(1 1)` becomes `POINT(1%201)`).\n\nSome autopilot demos:\n* Draw a point for Berlin (Germany) on the first layer, add a second layer and Paris (France).\n  Berlin is shown in blue and Paris in green as they reside on different layers.  \n  URL: `TheKarte.html?geoText(wkt,POINT(13.03367%2052.41362))\u0026a\u0026a\u0026geoText(wkt,POINT(2.3522219%2048.856614))`\n* Loading a KML file (contain points) and render these using the OpenLayers logo.  \n  URL: `TheKarte.html?geoURL(kml,https://openlayers.org/en/latest/examples/data/kml/2012_Earthquakes_Mag5.kml)\u0026styleImageURL(https://openlayers.org/en/latest/examples/resources/logo-70x70.png)`\n* Creates a screenshot and exports it as _TheKarte-screenshot.png_ to the local device (usually the download-folder).  \n  URL:\n  `TheKarte.html?screenshot(TheKarte-screenshot.png)`\n* Load a local KML file (here: `Berlin.kml`).  \n  URL: `file:///home/user/TheKarte/TheKarte?geoURL(kml, file:///home/user/TheKarte/data/Berlin.kml)`\n  __ATTENTION:__ Access to local files and folders (i.e., `file:///`) is __usually__ not permitted from a HTML-page, as this is considered a __security risk__.  \n  * [Firefox](http://firefox.com): If the HTML-page was loaded from `file:///`, then files below this path can accessed. The path needs to be absolute.  \n  * [Chrome/Chromium](https://www.google.com/intl/en_ALL/chrome/): Needs to be started with a command line parameter. Due to security implications this option is omitted here.\n\n## Technical details\nTheKarte is implemented using [OpenLayers](https://openlayers.org/) and pure (aka vanilla) JavaScript.\nAll map-related and geographical data-related features are provided by OpenLayers.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdennisguse%2Fthekarte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdennisguse%2Fthekarte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdennisguse%2Fthekarte/lists"}