Creating and Editing Leaflet Maps.txt

CKEditor Leaflet Map Plugin


I. CREATING NEW MAP

1.) Click the Leaflet Map icon in the CKEditor Toolbar. The Dialog window will now pop-up.

Then, it is EITHER of the 2 steps:
2) Input the Place name (for example: Manila, Philippines).

3.) Input the Latitude and Longitude values of a Place in their corresponding text fields.
(for example: Latitude = 14.123456 and Longitude = 121.654321)

Then click the OK button. After that, a map will be created, centered on that specified coordinates, with the following default values:
Width: 400px
Height: 400px
Zoom Level: 10
Map Tile: MapQuestOpen.OSM
Overview Map (MiniMap): Enabled
Alignment: Left

Note that if you do BOTH #2 and #3 (which is I think will rarely happen), the value in #2 will be ignored and the values/coordinates in #3 will be used.


II. EDITING EXISTING MAP

It is either of the 2 steps:

1.)  If you hover the mouse on the map, you will see the map's handle bar (cross hair) in the UPPER LEFT corner of the map,
you could then double-click that to view or edit the map properties.

2.) With your mouse, select the map to be edited (to set the focus away from other CKEditor objects). Then click the Leaflet Map icon in the CKEditor toolbar.

The Dialog will pop-up and will be set to the properties of the currently selected map.
Note that the #1 is the preferred way.

To set the current map in a NEW location, either specify a new Place name value in the Search field, or specify a new Lat/Lon values in the corresponding text fields. Note that if you change BOTH the values in the Search field and the Lat/Lon fields (which is I think will rarely happen), the values in the Lat/Lon fields will be used.

You might be wondering why the #1 step has to be done that way.
The main reason is that CKEditor Leaflet Maps uses the Widget API (introduced in CKEditor 4.3).
The Widget API introduces innovative features and more plugin flexibility.

For one, the map could have a Map Mode and Widget Mode.
Map mode uses the mouse wheel or double-click for zooming the map,
Left-Click+Hold+Drag for panning the map,
and the possibility to use the map's '+/-' zoom UI buttons.

We could have opted to bind the double-click for showing the map's option
at the expense of lesser map interaction. However, since I believe that map interaction
is relatively more important compared to widget's interaction, we need to compromise a bit.
That's why in order to edit the map's options, we have to do a mouse hover onto the map
and double-click the default widget's handle bars in the map's upper left corner
so that the default map's behavior and mouse and key bindings could still be preserved.

Later, we might include the option to edit the map widget's option
using the Right-Click or Ctrl+Left-Click event bindings.