Zh OpenStreetMap Description

Installation

Component is installed on Joomla! 3.x in a standard way through the Extension Manager.

Component supports autoupdate feature

Main dashboard

Creating Map

We turn to the menu "Maps".

Enter the number of maps with the correct configuration for us.

Coordinates it is convenient to choose by dragging the marker (the value is automatically substituted in the form fields ) or by clicking the mouse on the desired location.

Map properties

Title	Map title
Description	Description
Latitude	Map center Latitude
Longitude	Map center Longitude
Width	Map Width, if set to 0, map will be 100% wide
Height	Map Height if set to 0, map will be 100% height. You can apply Zh Template Map FullScreen to your map page to show map in full screen or for the other cases

Map Details

Show Title as Placemark	Show map title as a placemark No - Do not show marker Simple - Marker without animation Bounce - Marker with animation (Bounce) Elastic Bounce - Marker with animation (Elastic Bounce)
Open Popup	Open Popup for map title immediately
Disable AutoPan	Disable AutoPan when open popup
Map Bounds	Map bounds to protect navigation outside map You have to enter Latitude1,Longitude1;Latitude2,Longitude2 ie pair of coordinates separated by semicolon and in one coordinate has values separated by comma The first coordinate - left bottom, the second - right top of bounds
Zoom	Initial Map Zoom
Min Zoom	Min Zoom for Map
Max Zoom	Max Zoom for Map
Draggable	Enable/disable Map dragging
Map Type	Initial Map Type OpenStreetMap OpenTopoMap First Custom Map Type
OpenStreetMap Layer	The enabled/disabled state of the OpenStreetMap Layer and ability to use Map Type Control to switch to that layer
OpenTopoMap Layer	The enabled/disabled state of the OpenTopoMap Layer and ability to use Map Type Control to switch to that layer
Allow Custom Map Types	The enabled/disabled using custom map type and ability to use Map Type Control to switch to that layers
Custom Map Types List	List of custom map types ID for using on map, separator ; Example: 1;2;5 If you set Map Type to First Custom Map Type, then first ID will be default map type
KML Layer	URL of the KML Layer, that would be displayed on the map
Category	The category that this map is assigned to

Using KML or GPX Layer

If you have KML file, you can put into accessible folder on site and fill URL in map field KML Layer.

If you want to use more than one file (or want to use GPX), you can use "featute", that path field of Paths is not required

• go to Paths list
• create path
• fill Layer options on File Layer tab

And after that new layer will be displayed

Moreover you can control its properties by path properties (in case KML or GPX layer type), or use internal parser for flexible control.

Map Header

Header HTML-text	HTML text on top of the map
Show Header Separator	Show Separator after Header HTML text

Map Footer

Show Footer Separator	Show Separator before Footer HTML text
Footer HTML-text	HTML text on bottom of the map

Map Controls

There are three sliders in this section

The first slider is

Zoom Control	The enabled/disabled state of the Zoom Control
Scale Control	The enabled/disabled state of the Scale Control
Scale Control: Maximum width	Maximum width of the control in pixels. The width is set dynamically to show round values (e.g. 100, 200, 500)
Scale Control: metric	Whether to show the metric scale line (m/km)
Scale Control: imperial	Whether to show the imperial scale line (mi/ft)
Scale Control: update when idle	If true, the control is updated on move end, otherwise it's always up-to-date (updated on move)
Double Click Zoom	Enables/disables zoom and center on double click
Scroll Wheel Zoom	The enabled/disabled state of the scrollwheel zooming on the map
Hide Single Base Layer in Map Type Control	If true, the base layers in the control will be hidden when there is only one
Home Button	The enabled/disabled feature to reset map center and/or zoom to initial value
Overlay Opacity	The enabled/disabled feature to change opacity for Ground Overlays

The second slider is

Geocoder Control	The enabled/disabled state of the Geocoder Control
Collapse Geocoder	Collapse control unless hovered or clicked
Provider	Geocoding service used by the control to perform the actual geocoding queries

The third slider is

Map Type Control	Position on a map
Zoom Control	Position on a map
Scale Control	Position on a map
Geolocation Control	Position on a map
Geocoder Control	Position on a map
Placemark List Button	Position on a map
Home Button	Position on a map
Overlay Opacity	Position on a map

Map Properties for Placemarks

Placemark ordering	Order placemarks. It is useful when you show placemark list Placemark title Category title and ordering Category title (descending) and ordering User ordering index Group title and Placemark title Group title (descending) and Placemark title Group user ordering index and Placemark title Group user ordering index (descending) and Placemark title Date of creation Date of creation (descending)
Auto-center and auto-zoom	Calculate and set zoom and map center to show all placemarks
Show placemarks in cluster	Create cluster for markers
Marker Cluster Zoom Level	Zoom Level on which Clusterer starts group markers
Group Placemarks in Cluster by Group Property	Create cluster for each group (and you can override cluster icon) Remember, if you use this feature (without managing markers by group list), you have to activate group in cluster (by setting Active in Group List)
Place overlapping placemarks on a spiral	Enable feature to show overlapped placemarks on a spiral or create special list
Zoom on cluster click	Zoom map to fit cluster bounds
Show cluster coverage	When mouse over a cluster it shows the bounds of its markers
Show placemark creation information	You can show information about user and date of placemark creation No Username Date of creation Date of creation and Username Username (after toolbar) Date of creation (after toolbar) Date of creation and Username (after toolbar)

Map Properties for Placemark List

