organicmaps / organicmaps.github.io

Official Organic Maps website source code. Please contribute your translations!

Organic Maps Website

This static website is built with Zola and Cloudflare Pages.

Development

Download the latest zola (version 0.17.2 at the time of writing) for your operating system and set up the necessary path variable.

Run zola serve for a local preview or zola build to generate static site in the public folder.

Run npm i && npm run format when you want to pretty-format the Markdown and SCSS files.

Upgrade npm dependencies with npm run upgrade, make sure that you have installed npm-check-updates package.

Deployment

Every PR deploys a preview version of the site at unique url.

Every merge into the master branch deploys changes into the production at https://organicmaps.app

Updating News

Run npm run news to automatically download news from our Telegram channel, then create a git commit and push it.

An example of a news post that is related to app updates/releases:

title: "OpenStreetMap login was fixed in Google Play"
date: 2024-03-18T17:45:35+00:00
slug: "openstreetmap-login-was-fixed-in-google-play"
taxonomies:
  news: ["Releases"]

For external links and press releases use this taxonomy:

taxonomies:
  news: ["Press"]

Taxonomy and F.A.Q. architecture

Each MD page in /faq/ has one or more taxonomy defined in header. E.g.:

taxonomies:
  faq: ["app"]

Zola collects all such taxonomies:

File	Taxonomy key	Taxonomy value
map/can-find-position/index.md	faq	Map
map/search-cannot-find-a-place/index.md	faq	Map
editing/map-errors/index.md	faq	Map Editing
app/crash/index.md	faq	App
text-to-speech-android-tts/index.md	faq	Voice Directions
...	...	...

After that Zola gets all values for faq taxonomy: [app, map, editing, tts, ...]. And generates pages:

• For key /faq/ with the list of values (see templates/faq/list.html)
• For each value /faq/app, /faq/map, etc. (including translated /es/faq/aplicacion, /de/faq/karte/) with the list of questions (see templates/faq/single.html)

If you want to add new question then create .md file with header:

title: A full question that is the title of the page
description: More detailed info with necessary keywords for better SEO

taxonomies:
  faq: ["Bookmarks and tracks"]
extra:
  order: 40

Zola will add your question to specific F.A.Q. sub-page.

If you need to translate the FAQ to a new language please add next lines to config.toml:

[languages.XX]
taxonomies = [
  {name = "faq", feed = false},
]
[languages.XX.translations]
faq-menu-title = "{Translation of 'F.A.Q.' to a new language}"

Limitation: F.A.Q. categories (taxonomies) are sorted alphabetically: "app", "bookmarks", "editing", "map", "tts".

Limitation: Each F.A.Q. category has only a name. No description, no icon. Only name 'App', or 'Bookmarks and Tracks', or 'Map Editing', etc.

Contribution

Any good ideas and help with web site improvement are appreciated. And it's always better to discuss any improvement before implementing it to sync with our vision and plans.

Translations

Please help us with translating this web-site in your language. See TRANSLATIONS.md file for detailed instructions.

organicmaps.github.io's Issues

Unable to bookmark locations

Samsung S10e, Android 12, Organic Maps version 2024.03.31-8

I can't bookmark locations.

1. Open Oganic Maps, tap on a location you want to bookmark.
2. Tap the Star icon, then it brings up your lists.
3. Tap the list you want to add the bookmark to.
4. Nothing happens, nothing is added.

edit nevermind ,the star that shows up on the left during a route is not the same as the star for bookmarking. not sure what the star that shows for routing is.

Create Community Page

The new website needs a page for different ways to engage with the community who is working on Organic Maps.

Criteria

• Create a page
• Implement with design (link will be provided when design is complete)
  - Include descriptions and links to: Feature Discussions, Development, Content Contribution, Social Media, News
• Navigation integrates with the other pages
• All design elements and standards of the website apply to this page

website redesign

