Adding dialog plugin QGIS2Web

Question

I am kind of a beginner. I have exported my webmap using QGIS2Web and while playing with it, I was able to change the settings of the items already present on the map (for example position, language, zoom levels, etc.) Although, I would like to add some functions to it.

I want to add the Leaflet.Dialog plugin (https://github.com/NBTSolutions/Leaflet.Dialog), but I'm failing somewhere. In my export folder, I added both the .css and .js to the project and imported it with a link and script tag.

I then added this to the index.html :

var dialog = L.control.dialog(options)
          .setContent("<p>Hello! Welcome to your nice new dialog box!</p>")
          .addTo(map);

Why does this code not show anything?

Here is the code to link the plugin :

<link rel="stylesheet" href="css/Leaflet.Dialog.css">
<script src="js/Leaflet.Dialog.js"></script>

Answer 1

In the example code you have copied, option is a placeholder for any options listed here:

https://github.com/NBTSolutions/Leaflet.Dialog#options

You put the options as key:value pairs, comma-separated, in braces {}. For example:

var dialog = L.control.dialog({size: [200, 150], position: bottomright})
          .setContent("<p>Hello! Welcome to your nice new dialog box!</p>")
          .addTo(map);

Alternatively, you can just leave out the options completely to get the defaults, as the demo page linked from the plugin repo does:

var dialog = L.control.dialog()
          .setContent(contents)
          .addTo(map);