Width	Placemark List Width in pixels If set 0 then you've got 100% width. It can be useful in bottom position and 100% map width
Height	Placemark List Height in pixels
Position	Values No - there is no placemark list ... - overlay on map Left and Right - table layout List-Map and Map-List - div layout External - you can put ul-tag with id=OMapsMarkerUL in your place to define your place to show placemark list For example, <ul id="OMapsMarkerUL" style="list-style-type: none;"></ul>
Style	Values Simple - predefined in CSS-file Advanced - predefined in CSS-file External - you can define it in your template
Background Color	Background Color Example: #EAEAEA As for gradient in my example, I've got it from internet sites. When you specify background color #E6E6E6, I add into style line background: #E6E6E6 I've got this example background: #fefcea; /* For old browsers */ background: -moz-linear-gradient(top, #fefcea, #f1da36); /* Firefox 3.6+ */ /* Chrome 1-9, Safari 4-5 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome 10+, Safari 5.1+ */ background: -webkit-linear-gradient(top, #fefcea, #f1da36); background: -o-linear-gradient(top, #fefcea, #f1da36); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fefcea, #f1da36); /* IE10 */ background: linear-gradient(top, #fefcea, #f1da36); /* CSS3 */ padding: 10px; border: 1px solid #333; I don't know is it true example, for all cases. But, for example, why not. I've replace start and end colors to mine. And, first background: we don't enter, because I do it. And after all this is mine code #E6E6E6; /* For old browsers */ background: -moz-linear-gradient(top, #E6E6E6, #AAAAAA); /* Firefox 3.6+ */ /* Chrome 1-9, Safari 4-5 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E6E6E6), color-stop(100%,#AAAAAA)); /* Chrome 10+, Safari 5.1+ */ background: -webkit-linear-gradient(top, #E6E6E6, #AAAAAA); background: -o-linear-gradient(top, #E6E6E6, #AAAAAA); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #E6E6E6, #AAAAAA); /* IE10 */ background: linear-gradient(top, #E6E6E6, #AAAAAA); /* CSS3 */ padding: 10px; border: 1px solid #333; I note that in IE9 there is no gradient. But it is not task to do it in my component by CSS. In any case you can do it by image and applying for class.
Action by Click	Action to do when you Click on link Center - center map on placemark Click - execute click function for placemark Center and Click - center map on placemark and execute click function for placemark Center, Animate - center map on placemark and animate placemark icon Click, Animate - execute click function for placemark and animate placemark icon Center, Animate and Click - center map on placemark, animate placemark icon and execute click function for placemark
Placemark List Content	Text from which placemark list contains Title - placemark title Title and Description - placemark title and desciption Title and Addition HTML text - placemark title and addition HTML text Icon and Title - placemark icon and title Icon, Title and Description Icon, Title and Addition HTML text - placemark icon, title and addition HTML text Icon, Title and Description (table) - table layout Icon, Title and Addition HTML text (table) - table layout Title and Image - placemark title and image (thumbnail) Title, Image and Description Title, Image and Addition HTML text Image and Title Image, Title and Description Image, Title and Addition HTML text Image, Title and Description (table) - table layout Image, Title and Addition HTML text (table) - table layout Table: Title - placemark title and table layout Table: Title and Description - placemark title and description and table layout Table: Title and Addition HTML text - placemark title and addition HTML text and table layout
Appearance	Appearance of placemark list Open List - placemark list is opened Icon Button - additional icon button control on map Text Button - additional text button control on map Icon Button and Open List - additional icon button control on map and list is opened Text Button and Open List - additional text button control on map and list is opened
Search placemark field	Enable feature to search by autocomplete placemarks in placemark list

Groups

Group Control	Position and type of list of group, that would be displayed for marker management No - there is not placemark control by group list Left - List of group on the left (table style) Right - List of group on the right (table style) Top - List of group on the top (table style) Bottom - List of group on the bottom (table style) Group-Map - List of group on the top (div style) Map-Group - List of group on the bottom (div style) External - List of group in user defined position (special tag)
Group Type	Behavior of group list Toggle Group Only One Active Group
Manage Placemarks	Enable ability to manage placemarks by Group List
Synchronize with placemark list	Show/Hide placemarks in placemark list depends on group state
Manage Paths	Enable ability to manage paths by Group List
Group ordering	Group order in list Group title Category Title and ordering User ordering index
Group Column Width	Column width for the left or right position of list group
Show Group	Show text, icon of group in list of group Text Icon Text and Icon
Display Show All and Hide All buttons	Show buttons to show/hide all groups by one click No Text Icon Text and Icon
Search group field	Display search field to find group in group list
Group CSS	Type of group decoration There are two predefined style and one (external) – for you, which you can set style in you template. ID for tags depend on Group CSS field. See details in Marker Grouping
Group List Title	Group List Title
Top Description	Description on top of the list
Show Top-Separator	The enabled/disabled state of Separator on top of the list
Show Bottom-Separator	The enabled/disabled state of Separator on botom of the list
Bottom Description	Description on bottom of the list

Route

Draggable	The enabled/disabled ability route to be draggable
Show Route Panel	Enable show route details
Travel Mode: Driving	The enabled/disabled ability to be show this travel mode
Travel Mode: Walking	The enabled/disabled ability to be show this travel mode
Travel Mode: Bicycling	The enabled/disabled ability to be show this travel mode
Travel Mode: Public Transit	The enabled/disabled ability to be show this travel mode
Unit System	Use this unit system option when create route Metric System (kilometers) Imperial (English) System (miles)

Advanced Options

