Documentation
Lsvg - Add SVG elements on Leaflet Maps
- Symbols, Icons, Paths, Circles, Images, Polygons, Ellipses, Rectangles, and Text -
Draw and/or call a database, via d3.v3.js, to place the elements.
Create a custom developer's environment to place SVG elements into a Leaflet World Map and port the svg elements to other Leaflet Maps. Insert SVG elements anywhere in the map. Update the map as things change: The SVG elements for the ported maps will automatically be updated.
How To Begin A Place
1.Zoom into your place on the Lsvg world map.
2.Give this place a name, and describe it.
3.Provide your email and name.
4.Select the "Begin This Place" button.
This will immediately publish your custom map online. Add SVG elements. Edit the elements at any time. Your place map is totally private. It is only viewable by yourself and those individuals you invite to participate. In the future, you can view your place online plus add to, or change it, and invite participants. Your place *ID and the *Key Code will be sent to your email. You will go to www.Lsvg.org/me and this will automatically show your place. SVG elements, and participants can be added and changed at any time.
*Your Key Code & ID also are shown via selecting .

Create one or more Leaflet Maps, via a template, to accept the SVG elements in your place.
- User Selections -
(Click on above to scroll to the associated description.)

Use the symbol menu to choose the symbols you want to include in the symbol list. When a symbol is added to the list it can be copied into your place. Each copied symbol can include its comment.
Owner Creates Symbols