The site badly needs a redesign, the current one isn't very professional

Weblate spanish translations are locked

Hi. I go to weblate to check if spanish translation are ok, but a message said they are locked.

Add dark mode

Through prefers-color-scheme.

I can contribute but where is CSS?

Turkish translation is not being served

So I'm interested in contributing a Dutch translation of the website and was looking at how this works. I see there's a Turkish translation already, but when I set my browser's preferred language to Turkish, the site is still being served in English. I do get Google.com and the Play Store in Turkish, so I think the fault is not on my end. How does the site decide which language to serve? I'd like to know it's actually working before I put in the effort...

Using Firefox 102.0.1 on Linux, connecting from a... Dutch? IP address.

(I hope we're not deciding the page language based on the client IP; as a VPN user I'm used to websites switching to all kinds of languages, depending on where they think my IP address lives on that particular day.)

Feature Request: Optional Light Mode

Currently, the website has a dark mode theme which is great for reducing eye strain in low light conditions. However, some users may find that a lighter theme is easier to read in bright light conditions. Therefore, it would be beneficial to include an optional light mode feature.

Add mastodon account verification

See https://docs.joinmastodon.org/user/profile/#verification

Update Home/Landing page with new design

The website needs to be updated to reflect a modern look and show the value it provides to users.

Criteria

• Implement the new design (new design will be available in a Figma link)
• Support multiple pages, navigation between them and creation of additional pages in the future.
• All design elements and standards of the website apply to this page

Update TTS FAQ with espeak-ng

Can please someone test it and update our website if it works?

https://github.com/espeak-ng/espeak-ng/releases

Add /faq/ section

A taxonomy should be enabled to enable content categorization not only for faq but also for the news section and other future sections.

Each FAQ question + answer should have a separate markdown page for easier translation.

The root faq section should be an index page that combines all individual faq pages and groups them by the taxonomy (or maybe we need manual subcategories?).

Initial content can be taken from the organicmaps repo in data/faq.html.

An important new section is TTS instructions, there's unfinished #32 about it. For reference:
https://mapsme.zendesk.com/hc/en-us/articles/208628985-How-can-I-check-TTS-settings-on-my-Android-device-

Add slider to scroll through screenshots gallery

Thanks for the link! We need to focus on the mobile experience first, and the desktop one second. Your current demo is not ready for our case yet. Can we check how it's done on some other cool websites and do it in a similar (maybe simpler) way?

1. On mobile, one screenshot should take almost all the screen, and auto-scroll or scroll by tap.
2. For iOS users iOS screenshots are needed, for Android - Android ones (we can do it later, but keep it in mind now).
3. Screenshots may be localized, e.g. French-speaking users may see France on screenshots.
4. On Desktops and tablets, maybe also on mobiles in a landscape, there's plenty of space to show several screenshots depending on the available width.

Originally posted by @biodranik in #145 (comment)

Implement Recent Track (Recent Path) on Android