Show hover text	Show hover text for map objects (placemarks, paths)
Hover Popup Style	Hover Popup style
Display Popup Content	Display Popup Content Default - display as popup Panel - display content in panel (on its tabs)
Panel width	Panel width in pixels
Open Panel	Initial Panel state
Loading map objects dynamically	Enable feature to load placemarks by AJAX No JQuery Mootools
Load type	Type of loading placemarks, ie load it all, or depends on some conditions All All (two steps: use map bounds, all the rest) Use map bounds
Buffer size for placemarks	You can load placemarks by parts
Buffer size for paths	You can load paths by parts
Loading content data dynamically	Enable feature to load map objects popup content by AJAX No JQuery Mootools Ie your page can contains placemark or path creation code, but all popup content can be loaded dynamically. If placemarks loaded by AJAX it by default loads content dynamically too.
Placemark Filter	Restriction displaying placemarks on some rules.
Allow to user enter placemarks	Enable registered users to create and/or alter placemarks on map.
Insert Allowed	User can create new placemarks
Update Allowed	User can update existing placemarks
Delete Allowed	User can delete existing placemarks
New Placemark State	Placemark Status for created user placemark.
New Contact State	Contact Status for created user contact (if enabled contact integration).
Show Icon Type Selector for New Placemark	The enabled/disabled state of selecting Icon Type when user creates placemark.
CSS Class	The class name for map div tag
Additional CSS styles for loading	List of CSS style files for loading when map is loading, separated by new line or semicolon
Additional JavaScript files for loading	List of JavaScript files for loading when map is loading, separated by new line or semicolon
Placemark Rating	Enable Placemark rating feature. No JQuery Mootools
Map text override	You can use this feature to override Standard text for map controls etc by using special interface in component administration area or change some interface or map object properties

Geolocation

Auto Positioning	Auto Positioning when map is loading
Geolocation Control	Show Geolocation Control
Geolocation Button Style	Geolocation Button Style Icon Text Icon and Text

Integration

Use contacts	The enabled/disabled state of using contacts You can enable using contact information and associate your placemark with contact to display contact information in placemark popup.
Contact Details	You can enter names of attributes to show. Separator is ; Acceptable values name position address city suburb state province country postcode zipcode phone mobile fax email website You can enter it in any order, and by it the contact will be shown. Note: postcode and zipcode – it is the same field, but different labels will be. Check contact fields, and you'll see this pairs: City or Suburb, State or Province, Postal / ZIP Code For example: position;name;mobile to show position, contact name and mobile phone
Use users	The enabled/disabled state of using users You can enable using user information and associate your placemark with user to display user information in placemark popup.
Allow open Google Maps	Enable/disable feature to open Google Maps (link or button in placemark popup)
Allow open Google Maps for map center placemark	Show link, which opens Google Map for map center Link in Popup (show direction), open link in new page Link in Popup (show direction), open link in the same page Link below map (show direction), open link in new page Link below map (show direction), open link in the same page Link in Popup and below map (show direction), open links in new page Link in Popup and below map (show direction), open links in the same page Link in Popup (show marker for title), open link in new page Link in Popup (show marker for title), open link in the same page Link below map (show marker for title), open link in new page Link below map (show marker for title), open link in the same page Link in Popup and below map (show marker for title), open links in new page Link in Popup and below map (show marker for title), open links in the same page Link in Popup (show marker for coordinates), open link in new page Link in Popup (show marker for coordinates), open link in the same page Link below map (show marker for coordinates), open link in new page Link below map (show marker for coordinates), open link in the same page Link in Popup and below map (show marker for coordinates), open links in new page Link in Popup and below map (show marker for coordinates), open links in the same page

Display

Creating Placemark

We turn to the menu "Placemarks".

Enter the number of markers bound to a specific map.

Coordinates it is convenient to choose by dragging the marker (the value is automatically substituted in the form fields ) or by clicking the mouse on the desired location.

Placemark properties

Title	Placemark Title
Description	Description
Tags	Tags
Latitude	Latitude
Longitude	Longitude
Address	Text address of your placemark
Map Title	Title of the map, where marker would be displayed

Placemark Details

Published	Published
Group	Group
Protected from user correction	Protected placemark from user correction, when you activate creating users placemark
Include in Placemark List	Include placemark in Placemark List
Category	The category that this placemark is assigned to
User ordering index	Use this field to manual sorting placemarks in placemark list
Rating	Rating of placemark, it can be set only by rating system
Show GPS information	Show GPS information (coordinates) in popup
Addition HTML text	HTML text, that will be included in placemark popup content Be careful, if you enter email address, the other Joomla! plugin it changed, and there will be an error and map will not be shown.
Placemark full description	Placemark description (HTML text) in placemark detail view (single placemark page view)
Hover HTML text	Hover HTML text for placemark when enabled hovering feature

Appearance properties

Marker	Marker Type No - Do not show marker Simple - Marker without animation Simple: Bounce - Marker with animation (Bounce) Simple: Elastic Bounce - Marker with animation (Elastic Bounce) Icon File: Simple - Marker without animation Icon File: Bounce - Marker with animation (Bounce) Icon File: Elastic Bounce - Marker with animation (Elastic Bounce) Marker with label: Simple - Marker without animation and label Marker with label: Bounce - Marker with animation (Bounce) and label Marker with label: Elastic Bounce - Marker with animation (Elastic Bounce) and label
Icon Type	Icon Type
Icon X-offset	Icon offset
Icon Y-offset	Icon offset
Open Popup	Execute action which described in Action by Click and Zoom by Click
Popup Content	Content of Popup Title and Description Title Description Title and Article (by iframe) Article (by iframe) None
Action by Click	Action by Click on this placemark Open Popup Open Link in the same page - link, that entered in URL Site field Open Link in new page Open Popup with Tabs Open Contact in the same page Open Contact in new page Open Article in the same page Open Article in new page Open Details in the same page Open Details in new page None
Zoom by Click	Zoom by Click on this placemark You can change zoom when you click on marker Do not change - zoom is not changed
Popup Style	Popup style
URL Site	Site URL to display in placemark popup
Site Name	Site Name to display instead of URL
URL Image	Image URL to display in placemark
URL Image Thumbnail	Image URL to display in placemark list
Start Publishing	Placemark start publishing date
Finish Publishing	Placemark finish publishing date
Date of creation	Placemark creation date
Access	ACL access level to view this placemark

Marker with Label

Label Class	Label CSS Class
Label X-offset	Label offset
Label Y-offset	Label offset
Label content	HTML label content

Popup Tabs

Add Popup content

Add Popup content into popup No as first tab - add popup content before all visible tabs as last tab - add popup content after all visible tabs replace content - add popup content as infobubble content, without any tab

Title	Tab Title
Image	You can use image to build image gallery in single placemark view
HTML Text	Tab text