Click on the desired symbol. Choose its color(s and give it a title. Select the 'add' button to place it in the Symbol List.
Symbol List
Editing List - After a symbol is created for the list, it can be removed/replaced, plus its colors and title can be changed. Click on the listed symbol you want to change.

Changing/removing a symbol in the list will be reflected in all planted copies of that symbol.
Users Add Symbols

Creating a Symbol List, automatically creates the Symbol Legend which is shown to all users. Select the 'add' button in the legend to plant that symbol: Then click the map to locate that symbol.

An unlimited number of copies of listed symbols can be planted anywhere in the map.


When the cursor is moved over the planted symbol it will show a tooltip with that copied symbol's specific comment.

Editing Symbols - After a symbol is planted, it can be moved, its description changed, or it can be removed. Double-Click on the symbol you want to change.

- Add Icons Select from over 200 icons. Choose its color, size then point/click on the map to plant it. Then select 'finish' to save the icon to the server.
The pane below will open:
If you do not know the name or number of the icon, select 'Preview & Select An Icon'. This will open:

Scroll through the listing and select the desired icon.
Choose the desired color and size, then click on the map where you want to plant the icon. Prior to selecting 'finish', the icon can changed, moved, plus its color and size can be modified. Also you may add a comment.
Editing Icons - After an icon is finished, it can be moved/changed/removed. Double-Click on the icon you want to change.
You may Right-click over an icon to send an email message to the user that planted it.

Choose photos from those stored on your computer. When selected, its thumbnail will be shown. Point/click on the map to locate its upper-left corner. Then size the photo by dragging the slider. You can move and change the photo as desired. You may include a comment for the image. Then select 'finish' to save the photo to the server. Because of the zoom-in capabilities, it is best to use High Definition images when available. Note: The maximum photo file size is limited to 2 MB.

Editing Photos - After an photo is finished, it can be moved/changed/resized/removed. Double-Click on the photo you want to change.
You can include not only photos, but you can also add decorative clipart: PNG, GIF, SVG, and JPG files.

Note: Other SVG elements can be inserted inside photos.


Click on the map at where you want to place the center of a circle. A smaller white draggable circle will be shown, used to adjust the desired circle radius. You may also move the circle by dragging it. When the circle is as desired, select the 'finish' button.
Editing Circle - After a circle is finished, it can be moved/changed/resized/removed. Double-Click on the circle you want to change.

Click on the map at where you want to place the upper-left corner of a rectangle. A small draggable circle will appear at the bottom-right corner used to adjust the desired width and height. You can resize/move/rotate the rectangle as desired. Then select 'finish' to save the rectangle to the server.
To rotate the rectangle, toggle the + or - buttons. The default toggled value is 5°. You may select a different toggle value via the drop-down menu.

Editing Rectangle - After a rectangle is finished, it can be rotated/moved/changed/resized/removed. Double-Click on the rectangle you want to change.

Click on the map at where you want to place the center of a polygon. A small draggable circle will appear at the bottom-right corner used to adjust the desired radius. You can change the number of sides, and resize/move the polygon as desired. Then select 'finish' to save the polygon to the server.
Editing Polygon - After a polygon is finished, it can be changed and moved.
Double-Click on the polygon you want to change.

Click on the map at where you want to place a text description. A blinker | will appear on the map at that point. Use your keyboard to type a line of text directly onto the map at the blinker. You can change/move/rotate the text as desired. Then select 'finish' to save the text to the server. (To finish, you may also the keyboard [Enter] key.)
To rotate the text, toggle the + or - buttons. The default toggled value is 5°. You may select a different toggle value via the drop-down menu.

Editing Text - After a text is finished, it can be rotated/moved/changed/resized/removed. Double-Click on the text you want to change.


- Add Ellipses Click on the map at where you want to place the center of an ellipse. A small white draggable circle will be shown, used to adjust the desired ellipse x,y radii. You may also move the ellipse by dragging it. When the ellipse is as desired, select the 'finish' button.
As the ellipse is being sized via the drag circle, it displays its x,y radius values.

To rotate the ellipse, toggle the + or - buttons. The default toggled value is 5°. You may select a different toggle value via the drop-down menu.

Editing Ellipse - After an ellipse is finished, it can be moved/changed/resized/removed. Double-Click on the ellipse you want to change.

Linear and smooth, plus right angled and enclosed paths can be added. Point/Click on the map to place each path point. By selecting the 'pause' button, each point can be moved. Toggle the 'undo' button to remove points sequentially. A path can enclosed, connecting the last point to the first point. Select 'finish' to save the path to the server. (To finish, you may also use the keyboard [F] key.)
Types of Paths
As the path segments are being drawn, you may pause it and then drag its points. After finished dragging the points, re-select the pause/restart button to continue.

Right Angled L: - The path segments are automatically aligned to maintain 90° between each segment.


Editing Path - After a path is finished, its points can be moved and its color, stroke width, smoothness, and comment can be changed. Double-Click on the path you want to change.
Enclose A Path - After at least three(3) points have been set, you can select the 'enclose' button. Re-open the path by reselecting the enclose button.
The default path type is Linear.
Smooth Path - There are two(2) smoothness settings: Smooth 1 and Smooth 2. Toggle between settings to smooth the path.

Smooth 1

Smooth 2
Features - Dashed line[D], end arrow[A]. All selections can be toggled via a keyboard shortcut key shown in brackets:[X,L,0,1,2,D,A,P,U,E,C,F].
Toggle Shortcut Keys
[X] Exit Path
[L] L: Right Angled Path
[0] Linear Path
[1] Smooth Path
[2] Smoother Path
[D] Dash: Dash Path
[A] Arrow End Arrow
[P] Pause/Restart Path
[U] Undo Points
[E] Enclose/Reopen Path
[C] Cancel Path
[F] Finish Path
Long Paths: Use Keyboard Arrows
When a path is to extend beyond the current map view area, use the keyboard arrows to navigate the map. This will pan the map in the direction of the arrow. By continuing to click points, you will extend the path in the desired direction.


Comments
Whan an element is created, it can include a comment. Therefore when the cursor moves over that element, it shows the associated comment.
When an element is double-clicked for changes, the comment can be changed or removed.



Pan Map to Specific Latitude,Longitude Point
Select the checkbox, then click on a location in the map to place the location's latitude/longitude in the text area. Or, type the desired location, separated by a comma, into the latitude/longitude text area. Select the 'Go' button and the map will pan to that location, with crosshairs shown at that point.



Owner's Narrative
You may include a running commentary on your Place. If there is no commentary narrative, this will be hidden to other users. You can add/change/remove your narrative at any time. Select whenever a change is made.

Creating Your Leaflet Map(s)


Lsvg Elements Automatically Ported to your Leaflet Map(s)
You are provided with a Key Code that is included in a typical web page for your Leaflet map:
- Leaflet Map Template -
The Leaflet map template will position the map to match your Lsvg place map.


Include your specific Key Code between quotation marks. To see the Key Code for the template, select . The map's container DIV must be given the id 'LsvgMap'. The web page content/layout can be modified as desired: Markers, plus additional SVG layers and their elements can be added.
Lsvg Available Global Variables:
LsvgMap- The Leaflet map object
LsvgSVG- The root SVG element
LsvgElemG- The container of Lsvg elements
The individual Lsvg elements can be accessed via: LsvgElemG.childNodes. They can be modified as desired. To see the structure of the individual elements, select
When the cursor moves over an SVG element with an attached comment, the 'commentDiv' is used to display the comment as a tooltip.

- Use D3 to add/update elements from a database. d3.v3.js is currently included in Lsvg. Create a Javascript code block to call a database file to build the svg elements. An svg <g> element is available to add all D3-generated elements: d3DataG. It's dom id=domD3DataG. The Leaflet Map object is LsvgMap.

A textarea is provided to add the Javascript, e.g.:

Select 'Run' button to run the javascript above. When it is satisfactory, or changes are made, select the 'Save' button to update the template file. This will include/update all d3-generated elements into the template. The 'Clear' button is used to remove the d3-generated elements from the Lsvg map and the template. Select the 'Source' button to see a list of the d3-added elements.
Each element is transformed via its Latitude/Longitude (lat/lng) location. Also, in order for all elements to track during map zoom/pan, it must include the following attributes: elem.setAttribute("lat",lat), elem.setAttribute("lng",lng). If the element is to adjust its size based on zoom level, then include elem.setAttribute("InitZoom",LsvgMap.getZoom())
Each element may include a 'comment' attribute: If the cursor moves over the element, a tooltip will show the value of the comment.


Important: Map Zoom Level @
The zoom level of the map is shown when adding SVG elements. To present consistent sizes, it is important to be aware of this zoom value. The size selected for these elements apply only to the zoom level where they are created: As the map is zoomed in/out they become larger/smaller.
When an element is double-clicked for changes, the map automatically zooms to the level at which the element was created.



Return To Original View
As the original boundries of your place are zoomed out, the boundries are highlighted with a transparent background color.
To return the map to the original view of the place boundries, click on the name of the place.


Mobile Viewing: Smartphones & Tablets
Selections have been arranged for mobile-friendly navigation. Mobile users can view their various places. Also, the Symbol Legend can be used to navigate directly to specific symbols: Tap on the symbol in the legend. Zooming the map is via double-tap, and pinch-zoom. Touch an element to display its comment.
Mobile users cannot create a place or add/change elements.


Selecting this button will allow you start an new place.
How To Begin A Place
1.Zoom into your place on the Lsvg world map.
2.Give this place a name, and describe it.
3.Provide your email and name.
4.Select the "Begin This Place" button.
This will immediately publish your custom map online. Add SVG elements. Edit the elements at any time. Your place map is totally private. It is only viewable by yourself and those individuals you invite to participate. In the future, you can view your place online plus add to, or change it, and invite participants. Your place ID and the Key Code will be sent to your email. You will go to www.Lsvg.org/me and this will automatically show your place. SVG elements, and participants can be added and changed at any time.

Create one or more Leaflet Maps to include the SVG elements in your place.

Selecting this button will allow you to login to your place. If you are the owner or user of more that a single place, they will be listed in a drop-down menu.
Note on Automatic Login:
Rather than manually logging in to your place, cookies provide automatic login. They are used to remember the places you own and are a friend. Your last visited place will be the one that automatically logs in on your next visit. Your other places are listed in the drop-down menu.

If you change computers or browsers the cookies will be lost. However they will be refeshed as you login to the places you own or visit. Therefore you should keep a record your places ID's.

Change your place name, description, and your map default view. You may also remove this place.
You can zoom/pan the map to readjust your place's default view. Changed boundries of your place will then take effect when you select the 'Change Default View' button.

Changes to the place name, description, and removal will occur after selecting 'Update Place'.

Announce your place to associates and invite them to view it.
When you invite the associates, their email address is approved as a visitor. They require your place ID to view it.
Administrative Permission - By default, the owner is the only individual that can add/change things on the map. However, when the owner invites an associate to view the place, they may be given administrative permission. This associate can then add/change their own elements in the place map. The owner, however, has access to their added elements.

Contact: Owner Name Users can contact the owner of a place, via email.
A link is provided on the map at the owner's name, allowing a user to contact the place owner via email.