Documentation updates, patches image paths in themes to load remote images from Github
This commit is contained in:
pietervdvn
parent
0abaf5c139
commit
882e2c4aa9
|
|
@ -102,7 +102,7 @@ export default class AllTranslationAssets {
|
|||
getStartedNewAccount: new Translation( {"en":" or <a href='https://www.openstreetmap.org/user/new' target='_blank'>create a new account</a>","nl":" of <a href='https://www.openstreetmap.org/user/new' target='_blank'>maak een nieuwe account aan</a> ","fr":" ou <a href='https://www.openstreetmap.org/user/new' target='_blank'>enregistrez-vous</a>","es":" o <a href='https://www.openstreetmap.org/user/new' target='_blank'>crea una nueva cuenta</a>","ca":" o <a href='https://www.openstreetmap.org/user/new' target='_blank'>crea un nou compte</a>","gl":" ou <a href='https://www.openstreetmap.org/user/new' target='_blank'>crea unha nova conta</a>","de":" oder <a href='https://www.openstreetmap.org/user/new' target='_blank'>ein neues Konto anlegen</a>"} ),
|
||||
noTagsSelected: new Translation( {"en":"No tags selected","es":"No se han seleccionado etiquetas","ca":"No s'han seleccionat etiquetes","gl":"Non se seleccionaron etiquetas","nl":"Geen tags geselecteerd","fr":"Aucune balise sélectionnée","de":"Keine Tags ausgewählt"} ),
|
||||
customThemeIntro: new Translation( {"en":"<h3>Custom themes</h3>These are previously visited user-generated themes.","nl":"<h3>Onofficiële thema's</h3>De onderstaande thema's heb je eerder bezocht en zijn gemaakt door andere OpenStreetMappers.","fr":"<h3>Thèmes personnalisés</h3>Vous avez déjà visité ces thèmes personnalisés.","gl":"<h3>Temas personalizados</h3>Estes son temas xerados por usuarios previamente visitados.","de":"<h3>Kundenspezifische Themen</h3>Dies sind zuvor besuchte benutzergenerierte Themen"} ),
|
||||
aboutMapcomplete: new Translation( {"en":"<h3><b>About MapComplete</b></h3><p>With MapComplete you can enrich OpenStreetMap with information on a <b>single theme.</b> Answer a few questions, and within minutes your contributions will be available around the globe! The <b>theme maintainer</b> defines elements, questions and languages for the theme.</p><h3>Find out more</h3><p>MapComplete always <b>offers the next step</b> to learn more about OpenStreetMap.<ul><li>When embedded in a website, the iframe links to a full-screen MapComplete</li><li>The full-screen version offers information about OpenStreetMap</li><li>Viewing works without login, but editing requires an OSM login.</li><li>If you are not logged in, you are asked to log in</li><li>Once you answered a single question, you can add new points to the map</li><li>After a while, actual OSM-tags are shown, later linking to the wiki</li></ul></p><br/><p>Did you notice <b>an issue</b>? Do you have a <b>feature request</b>? Want to <b>help translate</b>? Head over to <a href='https://github.com/pietervdvn/MapComplete' target='_blank'>the source code</a> or <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>issue tracker.</a> </p><p> Want to see <b>your progress</b>? Follow the edit count on <a href='https://osmcha.org/?filters=%7B%22date__gte%22%3A%5B%7B%22label%22%3A%222021-01-01%22%2C%22value%22%3A%222021-01-01%22%7D%5D%2C%22editor%22%3A%5B%7B%22label%22%3A%22mapcomplete%22%2C%22value%22%3A%22mapcomplete%22%7D%5D%7D' target='_blank' >OsmCha</a>.</p>","nl":"<h3><b>Over MapComplete</b></h3><p>Met MapComplete kun je OpenStreetMap verrijken met informatie over een bepaald thema. Beantwoord enkele vragen, en binnen een paar minuten is jouw bijdrage wereldwijd beschikbaar! De <b>maker van het thema</b> bepaalt de elementen, vragen en taalversies voor het thema.</p><h3>Ontdek meer</h3><p>MapComplete <b>biedt altijd de volgende stap</b> naar meer OpenStreetMap:<ul><li>Indien ingebed in een website linkt het iframe naar de volledige MapComplete</li><li>De volledige versie heeft uitleg over OpenStreetMap</li><li>Bekijken kan altijd, maar wijzigen vereist een OSM-account</li><li>Als je niet aangemeld bent, wordt je gevraagd dit te doen</li><li>Als je minstens één vraag hebt beantwoord, kan je ook elementen toevoegen</li><li>Heb je genoeg changesets, dan verschijnen de OSM-tags, nog later links naar de wiki</li></ul></p><p>Merk je <b>een bug</b> of wil je een <b>extra feature</b>? Wil je <b>helpen vertalen</b>? Bezoek dan de <a href='https://github.com/pietervdvn/MapComplete' target='_blank'>broncode</a> en <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>issue tracker</a>. <p></p>Wil je <b>je vorderingen</b> zien? Volg de edits <a href='https://osmcha.org/?filters=%7B%22date__gte%22%3A%5B%7B%22label%22%3A%222021-01-01%22%2C%22value%22%3A%222021-01-01%22%7D%5D%2C%22editor%22%3A%5B%7B%22label%22%3A%22mapcomplete%22%2C%22value%22%3A%22mapcomplete%22%7D%5D%7D' target='_blank' >op OsmCha</a>.</p>","de":"<h3>Über MapComplete</h3><p>MapComplete ist ein OpenStreetMap-Editor, der jedem helfen soll, auf einfache Weise Informationen zu einem <b>Einzelthema hinzuzufügen.</b></p><p>Nur Merkmale, die für ein einzelnes Thema relevant sind, werden mit einigen vordefinierten Fragen gezeigt, um die Dinge <b>einfach und extrem benutzerfreundlich</b> zu halten.Der Themen-Betreuer kann auch eine Sprache für die Schnittstelle wählen, Elemente deaktivieren oder sogar in eine andere Website ohne jegliches UI-Element einbetten.</p><p>Ein weiterer wichtiger Teil von MapComplete ist jedoch, immer <b>den nächsten Schritt anzubieten</b>um mehr über OpenStreetMap zu erfahren:<ul><li>Ein iframe ohne UI-Elemente verlinkt zu einer Vollbildversion</li><li>Die Vollbildversion bietet Informationen über OpenStreetMap</li><li>Wenn Sie nicht eingeloggt sind, werden Sie gebeten, sich einzuloggen</li><li>Wenn Sie eine einzige Frage beantwortet haben, dürfen Sie Punkte hinzufügen</li><li>An einem bestimmten Punkt erscheinen die tatsächlich hinzugefügten Tags, die später mit dem Wiki verlinkt werden...</li></ul></p><p>Fällt Ihnen ein Problem mit MapComplete auf? Haben Sie einen Feature-Wunsch? Wollen Sie beim Übersetzen helfen? Gehen Sie <a href='https://github.com/pietervdvn/MapComplete' target='_blank'>zum Quellcode</a> oder <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>zur Problemverfolgung</a>.</p>"} ),
|
||||
aboutMapcomplete: new Translation( {"en":"<h3>About MapComplete</h3><p>With MapComplete you can enrich OpenStreetMap with information on a <b>single theme.</b> Answer a few questions, and within minutes your contributions will be available around the globe! The <b>theme maintainer</b> defines elements, questions and languages for the theme.</p><h3>Find out more</h3><p>MapComplete always <b>offers the next step</b> to learn more about OpenStreetMap.<ul><li>When embedded in a website, the iframe links to a full-screen MapComplete</li><li>The full-screen version offers information about OpenStreetMap</li><li>Viewing works without login, but editing requires an OSM login.</li><li>If you are not logged in, you are asked to log in</li><li>Once you answered a single question, you can add new points to the map</li><li>After a while, actual OSM-tags are shown, later linking to the wiki</li></ul></p><br/><p>Did you notice <b>an issue</b>? Do you have a <b>feature request</b>? Want to <b>help translate</b>? Head over to <a href='https://github.com/pietervdvn/MapComplete' target='_blank'>the source code</a> or <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>issue tracker.</a> </p><p> Want to see <b>your progress</b>? Follow the edit count on <a href='https://osmcha.org/?filters=%7B%22date__gte%22%3A%5B%7B%22label%22%3A%222021-01-01%22%2C%22value%22%3A%222021-01-01%22%7D%5D%2C%22editor%22%3A%5B%7B%22label%22%3A%22mapcomplete%22%2C%22value%22%3A%22mapcomplete%22%7D%5D%7D' target='_blank' >OsmCha</a>.</p>","nl":"<h3>Over MapComplete</h3><p>Met MapComplete kun je OpenStreetMap verrijken met informatie over een bepaald thema. Beantwoord enkele vragen, en binnen een paar minuten is jouw bijdrage wereldwijd beschikbaar! De <b>maker van het thema</b> bepaalt de elementen, vragen en taalversies voor het thema.</p><h3>Ontdek meer</h3><p>MapComplete <b>biedt altijd de volgende stap</b> naar meer OpenStreetMap:<ul><li>Indien ingebed in een website linkt het iframe naar de volledige MapComplete</li><li>De volledige versie heeft uitleg over OpenStreetMap</li><li>Bekijken kan altijd, maar wijzigen vereist een OSM-account</li><li>Als je niet aangemeld bent, wordt je gevraagd dit te doen</li><li>Als je minstens één vraag hebt beantwoord, kan je ook elementen toevoegen</li><li>Heb je genoeg changesets, dan verschijnen de OSM-tags, nog later links naar de wiki</li></ul></p><p>Merk je <b>een bug</b> of wil je een <b>extra feature</b>? Wil je <b>helpen vertalen</b>? Bezoek dan de <a href='https://github.com/pietervdvn/MapComplete' target='_blank'>broncode</a> en <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>issue tracker</a>. <p></p>Wil je <b>je vorderingen</b> zien? Volg de edits <a href='https://osmcha.org/?filters=%7B%22date__gte%22%3A%5B%7B%22label%22%3A%222021-01-01%22%2C%22value%22%3A%222021-01-01%22%7D%5D%2C%22editor%22%3A%5B%7B%22label%22%3A%22mapcomplete%22%2C%22value%22%3A%22mapcomplete%22%7D%5D%7D' target='_blank' >op OsmCha</a>.</p>","de":"<h3>Über MapComplete</h3><p>MapComplete ist ein OpenStreetMap-Editor, der jedem helfen soll, auf einfache Weise Informationen zu einem <b>Einzelthema hinzuzufügen.</b></p><p>Nur Merkmale, die für ein einzelnes Thema relevant sind, werden mit einigen vordefinierten Fragen gezeigt, um die Dinge <b>einfach und extrem benutzerfreundlich</b> zu halten.Der Themen-Betreuer kann auch eine Sprache für die Schnittstelle wählen, Elemente deaktivieren oder sogar in eine andere Website ohne jegliches UI-Element einbetten.</p><p>Ein weiterer wichtiger Teil von MapComplete ist jedoch, immer <b>den nächsten Schritt anzubieten</b>um mehr über OpenStreetMap zu erfahren:<ul><li>Ein iframe ohne UI-Elemente verlinkt zu einer Vollbildversion</li><li>Die Vollbildversion bietet Informationen über OpenStreetMap</li><li>Wenn Sie nicht eingeloggt sind, werden Sie gebeten, sich einzuloggen</li><li>Wenn Sie eine einzige Frage beantwortet haben, dürfen Sie Punkte hinzufügen</li><li>An einem bestimmten Punkt erscheinen die tatsächlich hinzugefügten Tags, die später mit dem Wiki verlinkt werden...</li></ul></p><p>Fällt Ihnen ein Problem mit MapComplete auf? Haben Sie einen Feature-Wunsch? Wollen Sie beim Übersetzen helfen? Gehen Sie <a href='https://github.com/pietervdvn/MapComplete' target='_blank'>zum Quellcode</a> oder <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>zur Problemverfolgung</a>.</p>"} ),
|
||||
backgroundMap: new Translation( {"en":"Background map","ca":"Mapa de fons","es":"Mapa de fondo","nl":"Achtergrondkaart","fr":"Carte de fonds","de":"Hintergrundkarte"} ),
|
||||
layerSelection: { zoomInToSeeThisLayer: new Translation( {"en":"Zoom in to see this layer","ca":"Amplia per veure aquesta capa","es":"Amplía para ver esta capa","nl":"Vergroot de kaart om deze laag te zien","fr":"Aggrandissez la carte pour voir cette couche","de":"Vergrößern, um diese Ebene zu sehen"} ),
|
||||
title: new Translation( {"en":"Select layers","nl":"Selecteer lagen"} ),
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export class AllKnownLayouts {
|
|||
public static layoutsList: LayoutConfig[] = AllKnownLayouts.GenerateOrderedList(AllKnownLayouts.allKnownLayouts);
|
||||
|
||||
private static GenerateOrderedList(allKnownLayouts: Map<string, LayoutConfig>): LayoutConfig[] {
|
||||
const keys = ["personal", "cyclofix", "bookcases", "toilets", "aed"]
|
||||
const keys = ["personal", "cyclofix", "hailhydrant", "bookcases", "toilets", "aed"]
|
||||
const list = []
|
||||
for (const key of keys) {
|
||||
list.push(allKnownLayouts.get(key))
|
||||
|
|
|
|||
|
|
@ -456,5 +456,4 @@ export default class LayerConfig {
|
|||
return allIcons;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -40,11 +40,11 @@ export default class LayoutConfig {
|
|||
public readonly enableLayers: boolean;
|
||||
public readonly enableSearch: boolean;
|
||||
public readonly enableGeolocation: boolean;
|
||||
private readonly _official : boolean;
|
||||
public readonly enableBackgroundLayerSelection: boolean;
|
||||
public readonly customCss?: string;
|
||||
private readonly _official: boolean;
|
||||
|
||||
constructor(json: LayoutConfigJson, official=true, context?: string) {
|
||||
constructor(json: LayoutConfigJson, official = true, context?: string) {
|
||||
this._official = official;
|
||||
this.id = json.id;
|
||||
context = (context ?? "") + "." + this.id;
|
||||
|
|
@ -108,7 +108,7 @@ export default class LayoutConfig {
|
|||
}
|
||||
|
||||
// @ts-ignore
|
||||
return new LayerConfig(layer,`${this.id}.layers[${i}]`, official)
|
||||
return new LayerConfig(layer, `${this.id}.layers[${i}]`, official)
|
||||
});
|
||||
|
||||
// ALl the layers are constructed, let them share tags in now!
|
||||
|
|
@ -170,13 +170,13 @@ export default class LayoutConfig {
|
|||
}
|
||||
|
||||
public CustomCodeSnippets(): string[] {
|
||||
if(this._official){
|
||||
if (this._official) {
|
||||
return [];
|
||||
}
|
||||
const msg = "<br/><b>This layout uses <span class='alert'>custom javascript</span>, loaded for the wide internet. The code is printed below, please report suspicious code on the issue tracker of MapComplete:</b><br/>"
|
||||
const custom = [];
|
||||
for (const layer of this.layers) {
|
||||
custom.push(...layer.CustomCodeSnippets().map(code => code+"<br />"))
|
||||
custom.push(...layer.CustomCodeSnippets().map(code => code + "<br />"))
|
||||
}
|
||||
if (custom.length === 0) {
|
||||
return custom;
|
||||
|
|
@ -184,8 +184,8 @@ export default class LayoutConfig {
|
|||
custom.splice(0, 0, msg);
|
||||
return custom;
|
||||
}
|
||||
|
||||
public ExtractImages() : Set<string>{
|
||||
|
||||
public ExtractImages(): Set<string> {
|
||||
const icons = new Set<string>()
|
||||
for (const layer of this.layers) {
|
||||
layer.ExtractImages().forEach(icons.add, icons)
|
||||
|
|
@ -194,4 +194,53 @@ export default class LayoutConfig {
|
|||
icons.add(this.socialImage)
|
||||
return icons
|
||||
}
|
||||
|
||||
/**
|
||||
* Replaces all the relative image-urls with a fixed image url
|
||||
* This is to fix loading from external sources
|
||||
*
|
||||
* It should be passed the location where the original theme file is hosted.
|
||||
*
|
||||
* If no images are rewritten, the same object is returned, otherwise a new copy is returned
|
||||
*/
|
||||
public patchImages(originalURL: string, originalJson: string): LayoutConfig {
|
||||
const allImages = Array.from(this.ExtractImages())
|
||||
const rewriting = new Map<string, string>()
|
||||
|
||||
// Needed for absolute urls: note that it doesn't contain a trailing slash
|
||||
const origin = new URL(originalURL).origin
|
||||
let path = new URL(originalURL).href
|
||||
path = path.substring(0, path.lastIndexOf("/"))
|
||||
for (const image of allImages) {
|
||||
if(image == "" || image == undefined){
|
||||
continue
|
||||
}
|
||||
if (image.startsWith("http://") || image.startsWith("https://")) {
|
||||
continue
|
||||
}
|
||||
if (image.startsWith("/")) {
|
||||
// This is an absolute path
|
||||
rewriting.set(image, origin + image)
|
||||
} else if (image.startsWith("./assets/themes")) {
|
||||
// Legacy workaround
|
||||
rewriting.set(image, path + image.substring(image.lastIndexOf("/")))
|
||||
} else if (image.startsWith("./")) {
|
||||
// This is a relative url
|
||||
rewriting.set(image, path + image.substring(1))
|
||||
} else {
|
||||
// This is a relative URL with only the path
|
||||
rewriting.set(image, path + image)
|
||||
}
|
||||
}
|
||||
if (rewriting.size == 0) {
|
||||
return this;
|
||||
}
|
||||
rewriting.forEach((value, key) => {
|
||||
console.log("Rewriting",key, "==>", value)
|
||||
|
||||
originalJson = originalJson.replace(new RegExp(key, "g"), value)
|
||||
})
|
||||
return new LayoutConfig(JSON.parse(originalJson), false, "Layout rewriting")
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,3 +1,24 @@
|
|||
URL-parameters and URL-hash
|
||||
============================
|
||||
|
||||
This document gives an overview of which URL-parameters can be used to influence MapComplete.
|
||||
|
||||
What is a URL parameter?
|
||||
------------------------
|
||||
|
||||
URL-parameters are extra parts of the URL used to set the state.
|
||||
|
||||
For example, if the url is `https://mapcomplete.osm.be/cyclofix?lat=51.0&lon=4.3&z=5&test=true#node/1234`,
|
||||
the URL-parameters are stated in the part between the `?` and the `#`. There are multiple, all seperated by `&`, namely:
|
||||
|
||||
- The url-parameter `lat` is `51.0` in this instance
|
||||
- The url-parameter `lon` is `4.3` in this instance
|
||||
- The url-parameter `z` is `5` in this instance
|
||||
- The url-parameter `test` is `true` in this instance
|
||||
|
||||
Finally, the URL-hash is the part after the `#`. It is `node/1234` in this case.
|
||||
|
||||
|
||||
custom-css
|
||||
------------
|
||||
If specified, the custom css from the given link will be loaded additionaly
|
||||
|
|
@ -14,6 +35,13 @@ The layout to load into MapComplete
|
|||
userlayout
|
||||
------------
|
||||
|
||||
If not 'false', a custom (non-official) theme is loaded. This custom layout can be done in multiple ways:
|
||||
|
||||
- The hash of the URL contains a base64-encoded .json-file containing the theme definition
|
||||
- The hash of the URL contains a lz-compressed .json-file, as generated by the custom theme generator
|
||||
- The parameter itself is an URL, in which case that URL will be downloaded. It should point to a .json of a theme
|
||||
The default value is _false_
|
||||
|
||||
The default value is _false_
|
||||
|
||||
layer-control-toggle
|
||||
|
|
|
|||
10
README.md
10
README.md
|
|
@ -3,8 +3,8 @@
|
|||
|
||||
> Let a thousand flowers bloom
|
||||
|
||||
|
||||
MapComplete attempts to be a webversion crossover of StreetComplete and MapContrib. It tries to be just as easy to use as StreetComplete, but it allows to focus on one single theme per instance (e.g. nature, bicycle infrastructure, ...)
|
||||
MapComplete is an OpenStreetMap viewer and editor. It shows map features on a certain topic, and allows to see, edit and add new features to the map.
|
||||
It can be seen as a webversion crossover of StreetComplete and MapContrib. It tries to be just as easy to use as StreetComplete, but it allows to focus on one single theme per instance (e.g. nature, bicycle infrastructure, ...)
|
||||
|
||||
The design goals of MapComplete are to be:
|
||||
|
||||
|
|
@ -155,12 +155,10 @@ Geolocation is available on mobile only throught hte device's GPS location (so n
|
|||
TODO: erase cookies of third party websites and API's
|
||||
|
||||
|
||||
# Attribution
|
||||
# Attribution and Copyright
|
||||
|
||||
Data from OpenStreetMap
|
||||
The code is available under GPL; all map data comes from OpenStreetMap (both foreground and background maps).
|
||||
|
||||
Background layer selection: curated by https://github.com/osmlab/editor-layer-index
|
||||
|
||||
Icons are attributed in various 'license_info.json'-files and can be found in the app.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -101,6 +101,7 @@ svg, img {
|
|||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: unset;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
4
index.ts
4
index.ts
|
|
@ -67,7 +67,7 @@ defaultLayout = QueryParameters.GetQueryParameter("layout", defaultLayout, "The
|
|||
let layoutToUse: LayoutConfig = AllKnownLayouts.allKnownLayouts.get(defaultLayout.toLowerCase());
|
||||
|
||||
|
||||
const userLayoutParam = QueryParameters.GetQueryParameter("userlayout", "false");
|
||||
const userLayoutParam = QueryParameters.GetQueryParameter("userlayout", "false", "If not 'false', a custom (non-official) theme is loaded. This custom layout can be done in multiple ways: \n\n- The hash of the URL contains a base64-encoded .json-file containing the theme definition\n- The hash of the URL contains a lz-compressed .json-file, as generated by the custom theme generator\n- The parameter itself is an URL, in which case that URL will be downloaded. It should point to a .json of a theme");
|
||||
const layoutFromBase64 = decodeURIComponent(userLayoutParam.data);
|
||||
document.getElementById('centermessage').innerText = '';
|
||||
document.getElementById("decoration-desktop").remove();
|
||||
|
|
@ -87,7 +87,7 @@ if (layoutFromBase64.startsWith("http")) {
|
|||
const parsed = JSON.parse(data);
|
||||
// Overwrite the id to the wiki:value
|
||||
parsed.id = link;
|
||||
const layout = new LayoutConfig(parsed, false);
|
||||
const layout = new LayoutConfig(parsed, false).patchImages(link, data);
|
||||
InitUiElements.InitAll(layout, layoutFromBase64, testing, layoutFromBase64, btoa(data));
|
||||
} catch (e) {
|
||||
new FixedUiElement(`<a href="${link}">${link}</a> is invalid:<br/>${e}<br/> <a href='https://${window.location.host}/'>Go back</a>")`)
|
||||
|
|
|
|||
Loading…
Reference in a new issue