Integration

Prepare Content	Run other plugins for popup content
Show open Google Maps	Show link or toolbar button, which opens Google Maps No Button (show direction), open link in new page Button (show direction), open link in the same page Link (show direction), open link in new page Link (show direction), open link in the same page Button (show marker for title), open link in new page Button (show marker for title), open link in the same page Link (show marker for title), open link in new page Link (show marker for title), open link in the same page Button (show marker for coordinates), open link in new page Button (show marker for coordinates), open link in the same page Link (show marker for coordinates), open link in new page Link (show marker for coordinates), open link in the same page
Show Tags	Show tags in popup content No Placemark Contact
Tag Style	User which associate with placemark Simple Advanced External
User	User which associate with placemark
Show user prompts	Type of view user information No Text Icon No prompts
Contact	Contact which associate with placemark
Show contact prompts	Type of view contact information No Text Icon No prompts
Contact Button in Popup toolbar	Show Contact Button in Popup toolbar
Alternative Contact URL	You can alternative URL to show contact page (instead of standard joomla's call)
Placemark details Button in Popup toolbar	Show Placemark Button in Popup toolbar
Alternative Details URL	You can alternative URL to show details page (instead of standard call detail placemark view)
Placemark Details for standard call	You can override default details attributes for detail view By default placemark detail page is opened without enabling additional loading bootstrap library and styles, without thumbnail and image gallery, without Additional HTML text and full text description. You can change default behavior by passing parameters, separated by comma (,) load bootstrap load bootstrap styles thumbnail image gallery addition html text full description For example, if you enter image gallery,addition html text,full description into field, the detail view for placemark will be with two additional description (short "Addition HTML text" and full "Placemark full description"), and image gallery will be displayed too
Article	Article which associate with placemark
Article Button in Popup toolbar	Show Article Button in Popup toolbar
Alternative Article URL	You can alternative URL to show article page (instead of standard joomla's call)
iframe tag Article CSS	You can apply CSS style for iframe tag (when use article in popup content)

Hidden Attributes for Customization

For your convenience you can also change the labels of the fields by joomla overrides

COM_ZHOSMMAP_MAPMARKER_DETAIL_ATTRIBUTE1_LABEL 

COM_ZHOSMMAP_MAPMARKER_DETAIL_ATTRIBUTE2_LABEL 

… 

COM_ZHOSMMAP_MAPMARKER_DETAIL_ATTRIBUTE9_LABEL

For example, you can enter some data into this fields.

In table columns have names

attribute1

attribute2
...

attribute9

You can use this fields, for example, for integration with other systems or etc.

Display

Placemark Customization

Copy your marker images (format PNG) in the directory

/administrator/components/com_zhosmmap/assets/icons/

Component will automatically pick up the picture when choosing the type of marker.

The only requirement - the file name use English letters and can't contain any special character; the file extension have to be a .png ie in lower case, because names of images stored in a database without the extension, and it is appended in the output.

Don't forget about Compatibility Mode for Resource Files

Grouping

The marker may be included in one group, for this to specify a marker belonging to the group. If the field of markers grouping is set (field value Group Control is different from No), then starts an additional feature: a list of active groups (the location is determined by this same field, with the first four (left, top, right, bottom) correspond to the table form of representation, while the two latter (Group-Map, Map-Group) - based on the div, and you have the opportunity to do anything with them.

The map also has a drop-down list Group CSS - which implements the following functionality:

• the first two styles - predefined
• the third - you can override it in your CSS file template
• while in three cases, just have three different names of objects, respectively, we can change the styles they like.

The following names

for the div-tag ID takes the value

• OMapsMenu-advanced
• OMapsMenu-simple
• OMapsMenu-external

for ul-tag

• zhom-menu-advanced
• zhom-menu-simple
• zhom-menu-external

Accordingly, styles, prescribes for them. Field Show Group Icon is used to display icons in the list of groups.

Creating Group

We turn to the menu "Groups".

Enter the number of groups.

Group properties

Title	Group Title
Description	Description
Published	Published
Icon Type	Icon Type
Icon X-offset	Icon offset
Icon Y-offset	Icon offset
Override Placemark Icon	Change icon of placemark to group icon
Override Cluster Icon	Change icon of cluster when you create cluster for each group
Active in Group List	Set Group state to active (show markers) when page displayed. This parameter uses in two cases: show markers in different clusters, or show markers and set active group in group list (when use marker managing by group list). It also can be used for managing paths by group list.
Min Zoom for Marker Manager	Zoom from which placemarks would be displayed by Marker Manager
Max Zoom for Marker Manager	Zoom after which placemarks wouldn't be displayed by Marker Manager
Category	The category that this group is assigned to
User ordering index	Use this field to manual sorting groups in group list

Display

Creating Path

The path means polylines, polygons, circles or special map objects (layers).

We turn to the menu "Paths".

Enter the necessary number of paths with reference to a specific map.

Field Path - a set of coordinates of points, the coordinates (Latitude, Longitude) are separated by comma (,), the points themselves - separated by a semicolon (;)

Coordinates it is convenient to choose by dragging the marker (values are substituted into the reference field in the form Current coordinates, from there you can copy and add a separator and value in the field Path), or clicking the mouse on the desired location.

Path properties

Title	Path Title
Description	Description
Path	Path for example: 59.92335689062723,30.385787878185525;59.92374467628344,30.387547407299284
Visualization Data Source	Data source for visualization See also Zh OpenStreetMap Visualization
Object Type	Map object type Line Polygon Circle
Map Title	Title of the map, where path would be displayed
Current coordinates	Current coordinates

Path Details

Published	Published
Geodesic line	Create Geodesic line (circle-shaped)
Weight	Line Weight
Color	Line Color for example: #FF0000
Opacity	Opacity, number value between 0.0 and 1.0
Fill Color	Fill Color (for rectangles, circles) for example: #FF0000
Fill Opacity	Fill Opacity, number value between 0.0 and 1.0
Hover Color	Hover Color for example: #FF0000
Hover Fill Color	Hover Fill Color (for rectangles, circles) for example: #FF0000
Radius	Circle radius in meters
Group	Group, it can be used for managing by Group List
Category	The category that this path is assigned to
Addition HTML text	HTML text, that will be included in path popup content Be careful, if you enter email address, the other Joomla! plugin it changed, and there will be an error and map will not be shown.
Hover HTML text	HTML text, that will be included in path hover popup content Be careful, if you enter email address, the other Joomla! plugin it changed, and there will be an error and map will not be shown.

Label

You can show label in path center

Show Label	Show Label No Text Tooltip
Label Class	Label CSS Class
Label Style	Label CSS style without style word
Label X-offset	Label horizontal offset
Label Y-offset	Label vertical offset
Label content	HTML label text Be careful, if you enter email address, the other Joomla! plugin it changed, and there will be an error and map will not be shown.

Advanced options

Popup Content	Popup Content No Title Description Title and Description
Action by Click	Action when you click on path No Open Popup Open Link in new page Open Link in the same page
URL Site	Site URL to display in path popup content
Site Name	Site Name to display instead of URL

File Layer

Layer Type	Layer Type KML (Internal Parser) GPX (Internal Parser) KML - you can control object parameters by path properties GPX - you can control object parameters by path properties See also Internal parser
URL	URL or file path of the File Layer, that would be displayed on the map
Layer Show Type	Map bounds for fitting the KML layer Zoom - Zoom to fit bounds of layer Unchange - Do not change viewport
Suppress Popup	Suppress open Popup when you click on layer
Popup content for Placemark	Popup content Suppress Name Description Description, if it is not defined then Name Name and Description
Popup content for Polyline	Popup content Suppress Name Description Description, if it is not defined then Name Name and Description
Popup content for Polygon	Popup content Suppress Name Description Description, if it is not defined then Name Name and Description
Tooltip content for Polyline	Tooltip content Suppress Name Description Description, if it is not defined then Name
Tooltip content for Polygon	Tooltip content Suppress Name Description Description, if it is not defined then Name
Override Placemarks	Override placemark properties for placemarks, created from file. You can assign group to path and set override icon for placemark in group properties

Ground Overlay

Image URL	URL for ground overlay image
Image bounds on map	Latitude1,Longitude1;Latitude2,Longitude2
Opacity	Value between 0 and 1
Opacity management	Change opacity by Opacity Control
Clickable	Enable/disable click on layer

Grid Layer

Create Tile Function	Create Tile function has one parameter (coords), which contains: coord.x, coords.y and coords.z
Opacity	Value between 0 and 1

Display

Creating Map Type

The map type means a custom map type for getting tiles.

We turn to the menu "Map Types"

Enter the necessary number of map types.

Map Type

Title	Map Type Title
Description	Description
Min Zoom	Min Map Zoom (for which exists tiles)
Max Zoom	Max Map Zoom (for which exists tiles)
URL template	URL template for getting map tiles, for example, for OpenStreetMap type it is https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
Layer Type	Type of map layer Map - it is Basemap Overlay - it is Overlay type
Map type attribution	Attribution of map type, ie license, copyright...

Map Type Details

Tile Width	Tile Width
Tile Height	Tile Height
Get Tile URL function	Implementation of function to get tile URL if you don't use URL template
Opacity	Opacity
Opacity management	Change opacity by Opacity Control
Published	Published
Category	The category that this map type is assigned to

Display

Creating Popup Style

We turn to the menu "Popup Styles".

Popup Style Details

Title	Popup Style Title
Description	Description
Min Width	Min width of the popup, in pixels
Max Width	Max width of the popup, in pixels
Min Height of tab content	Set it if you want to set initial height of tab content, in pixels
Max Height	If set, creates a scrollable container of the given height inside a popup if its content exceeds it, in pixels
Disable Auto Pan	Set it if you don't want the map to do panning animation to fit the opened popup
Published	Published
Category	The category that this popup style is assigned to

Display

Creating Map Override

This feature can help you to override static text for map objects or change its behaviour (or properties).

You can define override and use it for map by assign in map details

Override

Title	Map Override Title
Description	Description
Published	Published
Category	The category that this override is assigned to

Map

Invalidate Map Size Container Selector	jQuery selector to find container where map div is located in case you need to redraw map. For example when your map is not on an active tab and when you click to show it your map is displayed incorrectly For example #sppb-tab1-2
Invalidate Map Size Container Index	In some cases you can access to tab only by index. Index starts with 0
Invalidate Type	How often invalidate map container One time - only first time when container will be displayed Always

Placemark

Popup Style	Default Popup Style for all popups
Date of creation format	Date and time format for placemark date of creation. Use PHP DateTime format For example jS F Y g:i a

Placemarks

Cluster list Content Template

Template for cluster list content You can create your own cluster list item template Go to /components/com_zhosmmap/templates/placemarks/cluster_list Create your own php file with your own code. Default.php file is default template. You can copy its code and change to your own After that your new template will be in this list

Placemark List

In this section you can define text for placemark list objects.

Button title	Placemark list button title
Button tooltip text	Placemark list button tooltip text
Placeholder text: Search	You can override text Search in placemark list search field
Autocomplete search type	Search type in case of using autocomplete feature Default Title and Description
Character mapping type	Character mapping in case of entering search string in placemark search field with wrong keyboard layout No Custom - use fields synonym and character mapping English-Russian (QWERTY) - predefined type, you can ask to add your own layout for your country English-Macedonian (QWERTY) - predefined type
Synonym applying side	Source, where synonym will be applied. None Search - text in search field Value - title or description value Both
Synonyms - accents, diacritical marks and so on	Synonyms, each pair separated by comma or semicolon, in pair values separated by colon. Enter values only for lower case or if it has different symbols. Example é:e; è:e; ê:e
Character Mapping	Character mapping for wrong keyboard layout, each pair separated by comma or semicolon, in pair values separated by colon. Enter values only for lower case or if it has different symbols. Example q:й; w:ц; e:у; r:к; t:е; y;н But for different symbols for letter in different case `:ё; ~:Ё

Group List

Placeholder text: Search	You can override text Search in placemark list search field
Autocomplete search type	Search type in case of using autocomplete feature Default Title and Description
Character mapping type	Character mapping in case of entering search string in placemark search field with wrong keyboard layout No Custom - use fields synonym and character mapping English-Russian (QWERTY) - predefined type, you can ask to add your own layout for your country English-Macedonian (QWERTY) - predefined type
Synonym applying side	Source, where synonym will be applied. None Search - text in search field Value - title or description value Both
Synonyms - accents, diacritical marks and so on	Synonyms, each pair separated by comma or semicolon, in pair values separated by colon. Enter values only for lower case or if it has different symbols. Example é:e; è:e; ê:e
Character Mapping	Character mapping for wrong keyboard layout, each pair separated by comma or semicolon, in pair values separated by colon. Enter values only for lower case or if it has different symbols. Example q:й; w:ц; e:у; r:к; t:е; y;н But for different symbols for letter in different case `:ё; ~:Ё

Button tooltip text	Tooltip text for panel button
Details tab title	Title for placemark details tab in panel
List tab title	Title for placemark list tab in panel
Route tab title	Title for route tab in panel
Groups tab title	Title for groups tab in panel

Integration

Open Google Maps title	Change title for link or toolbar button to open Google Maps
Geocoder placeholder text	Placeholder text for text input
Geocoder error message	Message when no result found or geocoding error occurs

Display

Visualization

You can use visualization to display your data on map.

You can read more Zh OpenStreetMap Visualization

We turn to the menu "Visualization"

Visualization dashboard

Visualization

Visualization - describe your data.

We turn to the menu "Structure"

Structure

Enter the number of structures with the correct configuration for us.

Structure

Title	Structure Title
Description	Description
Published	Published
Category	The category that this structure is assigned to

Columns

Latitude	Database table column name to get latitude value
Longitude	Database table column name to get longitude value
Coordinates	Database table column name to get values of latitude and longitude in case it is defined by pair
Coordinate order	Order of coordinate in case it is defined by pair Latitude,Longitude Longitude,Latitude
Separator in coordinates	Separator between latitude and longitude in case it is defined by pair Default is comma (,)
Array of Coordinates	Database table column name to get value of coordinates in case it is defined by array
Separator in array	Separator between pairs of coordinates in case it is defined by array Default is semicolon (;)
Result Object	You can define way to create objects Create one object for all rows Create one object for each row
Date of creation	Database table column name to get date of creation value. It can be used for start or end placemarks

Line

Here you can add attributes to your line, for example start and end placemarks.

Start Marker
Title	Placemark Title
Description	Description
Marker	Marker Type No - Do not show marker Simple - Marker without animation Simple: Bounce - Marker with animation (Bounce) Simple: Elastic Bounce - Marker with animation (Elastic Bounce) Icon File: Simple - Marker without animation Icon File: Bounce - Marker with animation (Bounce) Icon File: Elastic Bounce - Marker with animation (Elastic Bounce) Marker with label: Simple - Marker without animation and label Marker with label: Bounce - Marker with animation (Bounce) and label Marker with label: Elastic Bounce - Marker with animation (Elastic Bounce)
Icon Type	Icon Type
Icon X-offset	Icon offset
Icon Y-offset	Icon offset
Addition HTML text	HTML text, that will be included in placemark popup content Be careful, if you enter email address, the other Joomla! plugin it changed, and there will be an error and map will not be shown.
End Marker
Title	Placemark Title
Description	Description
Marker	Marker Type No - Do not show marker Simple - Marker without animation Simple: Bounce - Marker with animation (Bounce) Simple: Elastic Bounce - Marker with animation (Elastic Bounce) Icon File: Simple - Marker without animation Icon File: Bounce - Marker with animation (Bounce) Icon File: Elastic Bounce - Marker with animation (Elastic Bounce) Marker with label: Simple - Marker without animation and label Marker with label: Bounce - Marker with animation (Bounce) and label Marker with label: Elastic Bounce - Marker with animation (Elastic Bounce)
Icon Type	Icon Type
Icon X-offset	Icon offset
Icon Y-offset	Icon offset
Addition HTML text	HTML text, that will be included in placemark popup content Be careful, if you enter email address, the other Joomla! plugin it changed, and there will be an error and map will not be shown.

Display

Data Source

Data Source - describe your data source.

We turn to the menu "SQL"

SQL

Enter the number of SQL data sources with the correct configuration for us.

Data SQL

Title	SQL Data Sources Title
Description	Description
SQL text	SQL text for getting your data
Server	Server for data source
Structure	Structure of data
Published	Published
Category	The category that this data SQL is assigned to

Display

Server

Server - define your connection to remote server.

We turn to the menu "Server"

Server

Enter the number of servers with the correct configuration for us.

Server

Title	Server Title
Description	Description
Driver	Database driver name For MySQL you can use mysql or mysqli values, for MS SQL server use mssql
Host	Database host name
User	User for database authentication
Password	Password for database authentication
Database	Database name
Database prefix	Database prefix
Published	Published
Category	The category that this server is assigned to

Display

See also

Zh OpenStreetMap Visualization

Creating Category

You can go to the menu "Categories" and add categories to the component.

Then you can walk on the map objects and tag them by category.

On the basis of categories can be further in any way extend the functionality of the component

Utilities

Import CSV

Select Import CSV to upload placemark definition by CSV file.

Each line of file - one placemark definition.

First line of file - column name list.

Keep in mind - values can't contain delimiter. For example, if your placemark HTML description can contain colon, use semicolon as delimiter (and don't use it in this description).

Main process screen

You can see table of placemark buffer.

All import process has next steps

• upload CSV file in buffer
• check data, edit it
• import data to placemark table
• analyze log
• correct processed placemarks with warnings
• delete processed data in from buffer

You can see buttons in toolbar

• Upload File - upload CSV file
• Import All - import data
• Log - show process log
• Clear Log - delete data from process log
• New - create simple placemark definition (for example, for test purposes)
• Edit - edit record in buffer (for example, for fixing errors and upload again)
• Publish and Unpublish - you can change buffer placemark status
• Delete - delete record from buffer
• Delete All - delete all records from buffer
• Delete Processed - delete all records from buffer in state Processed

When you upload file all records have state New

Press Upload File

Select file to upload.

Check and if you need - change Delimiter

You can set some defaults - if in file there is no value (not defined or empty value), you can apply default.

After loading you'll get upload log, it is not stored, only showed

Records can be rejected, if you not define required values. You can see record number (to edit line and upload it)

Records will not be uploaded if your first line doesn't contain column definition.

If you enter wrong colunm name, this column will not processed.

Next column names can be used

title	required	Placemark title
latitude	required	Latitude
longitude	required	Longitude
published	optional	Placemark status, values 0 or 1
addresstext	optional	Text address
icontype	optional	Icon Type
iconofsetx	optional	Icon X-offset
iconofsety	optional	Icon Y-offset
description	optional	Description
descriptionhtml	optional	Addition HTML text. All HTML formatted text in one line, line breaks are not allowed.
hrefimage	optional	URL Image
catid	optional	Category ID
markergroup	optional	Group ID
createdbyuser	optional	User ID, which associate with placemark
showuser	optional	Show user prompts, one integer value Type of view user information 0 - associated value in component No 1 - associated value in component Text 2 - associated value in component Icon 3 - associated value in component No prompts
showgps	optional	Show GPS information 0 - associated value in component No 1 - associated value in component Yes
preparecontent	optional	Prepare the content with the Joomla Content Plugins 0 - associated value in component No 1 - associated value in component Yes
markercontent	optional	Popup Content 0 - associated value in component Title and Description 1 - associated value in component Title 2 - associated value in component Description 9 - associated value in component Title and Article (by iframe) 8 - associated value in component Article (by iframe) 100 - associated value in component None

You can enter columns in any order, ie order of column names define order of placemark properties

If you want to import placemarks with definite status, you can change it in list or by buttons Publish or Unpublish.

By pressing Import All you start to import placemarks into working table.

You have to select map, to whic imported placemarks will be belong.

And press Import button.

In this case process log will be cleared and import process will start.

All placemarks with New state will be taken to process.

If some required values is not defined - will be rejected and state will be set to Error

In case of processing placemark has the same title with the other placemark, belonging the destination map, this processing placemark will not be imported, and state of it will be set to Skiped. You can't import placemark with same title.

Change title, change status to New and process again. Or import to the other map.

The process result screen

Imported placemarks in buffer change status to Processed

For demo purposes I uploaded placemark data with incorrect category ID, ie I set category ID which is not exists in categories.

In this case you can't see in buffer list category value, but it exists. The same for group ID.

If you will edit placemark in buffer - incorrect values will be set to 0 and data will be imported without category.

But if you enter into CSV file categories (or groups), which are not exists, and try to import - you'll get warnings and imported placemarks will be without it.

In future this checks will be available not only on import stage.

In case of warnings - if you need to have placemarks belonging to category or group you can delete imported placemarks and do

• recreate file with correct IDs, upload it
• remove incorrect ID and upload it with defaults
• remove incorrect column with values and upload it with defaults

After that import again

If there is no any placemarks in buffer with state New and you try to process it (to import placemarks), you'll get message that no data to process

When you processed buffer you can delete processed placemarks by pressing Delete Processed

You can also can delete records by applying filters, selecting records and pressing Delete button.

You can delete all records from buffer by button Delete All

When you got warnings, you can analyze it by checking process log. It is stored in database until next import, therefore you can analyze it any times.

As described above, one record was imported with warnings, lets check this warning to understand log

Press Log

There are 6 columns with common title

• ID - record log ID, just sequence
• Import object - what object is processed, in our case it is Placemark
• Error type - type of error, in my case I tried to load wrong category, value is Category not found
• Target ID - it is ID of my imported object (placemark). In my case new imported placemark has ID 6248. Check images below.
• Source ID - it is ID of object in buffer (placemark). In my case placemark in buffer has ID 374. Check images below.
• Source Reference Object ID - it is ID of object, which is not assigned due to is doesn't exist. In my case I tried to set placemark category ID to 778. Check images below.

In other words, I tries to import placemark with category ID=778. But category with this ID is not exist. Therefore placemark was imported without category.

Source placemark to import (in buffer) has ID=374

New imported placemark has ID=6248

Images for log description

Source placemark (in buffer) with wrong value for category

Target placemark, to which category is not applied

Categories

Sorce placemark (in buffer) with correct category

Result imported placemark with correct category

My test file is

title;description;latitude;longitude;catid;descriptionhtml
Hello;Some my text;59.91790658791312;30.394283583638412;778;<b>Hello</b> world<br />Here some HTML text
HHH;;59.92354196553846;30.38381223964427;45

Import Zh YandexMap

If extension is not installed - buttons for this extension is disabled.

Today you can:

• import data from Zh YandexMap extension
  • import Groups
  • import Placemarks
• check log for last import process

In future will be added

• pre-import check (exists categories, groups and tags)
• import tags for placemarks

Due to complex process creation of category - automatic creation of categories is not supported. Only check.

For correct process execution do not import data parallelly, ie in different windows (tabs). Just do it in one precess.

Data loading by Addition rule, it is not update exist data.

It means:

- group will be the same if it has THE SAME TITLE

- category will be the same if it has THE SAME PATH, ie it alias and aliases of all its parents are the same

- placemark will be the same if it has THE SAME TITLE and BELONGS to the destination MAP

If you close browser on middle of process - you can continue loading (but save log before new process).

When you start to continue import process - the same map objects will be skipped and you'll get only new data.

When process is done you'll get statistics window

Here main screen

Toolbar buttons:

• Close - close and return to Utilities
• Import groups - automatic load groups
• Import placemarks - automatic load placemarks
• Log - check process log
• Clear Log - clear process log

Lets check how it works

For example we have

I created map in Zh YandexMap

New group

New category

I created placemarks assigned to group and category, and without it

Go to Zh OpenStreetMap

Create map

As you can see group Bank doesn't exist

And category doesn't exist too.

For correct loading placemarks you need to have groups and categories in extension. If it doesn't exist you'll get warnings in process log.

You can automatically load groups, but categories - no. You need to add it manually.

In next steps we will load groups and placemarks. And we will get placemarks with groups but without categories (I didn't enter it).

Go to import screen

Press Import groups

Press Import button

You can see we import our group

and result

check our log

it is empty

Lets import placemarks

Press Import placemarks

Select our source and destination maps

Press Import button

You can see we import our placemarks

It means we loaded 6 placemarks and had some warnings

and result

As you can see placemarks have group attribute

Check log

Log is common log for import

You can see 5 fields, lets explain on our example, import placemarks with category, which doesn't exist:

• Import object - which map object will be process, in our case Placemark.
• Error type - what error is occured, in our case Category not found. Check images with data for details above.
• Target ID - distination object ID, in our case new placemark ID (ID = 104). Check images with data for details above.
• Source ID - source object ID, in our case placemark ID (ID = 48) from source extension. Check images with data for details above.
• Source Reference Object ID - reference object ID (category ID = 14), which is not exist in destination extension.

As you can see our problem is occurred for placemark Marker 7, which has in source extension (Zh YandexMap) ID = 48 and assigned to category x8 with ID = 14

I can clear log by press Clear Log or it will automatically be cleared by next precess

Lets try to import groups again

As you can see there is no any data to load

Import Zh GoogleMap

If extension is not installed - buttons for this extension is disabled.

Today you can:

• import data from Zh GoogleMap extension
  • import Groups
  • import Placemarks
• check log for last import process

In future will be added

• pre-import check (exists categories, groups and tags)
• import tags for placemarks

Due to complex process creation of category - automatic creation of categories is not supported. Only check.

For correct process execution do not import data parallelly, ie in different windows (tabs). Just do it in one precess.

Data loading by Addition rule, it is not update exist data.

It means:

- group will be the same if it has THE SAME TITLE

- category will be the same if it has THE SAME PATH, ie it alias and aliases of all its parents are the same

- placemark will be the same if it has THE SAME TITLE and BELONGS to the destination MAP

If you close browser on middle of process - you can continue loading (but save log before new process).

When you start to continue import process - the same map objects will be skipped and you'll get only new data.

When process is done you'll get statistics window

Here main screen

Toolbar buttons:

• Close - close and return to Utilities
• Import groups - automatic load groups
• Import placemarks - automatic load placemarks
• Log - check process log
• Clear Log - clear process log

Lets check how it works

For example we have

I created map in Zh GoogleMap

New group

New category

I created placemarks assigned to group and category, and without it

Go to Zh OpenStreetMap

Create map

As you can see group Bank doesn't exist

And category doesn't exist too.

For correct loading placemarks you need to have groups and categories in extension. If it doesn't exist you'll get warnings in process log.

You can automatically load groups, but categories - no. You need to add it manually.

In next steps we will load groups and placemarks. And we will get placemarks with groups but without categories (I didn't enter it).

Go to import screen

Press Import groups

Press Import button

You can see we import our group

and result

check our log

it is empty

Lets import placemarks

Press Import placemarks

Select our source and destination maps

Press Import button

You can see we import our placemarks

It means we loaded 6 placemarks and had some warnings

and result

As you can see placemarks have group attribute

Check log

Log is common log for import

You can see 5 fields, lets explain on our example, import placemarks with category, which doesn't exist:

• Import object - which map object will be process, in our case Placemark.
• Error type - what error is occured, in our case Category not found. Check images with data for details above.
• Target ID - distination object ID, in our case new placemark ID (ID = 110). Check images with data for details above.
• Source ID - source object ID, in our case placemark ID (ID = 97) from source extension. Check images with data for details above.
• Source Reference Object ID - reference object ID (category ID = 15), which is not exist in destination extension.

As you can see our problem is occurred for placemark Marker 6, which has in source extension (Zh GoogleMap) ID = 97 and assigned to category x8 with ID = 15

I can clear log by press Clear Log or it will automatically be cleared by next precess

Lets try to import groups again

As you can see there is no any data to load

Displaying the Map

There are a few menu item types.

The first menu item type is Map.

It can show preconfigured map. You can override some map properties.

Create a menu item and select the type of Zh OpenStreetMap - Map.

Select the appropriate map.

If you do not change any other fields - you'll get the map as you defined it.

For lists you have to enter IDs by semicolon as separator

Map Title	Map to display
Zoom	Map zoom
Width	Map Width
Height	Map Height
Placemark List	IDs of placemarks to show on map (for example, if it from different maps).
Exclude Placemark List	IDs of placemarks to not display on map
Placemark Group List	Group IDs for placemarks to show
Placemark Category List	Category IDs for placemarks to show
Route List	IDs of routes to show on map
Exclude Route List	IDs of routes to not display on map
Route Category List	Category IDs for routes to show
Path List	IDs of paths to show on map
Exclude Path List	IDs of paths to not display on map
Path Group List	Group IDs for paths to show
Path Category List	Category IDs for paths to show
Placemark for map center	Placemark ID for override map center
Action for centering placemark	Actions for centering placemark
Placemark Filter	Placemark Filter
Enable Support External Link to Placemark	Enable feature to create your own placemark list feature. See also in tutorials

See also

Plugin for component

Module for component

Language:	English  • русский