Overview
Implemented the Recent Track (aka "Recent Path") feature on Android to achieve feature parity with iOS. (This feature was previously available in MAPS.ME but was removed from the Android version due to new Google policies regarding background operations.

 Reference: organicmaps/organicmaps#1807)

Problem Statement

Criteria

• The app remembers the recent travel path for a specified duration and displays it on the map (the recording functionality is already integrated into the core system).

Images to avif, with fallback

For faster loading.

Fallback:

<picture>
  <source srcset='screenshot.avif' type='image/avif'>
  <img src='screenshot.jpg alt='screenshot'>
</picture>

Add to Gentoo repository

@biodranik is desktop version ready for use? How to build it? What are the dependencies?

Google Play, Huawei Appgallery links doesn't work at https://organicmaps.app/support-us/ in desktop browser

<a href="market://details?id=app.organicmaps">Google Play</a>,
<a href="appmarket://details?id=app.organicmaps">Huawei Appgallery</a>

It is handled by mobile browser, but doesn't work on a desktop, maybe add some fallback?

Enable search index

Hi, I propose that this site should enable Zola's search index generation as a first step towards creating a Search feature, which will benefit new features like #175, #179, and #180.

But at the same time, I recommend to standardize how pages' metadata should be organized. For example, by adding tags/taxonomy for news and FAQ sections to improve the UX of a future Search feature.

There should be a redirect when going to `organicmaps.github.io`

IMO, there should be a redirect when going to organicmaps.github.io that should lead to organicmaps.app. I got confused when I went on that page, as I thought that was the original page, but thought there was another page. 😅

Thanks.

Create Support page

The new website needs a page for the support channels that are available for the app.

Criteria

• Create a page
• Have sections for: Self-serve FAQ, GitHub Documents/Wikis, Telegram, Email
• Implement with design (link will be provided when design is complete)
• Navigation integrates with the other pages
• All design elements and standards of the website apply to this page

use a more similar map style

Maybe we could use https://openmaptiles.org/

Complete /faq/ section (Google Seasons of Docs)

Problem

Many users have questions regarding the functionality, features, and usage of the Organic Maps mobile app. Without a comprehensive F.A.Q. section, users may encounter difficulties in understanding and utilizing the app effectively, leading to frustration and reduced user satisfaction.

Scope

The scope of this task involves creating an end-user F.A.Q. section that addresses common questions, concerns, and inquiries related to the Organic Maps mobile app. The F.A.Q. should cover various aspects of the app, including but not limited to installation, navigation, features, settings, troubleshooting, and support.

Success Criteria

1. Comprehensive Coverage: The F.A.Q. should cover a wide range of topics and address common user queries comprehensively.
2. Clarity and Conciseness: Each question and corresponding answer should be clear, concise, and easy to understand for users of all levels of technical proficiency.
3. Accessibility: The F.A.Q. should be easily accessible within the app, preferably through a dedicated section in the app's menu or settings.
4. Updated Information: Ensure that the F.A.Q. reflects the latest version of the Organic Maps app, including any recent updates or changes.
5. User Feedback Integration: Consider incorporating feedback from user testing and previous user inquiries to address common pain points and improve the overall effectiveness of the F.A.Q.

Skills

• Technical Writing: Ability to communicate complex technical concepts in a clear and understandable manner suitable for end-users.
• User Experience (UX) Design: Understanding of user needs and preferences to create an intuitive and user-friendly F.A.Q. layout and navigation.
• Knowledge of Organic Maps: Familiarity with the features, functionalities, and settings of the Organic Maps mobile app to accurately address user inquiries.
• Communication: Ability to collaborate with stakeholders, including developers, designers, and product managers, to gather relevant information and ensure alignment with the app's objectives and user needs.
• Quality Assurance: Thorough testing and validation of the F.A.Q. content to ensure accuracy, completeness, and effectiveness in addressing user queries.

See also

• Existing FAQ in the app
• Initial draft of the F.A.Q. section for Web
• Add App FAQs PR
• Import FAQ from the main repo

Create animated gifs

1. For the gallery, we can show two or more screenshots/animated gifs at the same time on the screen, and allow scrolling them (or scroll automatically). That can be done later separately.
   Originally posted by @biodranik in #145 (comment)

Add Instant View to Telegram

For faster loading.

Order of languages

In the language menu, it seems the language order is on ISO-abbreviation order, not in their names alphabetically (which I think it should be, given it is what appears to website viewers).

Date is not localized

Minor improvement: on News section, the date is not localized. No matter the language, it is displayed in English language and format (February 14, 2023, for example).

Show fees and access tags for POIs

Always needed for parking lots but a lot of other amenities have these tags:
https://wiki.openstreetmap.org/wiki/Key:access
https://wiki.openstreetmap.org/wiki/Key:fee

Create About page

The new website needs a page to describe the philosophy of Organic Maps, history, vision and mission.

Criteria

• Create a page
• Sections for: philosophy of Organic Maps, history, vision and mission
• Implement with design (link will be provided when design is complete)
• Navigation integrates with the other pages
• All design elements and standards of the website apply to this page

Make donation buttons more obvious

Right now the icons at https://github.com/organicmaps/organicmaps.github.io/blob/master/templates/shortcodes/donate_buttons.html look like a bunch of logos and it's not immediately obvious that they're the primary clickable method of donating. At the very least, styling each one to look like a button would be an improvement. Ideally some language would be inserted before and among the buttons to make it just as clear as the bank transfer methods what each logo means.

Localize language names in every language

 install-fdroid = "Telepítse az Organic Maps-et az F-Droidról"
-language = "Magyar"
+language = "Angol"
 name = "Név"
 token = "Token"

People are confused with language = "English" and translate it to the name of English in their language. It would be better to localized language names for every language, i.e. language_en, language_hu, etc.

Integrating https://omaps.app/test.html into web-site

Is it worth it to integrate https://omaps.app/test.html into web-site? The URL is confusing. First, omaps.app is a some internal domain. Second, test.html probably should be api.html. One option I see here is to integrate that test page into website. An alternative option is to push that page into GitHub, like https://github.com/organicmaps/api.
Any thoghts?

Disable unneeded GH pages generation

Links always lead to the english page

When clicking on a link on any non English start page, it redirects to the English sub page.

Needed change could look like this:

- (@/donate/index.md)
+ (./donate)

or like this:

- (@/donate/index.md)
+ (@/donate/index.de.md)

Which way is wanted?
If I got a response, I can do the changes and create an PR

Website translations

Hello,
I've been working on translating the website into spanish, but, as of right now, I've translated all the pages, and I cant access them via /es/<page>, but now, it comes time to make the language be able to be selected, and to make the top-menu work with the different languages (it now works after modifying the template, but it doesn't style the links correctly, I can explain more if needed).
From now, I think that a language selector should be added, either some buttons, or a dropdown, and the top menu to be modified so that it marks the menu item.
How should that be done?
As I have the pages translated, I can either try implementing the above mentioned myself, or to push to a fork the translations, so that they can be added, I don't mind either of them; my idea is to get the site ready, so that anyone who wants can add their language, prepare the menu and a selector so that after translating the files and adding the language to the config file, it all works. I would like to now if the maintainers would want for that to be done, or any help or suggestions I can get, as I've never worked with zola before, but I more or less get my way around as I've worked with jekyll and hugo.

Edit: I've just seen, #15, and if that site is put in production, it would be great for @victorbnl to create a language selector.

Or maybe I'm getting ahead of myself. Anyways, I would like to know if/where I can help with translating or "remodeling" the site.

Thanks

Get it on F-Droid badge is not using the right version

The used badge uses the Deja-Vu font while it should convert this to an object.

Here as the font isn't installed on my system:

Note that the badge supports a translated version:
https://gitlab.com/fdroid/artwork/-/blob/master/badge/README.md

Update the News page

The News page needs to be updated with the new design.

Criteria

Create a page
Implement with design (link will be provided when design is complete)
Navigation integrates with the other pages
All design elements and standards of the website apply to this page

Clarify the Libre license of website contents :)

I'm trying to publish more OrganicMaps screenshots on Wikimedia Commons but I'm not 100% sure about the license of our screenshots. Example:

https://commons.wikimedia.org/wiki/File:Organic-map--screenshot--dark.jpg

Maybe we clarify this license from the official website itself :) At the moment this is "somehow implicit" from the repository that says Apache 2.0 (but maybe that should cover just source code, not contents?).

