InfoDialog plugin
Use this plugin to display an informative dialog to the user.
Each map can have multiple instances of this plugin, each with its own configuration.
This allows for a number of use cases, such as help boxes, what's new-boxes, or any kind of information that we'd like to display to the user.
The contents of the dialog can be written using MarkDown or HTML (when the useLegacyRenderer flag is enabled).
The following properties are valid for the options property. Refer to these to see what's available, then go to the next paragraph for a complete configuration example.
allowDangerousHtml: boolean // Set to true to allow HTML inside MD
buttonText: string // Text on the close dialog button
description: string // Longer description, shown below title in widget buttons
headerText: null | string // Shown as a head inside the dialog
icon: string // See MUI Icons for valid icon names
name: string // a-z only, no other characters allowed - used as a unique identifier
showOnlyOnce: boolean // If true, user will see this dialog on start only once. Requires visibleAtStart===true.
target: string // Valid values: "control" | "left" | "right" | "toolbar"
text: string // Markdown and/or HTML, if allowDangerousHtml is true
title: string // Main title, shown in button that opens the dialog
useLegacyNonMarkdownRenderer: boolean
visibleAtStart: boolean
visibleForGroups: string[] // Array of string with valid AD group names, default empty means that anyone will is allowed to see thisThis plugin must be configured by editing the JSON map configuration directly, due to limitations in current Admin UI.
This example sets up two instances of the plugin in a map.
Please see comments for further explanation.
// Ensure to remove the comments before pasting this into your map config.
// Comments aren't allowed in JSON.
{
"type": "infodialog",
"index": 0,
"options": [
{
"target": "left", // "control" | "left" | "right" | "toolbar"
"name": "help", // unique name
"icon": "helpcenter", // any MUI icon, literal identifier
"headerText": "Sticky header in MarkDown",
"text": "# H1\n## H2\n### H3\n#### H4\n##### H5\n###### H6\n\nAlternatively, for H1 and H2, an underline-ish style:\n\nAlt-H1\n======\n\nAlt-H2\n------\n\nEmphasis, aka italics, with *asterisks* or _underscores_.\n\nStrong emphasis, aka bold, with **asterisks** or __underscores__.\n\nCombined emphasis with **asterisks and _underscores_**.\n\nStrikethrough uses two tildes. ~~Scratch this.~~\n\n# Lists\n\n1. First ordered list item\n2. Another item\n * Unordered sub-list.\n1. Actual numbers don't matter, just that it's a number\n 1. Ordered sub-list\n4. And another item.\n\n You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).\n\n To have a line break without a paragraph, you will need to use two trailing spaces.\n Note that this line is separate, but within the same paragraph.\n (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)\n\n* Unordered list can use asterisks\n- Or minuses\n+ Or pluses\n\n# Links\n[I'm an inline-style link](https://www.google.com)\n\n[I'm an inline-style link with title](https://www.google.com \"Google's Homepage\")\n\n[I'm a reference-style link][Arbitrary case-insensitive reference text]\n\n[I'm a relative reference to a repository file](../blob/master/LICENSE)\n\n[You can use numbers for reference-style link definitions][1]\n\nOr leave it empty and use the [link text itself].\n\nURLs and URLs in angle brackets will automatically get turned into links.\nhttp://www.example.com or <http://www.example.com> and sometimes\nexample.com (but not on Github, for example).\n\nSome text to show that the reference links can follow later.\n\n[arbitrary case-insensitive reference text]: https://www.mozilla.org\n[1]: http://slashdot.org\n[link text itself]: http://www.reddit.com\n\n# Images\nHere's our logo (hover to see the title text):\n\nInline-style:\n![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png \"Logo Title Text 1\")\n\nReference-style:\n![alt text][logo]\n\n[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png \"Logo Title Text 2\"\n\n# Code\nInline `code` has `back-ticks around` it.\n\nYou can have blocks of code too, just use ``` and ``` on new lines.\n\n\n# Tables\nColons can be used to align columns.\n\n| Tables | Are | Cool |\n| ------------- |:-------------:| -----:|\n| col 3 is | right-aligned | $1600 |\n| col 2 is | centered | $12 |\n| zebra stripes | are neat | $1 |\n\nThere must be at least 3 dashes separating each header cell.\nThe outer pipes (|) are optional, and you don't need to make the\nraw Markdown line up prettily. You can also use inline Markdown.\n\nMarkdown | Less | Pretty\n--- | --- | ---\n*Still* | `renders` | **nicely**\n1 | 2 | 3\n\n# Quotes\n> Blockquotes are very handy in email to emulate reply text.\n> This line is part of the same quote.\n\nQuote break.\n\n> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.\n\n# Breakes\nThree or more...\n\n---\n\nHyphens\n\n***\n\nAsterisks\n\n___\n\nUnderscores",
"allowDangerousHtml": false, // Whether to allow HTML inside MarkDown or not
"useLegacyNonMarkdownRenderer": false, // Whether to use the legacy renderer or not. Note: when enabled, MarkDown is not supported!
"buttonText": "Stäng",
"title": "Visa hjälp",
"visibleAtStart": true,
"showOnlyOnce": true,
"visibleForGroups": []
},
{
"target": "control",
"name": "announcements",
"headerText": null,
"icon": "announcement",
"text": "# Nyheter i Hajk\n## Februari 2022 - 2\nArbetet med en editor fortsätter.\n\n## Februari 2022\n### Nytt grafiskt gränsnitt\nVi har uppdaterat Hajks underliggande grafiska bibliotek ([Material UI](https://mui.com/)) till den senaste versionen. Förändringen _bör_ inte märkas annat än i bättre prestanda. Men om du ser några konstigheter ber vi dig rapportera till gis@halmstad.se. \n\nSe [teknisk beskrivning](https://github.com/hajkmap/Hajk/issues/871) för detaljer.\n\n### Lättare att gå tillbaka till föregående sökvy\nVi har förtydligat möjligheten att navigera tillbaka till resultatlistan genom att lägga till en stor, tydlig knapp:\n![Illustration av ny funktion](https://user-images.githubusercontent.com/110222/152990486-a32f2ed9-a783-4d36-988b-416c2ef36c7e.png \"Gå till föregående vy låter dig navigera i sökresultaten\")\n\nSe [teknisk beskrivning](https://github.com/hajkmap/Hajk/issues/1001) för detaljer.\n\n### Sökresultat markeras i kartan när muspekaren flyttas\nNär du rör muspekaren över resultatlistan kommer nu tillhörande objekt i kartan att automatiskt markeras och därmed skapa en tydlig koppling mellan listan och kartan:\n<img src=\"https://user-images.githubusercontent.com/110222/153380327-e216f3d0-a9ed-44df-ba74-991bf7400831.png\" alt=\"Illustration av ny funktion\" title=\"Exempel på hur det kan se ut med den nya sökresultatlistan\" width=\"100%\">\n\nSe [teknisk beskrivning](https://github.com/hajkmap/Hajk/issues/1002) för detaljer.\n\n### Stödet för Internet Explorer har nu fasats ut\nOm du ser den här texten betyder det att du redan använder en modern webbläsare – bra jobbat!\n\n_(Hade du haft Internet Explorer så hade du inte kunnat läsa det eftersom vi inte stödjer den föråldrade webbläsaren längre.)_",
"allowDangerousHtml": true,
"useLegacyNonMarkdownRenderer": false,
"buttonText": "Ok, uppfattat!",
"title": "Visa nyheter",
"description": "Texten under 'title' i knappen",
"visibleAtStart": true,
"showOnlyOnce": true,
"visibleForGroups": []
},