For example, maybe in the website we can put a small phrase like this one:

<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><span property="dct:title">OrganicMaps</span> is licensed under <a href="http://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-SA 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1"></a></p> 

Or something like that :) I generated that from here:

https://chooser-beta.creativecommons.org/

Thanks for any opinion :)

Paginate news

Now the news section is not paginated and takes a lot of time to load in browsers. It would be great to also make an easily-accessible archive by years and maybe by months.

And to support taxonomy.

Any ideas on improving how it looks like on desktops and mobiles are also welcome!

host copyright.html from /data/

https://organicmaps.app/terms/
https://github.com/organicmaps/organicmaps/blob/master/data/copyright.html

Currently, the copyright page isn't hosted, and directs to the raw HTML file on github. we should properly host & link to it. (some sort of symlink would be good for automatic updates, but idk if it's possible from another repo)

Translation of new website into different languages

We are approaching completion of development for the newly updated website (pre-prod - https://preprod.organicmaps.pages.dev/) and the text content needs to be translated into different languages to make it useful for people around the world.

The new website is intended to provide more information which is easy to consume, and the updated design is to better reflect the features and values. The updated website will also help with improving SEO.

Website Vision, Strategy, Requirements
https://docs.google.com/document/d/1ehdVZTo9WSO-Q3dZGXhfjrrJ-4xEbOmLbPZyFu50OfY/edit?usp=sharing

Designs
https://www.figma.com/file/i4sYqqho8jruMu5sFFmRXd/Website-Redesign-2.0?type=design&node-id=0%3A1&mode=design&t=mEkiEW6npaJRt2s2-1

Create Features Page

The new website needs a page to describe the features of Organic Maps, including summary and details, primary features and smaller secondary features.

Criteria

• Create a page
• Implement with design (link will be provided when design is complete)
• Navigation integrates with the other pages
• All design elements and standards of the website apply to this page

Weblate translations for OM website is broken

@rtsisyk can you please fix weblate merge conflicts to repair it? Users can't contribute translations anymore.

add link preview metadata showing map

Currently we have no metadata:

Add Brotli compression

For faster loading.

Migrate all translations to Weblate

Hello all,

Can we create a branch for Turkish translations, like "i18n-tr"? It would be easier for me & @MetehanOzyurek to push and to create PR.

Best,
Orkut

Update the Donate page

The Donate page needs to be updated, this is very significant as this is needed to run the OM services.

Criteria

• Create a page
• Implement with design (link will be provided when design is complete)
• Navigation integrates with the other pages
• All design elements and standards of the website apply to this page

Add OpenStreetMap and Editing page

As suggested in organicmaps/organicmaps#6173 (comment) it would be good to have a page that describes how to edit OSM data that can't be changed with the OrganicMaps editor.

This is my suggestion for the content:

OpenStreetMap

OpenStreetMap.org (OSM) is a database with map data for the entire world. Similar to Wikipedia the data can be used free of charge and is crowd-sourced by millions of volunteers.
Organic Maps uses the OpenStreetMap.org data to generate beautiful and detailed maps for you.

Found wrong or missing data in the map?

Did you spot a shop that doesn't exist? Or is your favorite restaurant not on the map? No problem, you can easily fix that! All map data used in Organic Maps comes from OpenStreetMap.org (OSM). And, as OSM is crowd-sourced, anyone, including you, can contribute and fix errors or add missing data.

It's best to directly fix the problem yourself as described in the Editing OpenStreetMap section. But if you don't have time for that you can just leave an OSM Note for other contributors.

Editing OpenStreetMap

You want to add something that's missing on the map or want to fix an error? Join the community of volunteers that make OpenStreetMap possible. For beginners, it's best to use the ID Editor. If you don't have a computer with internet at hand, you can also use the basic Editor of Organic Maps that works offline.

ID Editor

ID is an easy-to-use, beginner-friendly editor for OpenStreetMap data. It runs in your browser, so no installation is required. You, however, need a computer, as the program is not optimized for smartphone screens. If you are new to OSM this is the editor to use.

For editing OpenStreetMap with ID follow these steps:

1. Create or log into your account at OpenStreetMap.org
2. Browse to the location you want to edit on OpenStreetMap.org and click Edit
3. Start the Walkthrough and follow the short tutorial that explains the ID Editor
4. Edit the map
5. Upload your changes

That's it, you are now part of the OSM community. Wait for the next Organic Maps update to see the changes in your favorite map app.

What happens with my edits?

Once you press Upload your changes are instantly added to the public OSM database. So be considerate when editing. Your e-mail is not published, but other people will be able to see your OSM user name.

As OSM offers the possibility to discuss changes, you might get questions about your edits from other OSM contributors. You will be notified about this via the e-mail address you used for registering your OSM account. As OSM is a community project that builds on collaboration you should always answer such questions.

Community and Wiki

OpenStreetMap is a community. If you need help you can ask in the OSM Forum or take a look at the OSM Wiki documentation.

Tags - How the OSM datamodel works

The OpenStreetMap database contains Objects like Nodes, Ways, Areas, and Relations that abstract from real-world features. These Objects have Attributes, so-called Tags to further describe them. A Tag is a Key-Value combination.

As this sounds more complicated than it is we will give an example:
A Restaurant is e.g. mapped as a Note or Area with the Tag amenity=restaurant. Further Tags like cousine=* or opening_hours=* can then be used for further details.

Note that the ID editor hides the internal data structure from the users to be more beginner-friendly. But for reading the Wiki documentation heaving a brief overview of the data structure is helpful.
In the ID Editor, you can see the Tags that ID is hiding from you by expanding the Tags section in the Edit feature side panel.

Editing with Organic Maps

Organic Maps is first and foremost a map app. But it also offers a basic editor that you can use to easily add or fix map data on the fly. It only offers limited functionality and you can only add points of interest from a predefined list or edit properties like opening hours or cousine of existing places. Adding or editing roads or moving places to a new location is not possible. Unlike the ID Editor the built-in editor, however, works offline, once you download the map region. Changes are stored and uploaded to OpenStreetMap.org once you reconnect to the internet.

!!! In the Play Store Android version logging in with an OSM account is not possible at the moment (see Issue #7000) (31.01.2024) !!!

To edit OpenStreetMap directly from your Organic Maps app follow these steps:

1. Create an account at OpenStreetMap.org if you don't already have one
2. Log into your account in Organic Maps (burger icon -> settings -> OpenStreetMap-Profile)
3. Now you can either edit existing places or add new ones
   • Edit existing place by taping on the icon and selecting edit place
     • Add additional information
     • Save your changes and exit using the check arrow
   • Add a place to the map
     • burger icon -> Add a place to the OpenStreetMap
     • Select the location as accurately as you can and press the check arrow
     • Select a category

       Can't find a category that fits? Then create an OSM Note.

     • Add additional information like the name, opening hours, and website
     • Save your changes and exit using the check arrow

Editing with Organic Maps is limited. If you can't edit something with the app you can use the ID Editor instead, or open an OSM Note at OpenStreetMap.org.

OSM Notes - I don't have time for editing

If you don't have time or the problem is too complicated for editing the OSM data yourself OSM Notes (Wiki) are the way to go. You can place such a note in the location of the map error and describe the problem in detail. Other OSM volunteers can then help and solve the issue. You will get e-mail notifications via your OSM account in case they have further questions or the OSM Note is solved.

1. Create or log into your account at OpenStreetMap.org

   You can also open anonymous Notes, but this is not recomended as you won't get notified when the issue is solved or there are further questions.

2. Zoom to the map location on OpenStreetMap.org and press Add a note to the map (second icon from the bottom on the right menue). Then drag the blue map marker to the exact location.

   Try to be as precice as you can

3. Provide a detailed description of the map problem and press Add Note

   For shops e.g. provide the name and mention what is sold there or what services are offered