Template:Zh OpenStreetMap Description Map: Difference between revisions
m (→Creating Map) |
m (→Integration) |
||
(24 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
== Creating Map == | == Creating Map == | ||
We turn to the menu "Maps". | |||
[[File:OSM-Map-List.png]] | [[File:OSM-Map-List.png]] | ||
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 === | |||
[[File:OSM-Map-Detail-Map.png]] | [[File:OSM-Map-Detail-Map.png]] | ||
{|class="zhpropertytable" | |||
|- | |||
|class="zhproperty"|Title||class="zhdescription"|Map title | |||
|- | |||
|class="zhproperty"|Description||class="zhdescription"|Description | |||
|- | |||
|class="zhproperty"|Latitude||class="zhdescription"|Map center Latitude | |||
|- | |||
|class="zhproperty"|Longitude||class="zhdescription"|Map center Longitude | |||
|- | |||
|class="zhproperty"|Width||class="zhdescription"|Map Width,<br /> | |||
<p class="zh-text-tip">if set to 0, map will be 100% wide</p> | |||
|- | |||
|class="zhproperty"|Height||class="zhdescription"|Map Height<br /> | |||
<p class="zh-text-tip">if set to 0, map will be 100% height.<br /> | |||
You can apply [[Zh Template Map FullScreen]] to your map page to show map in full screen or for the other cases</p> | |||
|} | |||
=== Map Details === | |||
[[File:OSM-Map-Detail-Details-1.png]] | [[File:OSM-Map-Detail-Details-1.png]] | ||
Line 12: | Line 42: | ||
[[File:OSM-Map-Detail-Details-2.png]] | [[File:OSM-Map-Detail-Details-2.png]] | ||
{|class="zhpropertytable" | |||
|- | |||
|class="zhproperty"|Show Title as Placemark||class="zhdescription"|Show map title as a placemark<br /> | |||
* '''No''' - Do not show marker | |||
* '''Simple''' - Marker without animation | |||
* '''Bounce''' - Marker with animation (Bounce) | |||
* '''Elastic Bounce''' - Marker with animation (Elastic Bounce) | |||
|- | |||
|class="zhproperty"|Open Popup||class="zhdescription"|Open Popup for map title immediately | |||
|- | |||
|class="zhproperty"|Disable AutoPan||class="zhdescription"|Disable AutoPan when open popup | |||
|- | |||
|class="zhproperty"|Map Bounds||class="zhdescription"|Map bounds to protect navigation outside map<br /> | |||
You have to enter '''Latitude1,Longitude1;Latitude2,Longitude2'''<br /> | |||
ie pair of coordinates separated by semicolon and in one coordinate has values separated by comma<br /> | |||
The first coordinate - left bottom, the second - right top of bounds | |||
|- | |||
|class="zhproperty"|Zoom||class="zhdescription"|Initial Map Zoom | |||
|- | |||
|class="zhproperty"|Min Zoom||class="zhdescription"|Min Zoom for Map | |||
|- | |||
|class="zhproperty"|Max Zoom||class="zhdescription"|Max Zoom for Map | |||
|- | |||
|class="zhproperty"|Draggable||class="zhdescription"|Enable/disable Map dragging | |||
|- | |||
|class="zhproperty"|Map Type||class="zhdescription"|Initial Map Type<br /> | |||
* '''OpenStreetMap''' | |||
* '''OpenTopoMap''' | |||
* '''First Custom Map Type''' | |||
|- | |||
|class="zhproperty"|OpenStreetMap Layer||class="zhdescription"|The enabled/disabled state of the OpenStreetMap Layer and ability to use Map Type Control to switch to that layer | |||
|- | |||
|class="zhproperty"|OpenTopoMap Layer||class="zhdescription"|The enabled/disabled state of the OpenTopoMap Layer and ability to use Map Type Control to switch to that layer | |||
|- | |||
|class="zhproperty"|Allow Custom Map Types||class="zhdescription"|The enabled/disabled using custom map type and ability to use Map Type Control to switch to that layers | |||
|- | |||
|class="zhproperty"|Custom Map Types List||class="zhdescription"|List of custom map types ID for using on map, separator ''';'''<br /> | |||
Example: 1;2;5 <br /> | |||
If you set '''Map Type''' to '''First Custom Map Type''', then first ID will be default map type | |||
|- | |||
|class="zhproperty"|KML Layer||class="zhdescription"|URL of the KML Layer, that would be displayed on the map | |||
|- | |||
|class="zhproperty"|Category||class="zhdescription"|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 === | |||
[[File:OSM-Map-Detail-Header.png]] | [[File:OSM-Map-Detail-Header.png]] | ||
{|class="zhpropertytable" | |||
|- | |||
|class="zhproperty"|Header HTML-text||class="zhdescription"|HTML text on top of the map | |||
|- | |||
|class="zhproperty"|Show Header Separator||class="zhdescription"|Show Separator after Header HTML text | |||
|} | |||
=== Map Footer === | |||
[[File:OSM-Map-Detail-Footer.png]] | [[File:OSM-Map-Detail-Footer.png]] | ||
{|class="zhpropertytable" | |||
|- | |||
|class="zhproperty"|Show Footer Separator||class="zhdescription"|Show Separator before Footer HTML text | |||
|- | |||
|class="zhproperty"|Footer HTML-text||class="zhdescription"|HTML text on bottom of the map | |||
|} | |||
=== Map Controls === | |||
There are three sliders in this section | |||
[[File:OSM-Map-Detail-MapControls.png]] | |||
The first slider is | |||
[[File:OSM-Map-Detail-MapControls-1.png]] | [[File:OSM-Map-Detail-MapControls-1.png]] | ||
[[File:OSM-Map-Detail-MapControls-2.png]] | |||
{|class="zhpropertytable" | |||
|- | |||
|class="zhproperty"|Zoom Control||class="zhdescription"|The enabled/disabled state of the Zoom Control | |||
|- | |||
|class="zhproperty"|Scale Control||class="zhdescription"|The enabled/disabled state of the Scale Control | |||
|- | |||
|class="zhproperty"|Scale Control: Maximum width||class="zhdescription"|Maximum width of the control in pixels. The width is set dynamically to show round values (e.g. 100, 200, 500) | |||
|- | |||
|class="zhproperty"|Scale Control: metric||class="zhdescription"|Whether to show the metric scale line (m/km) | |||
|- | |||
|class="zhproperty"|Scale Control: imperial||class="zhdescription"|Whether to show the imperial scale line (mi/ft) | |||
|- | |||
|class="zhproperty"|Scale Control: update when idle||class="zhdescription"|If true, the control is updated on move end, otherwise it's always up-to-date (updated on move) | |||
|- | |||
|class="zhproperty"|Double Click Zoom||class="zhdescription"|Enables/disables zoom and center on double click | |||
|- | |||
|class="zhproperty"|Scroll Wheel Zoom||class="zhdescription"|The enabled/disabled state of the scrollwheel zooming on the map | |||
|- | |||
|class="zhproperty"|Hide Single Base Layer in Map Type Control||class="zhdescription"|If true, the base layers in the control will be hidden when there is only one | |||
|- | |||
|class="zhproperty"|Home Button||class="zhdescription"|The enabled/disabled feature to reset map center and/or zoom to initial value | |||
|- | |||
|class="zhproperty"|Overlay Opacity||class="zhdescription"|The enabled/disabled feature to change opacity for Ground Overlays | |||
|} | |||
The second slider is | |||
[[File:OSM-Map-Detail-MapControls-Geocoder.png]] | [[File:OSM-Map-Detail-MapControls-Geocoder.png]] | ||
{|class="zhpropertytable" | |||
|- | |||
|class="zhproperty"|Geocoder Control||class="zhdescription"|The enabled/disabled state of the Geocoder Control | |||
|- | |||
|class="zhproperty"|Collapse Geocoder||class="zhdescription"|Collapse control unless hovered or clicked | |||
|- | |||
|class="zhproperty"|Provider||class="zhdescription"|Geocoding service used by the control to perform the actual geocoding queries | |||
|} | |||
The third slider is | |||
[[File:OSM-Map-Detail-MapControls-Position-1.png]] | [[File:OSM-Map-Detail-MapControls-Position-1.png]] | ||
[[File:OSM-Map-Detail-MapControls-Position-2.png]] | |||
{|class="zhpropertytable" | |||
|- | |||
|class="zhproperty"|Map Type Control||class="zhdescription"|Position on a map | |||
|- | |||
|class="zhproperty"|Zoom Control||class="zhdescription"|Position on a map | |||
|- | |||
|class="zhproperty"|Scale Control||class="zhdescription"|Position on a map | |||
|- | |||
|class="zhproperty"|Geolocation Control||class="zhdescription"|Position on a map | |||
|- | |||
|class="zhproperty"|Geocoder Control||class="zhdescription"|Position on a map | |||
|- | |||
|class="zhproperty"|Placemark List Button||class="zhdescription"|Position on a map | |||
|- | |||
|class="zhproperty"|Home Button||class="zhdescription"|Position on a map | |||
|- | |||
|class="zhproperty"|Overlay Opacity||class="zhdescription"|Position on a map | |||
|} | |||
=== Map Properties for Placemarks === | |||
[[File:OSM-Map-Detail-Placemarks-1.png]] | [[File:OSM-Map-Detail-Placemarks-1.png]] | ||
Line 39: | Line 211: | ||
[[File:OSM-Map-Detail-Placemarks-2.png]] | [[File:OSM-Map-Detail-Placemarks-2.png]] | ||
{|class="zhpropertytable" | |||
|- | |||
|class="zhproperty"|Placemark ordering||class="zhdescription"|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)''' | |||
|- | |||
|class="zhproperty"|Auto-center and auto-zoom||class="zhdescription"|Calculate and set zoom and map center to show all placemarks | |||
|- | |||
|class="zhproperty"|Show placemarks in cluster||class="zhdescription"|Create cluster for markers | |||
|- | |||
|class="zhproperty"|Marker Cluster Zoom Level||class="zhdescription"|Zoom Level on which Clusterer starts group markers | |||
|- | |||
|class="zhproperty"|Group Placemarks in Cluster by Group Property||class="zhdescription"|Create cluster for each group (and you can override cluster icon)<br />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) | |||
|- | |||
|class="zhproperty"|Place overlapping placemarks on a spiral||class="zhdescription"|Enable feature to show overlapped placemarks on a spiral or create special list | |||
|- | |||
|class="zhproperty"|Zoom on cluster click||class="zhdescription"|Zoom map to fit cluster bounds | |||
|- | |||
|class="zhproperty"|Show cluster coverage||class="zhdescription"|When mouse over a cluster it shows the bounds of its markers | |||
|- | |||
|class="zhproperty"|Show placemark creation information||class="zhdescription"|You can show information about user and date of placemark creation<br /> | |||
* '''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 === | |||
[[File:OSM-Map-Detail-PlacemarkList.png]] | [[File:OSM-Map-Detail-PlacemarkList.png]] | ||
{|class="zhpropertytable" | |||
|- | |||
|class="zhproperty"|Width||class="zhdescription"|Placemark List Width in pixels<br /> | |||
<p class="zh-text-tip">If set 0 then you've got 100% width.<br /> | |||
It can be useful in bottom position and 100% map width</p> | |||
|- | |||
|class="zhproperty"|Height||class="zhdescription"|Placemark List Height in pixels | |||
|- | |||
|class="zhproperty"|Position||class="zhdescription"|Values<br /> | |||
* '''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<br /> | |||
For example, | |||
<pre> | |||
<ul id="OMapsMarkerUL" style="list-style-type: none;"></ul> | |||
</pre> | |||
|- | |||
|class="zhproperty"|Style||class="zhdescription"|Values<br /> | |||
* '''Simple''' - predefined in CSS-file | |||
* '''Advanced''' - predefined in CSS-file | |||
* '''External''' - you can define it in your template | |||
|- | |||
|class="zhproperty"|Background Color||class="zhdescription"|Background Color<br /> | |||
Example: #EAEAEA<br /> | |||
As for gradient in my example, I've got it from internet sites. When you specify background color '''#E6E6E6''', I add into style line | |||
<pre> | |||
background: #E6E6E6 | |||
</pre> | |||
I've got this example<br /> | |||
<pre> | |||
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; | |||
</pre> | |||
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 <br /> | |||
<pre> | |||
#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; | |||
</pre> | |||
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. | |||
|- | |||
|class="zhproperty"|Action by Click||class="zhdescription"|Action to do when you Click on link<br /> | |||
* '''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 | |||
|- | |||
|class="zhproperty"|Placemark List Content||class="zhdescription"|Text from which placemark list contains<br /> | |||
* '''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 | |||
|- | |||
|class="zhproperty"|Appearance||class="zhdescription"|Appearance of placemark list<br /> | |||
* '''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 | |||
|- | |||
|class="zhproperty"|Search placemark field||class="zhdescription"|Enable feature to search by autocomplete placemarks in placemark list | |||
|} | |||
=== Groups === | |||
[[File:OSM-Map-Detail-Groups-1.png]] | [[File:OSM-Map-Detail-Groups-1.png]] | ||
Line 48: | Line 370: | ||
[[File:OSM-Map-Detail-Groups-2.png]] | [[File:OSM-Map-Detail-Groups-2.png]] | ||
{|class="zhpropertytable" | |||
|- | |||
|class="zhproperty"|Group Control||class="zhdescription"|Position and type of list of group, that would be displayed for marker management<br /> | |||
* '''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) | |||
|- | |||
|class="zhproperty"|Group Type||class="zhdescription"|Behavior of group list<br /> | |||
* '''Toggle Group''' | |||
* '''Only One Active Group''' | |||
|- | |||
|class="zhproperty"|Manage Placemarks||class="zhdescription"|Enable ability to manage placemarks by Group List | |||
|- | |||
|class="zhproperty"|Synchronize with placemark list||class="zhdescription"|Show/Hide placemarks in placemark list depends on group state | |||
|- | |||
|class="zhproperty"|Manage Paths||class="zhdescription"|Enable ability to manage paths by Group List | |||
|- | |||
|class="zhproperty"|Group ordering||class="zhdescription"|Group order in list | |||
* '''Group title''' | |||
* '''Category Title and ordering''' | |||
* '''User ordering index''' | |||
|- | |||
|class="zhproperty"|Group Column Width||class="zhdescription"|Column width for the left or right position of list group | |||
|- | |||
|class="zhproperty"|Show Group||class="zhdescription"|Show text, icon of group in list of group<br /> | |||
* '''Text''' | |||
* '''Icon''' | |||
* '''Text and Icon''' | |||
|- | |||
|class="zhproperty"|Display Show All and Hide All buttons||class="zhdescription"|Show buttons to show/hide all groups by one click<br /> | |||
* '''No''' | |||
* '''Text''' | |||
* '''Icon''' | |||
* '''Text and Icon''' | |||
|- | |||
|class="zhproperty"|Search group field||class="zhdescription"|Display search field to find group in group list | |||
|- | |||
|class="zhproperty"|Group CSS||class="zhdescription"|Type of group decoration | |||
There are two predefined style<br /> | |||
and one (external) – for you, which you can set style in you template. | |||
ID for tags depend on Group CSS field. | |||
See details in [[Zh_OpenStreetMap_Description#Grouping|Marker Grouping]] | |||
|- | |||
|class="zhproperty"|Group List Title||class="zhdescription"|Group List Title | |||
|- | |||
|class="zhproperty"|Top Description||class="zhdescription"|Description on top of the list | |||
|- | |||
|class="zhproperty"|Show Top-Separator||class="zhdescription"|The enabled/disabled state of Separator on top of the list | |||
|- | |||
|class="zhproperty"|Show Bottom-Separator||class="zhdescription"|The enabled/disabled state of Separator on botom of the list | |||
|- | |||
|class="zhproperty"|Bottom Description||class="zhdescription"|Description on bottom of the list | |||
|} | |||
=== Route === | |||
[[File:OSM-Map-Detail-Route.png]] | [[File:OSM-Map-Detail-Route.png]] | ||
{|class="zhpropertytable" | |||
|- | |||
|class="zhproperty"|Draggable||class="zhdescription"|The enabled/disabled ability route to be draggable | |||
|- | |||
|class="zhproperty"|Show Route Panel||class="zhdescription"|Enable show route details | |||
|- | |||
|class="zhproperty"|Travel Mode: Driving||class="zhdescription"|The enabled/disabled ability to be show this travel mode | |||
|- | |||
|class="zhproperty"|Travel Mode: Walking||class="zhdescription"|The enabled/disabled ability to be show this travel mode | |||
|- | |||
|class="zhproperty"|Travel Mode: Bicycling||class="zhdescription"|The enabled/disabled ability to be show this travel mode | |||
|- | |||
|class="zhproperty"|Travel Mode: Public Transit||class="zhdescription"|The enabled/disabled ability to be show this travel mode | |||
|- | |||
|class="zhproperty"|Unit System||class="zhdescription"|Use this unit system option when create route | |||
* Metric System (kilometers) | |||
* Imperial (English) System (miles) | |||
|} | |||
=== Advanced Options === | |||
[[File:OSM-Map-Detail-AdvancedOptions-1.png]] | [[File:OSM-Map-Detail-AdvancedOptions-1.png]] | ||
Line 60: | Line 463: | ||
[[File:OSM-Map-Detail-AdvancedOptions-3.png]] | [[File:OSM-Map-Detail-AdvancedOptions-3.png]] | ||
{|class="zhpropertytable" | |||
|- | |||
|class="zhproperty"|Show hover text||class="zhdescription"|Show hover text for map objects (placemarks, paths) | |||
|- | |||
|class="zhproperty"|Hover Popup Style||class="zhdescription"|Hover Popup style | |||
|- | |||
|class="zhproperty"|Display Popup Content||class="zhdescription"|Display Popup Content | |||
* '''Default''' - display as popup | |||
* '''Panel''' - display content in panel (on its tabs) | |||
|- | |||
|class="zhproperty"|Panel width||class="zhdescription"|Panel width in pixels | |||
|- | |||
|class="zhproperty"|Open Panel||class="zhdescription"|Initial Panel state | |||
|- | |||
|class="zhproperty"|Loading map objects dynamically||class="zhdescription"|Enable feature to load placemarks by AJAX<br /> | |||
* '''No''' | |||
* '''JQuery''' | |||
* '''Mootools''' | |||
|- | |||
|class="zhproperty"|Load type||class="zhdescription"|Type of loading placemarks, ie load it all, or depends on some conditions<br /> | |||
* '''All''' | |||
* '''All (two steps: use map bounds, all the rest)''' | |||
* '''Use map bounds''' | |||
|- | |||
|class="zhproperty"|Buffer size for placemarks||class="zhdescription"|You can load placemarks by parts | |||
|- | |||
|class="zhproperty"|Buffer size for paths ||class="zhdescription"|You can load paths by parts | |||
|- | |||
|class="zhproperty"|Loading content data dynamically||class="zhdescription"|Enable feature to load map objects popup content by AJAX<br /> | |||
* '''No''' | |||
* '''JQuery''' | |||
* '''Mootools''' | |||
Ie your page can contains placemark or path creation code, but all popup content can be loaded dynamically.<br /> | |||
If placemarks loaded by AJAX it by default loads content dynamically too. | |||
|- | |||
|class="zhproperty"|Placemark Filter||class="zhdescription"|Restriction displaying placemarks on some rules. | |||
|- | |||
|class="zhproperty"|Allow to user enter placemarks||class="zhdescription"|Enable registered users to create and/or alter placemarks on map. | |||
|- | |||
|class="zhproperty"|Insert Allowed||class="zhdescription"|User can create new placemarks | |||
|- | |||
|class="zhproperty"|Update Allowed||class="zhdescription"|User can update existing placemarks | |||
|- | |||
|class="zhproperty"|Delete Allowed||class="zhdescription"|User can delete existing placemarks | |||
|- | |||
|class="zhproperty"|New Placemark State||class="zhdescription"|Placemark Status for created user placemark. | |||
|- | |||
|class="zhproperty"|New Contact State||class="zhdescription"|Contact Status for created user contact (if enabled contact integration). | |||
|- | |||
|class="zhproperty"|Show Icon Type Selector for New Placemark||class="zhdescription"|The enabled/disabled state of selecting Icon Type when user creates placemark. | |||
|- | |||
|class="zhproperty"|CSS Class||class="zhdescription"|The class name for map div tag | |||
|- | |||
|class="zhproperty"|Additional CSS styles for loading||class="zhdescription"|List of CSS style files for loading when map is loading, separated by new line or semicolon | |||
|- | |||
|class="zhproperty"|Additional JavaScript files for loading||class="zhdescription"|List of JavaScript files for loading when map is loading, separated by new line or semicolon | |||
|- | |||
|class="zhproperty"|Placemark Rating||class="zhdescription"|Enable Placemark rating feature. | |||
* '''No''' | |||
* '''JQuery''' | |||
* '''Mootools''' | |||
|- | |||
|class="zhproperty"|Map text override||class="zhdescription"|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 === | |||
[[File:OSM-Map-Detail-Geolocation.png]] | [[File:OSM-Map-Detail-Geolocation.png]] | ||
{|class="zhpropertytable" | |||
|- | |||
|class="zhproperty"|Auto Positioning||class="zhdescription"|Auto Positioning when map is loading | |||
|- | |||
|class="zhproperty"|Geolocation Control||class="zhdescription"|Show Geolocation Control | |||
|- | |||
|class="zhproperty"|Geolocation Button Style||class="zhdescription"|Geolocation Button Style<br /> | |||
* Icon | |||
* Text | |||
* Icon and Text | |||
|} | |||
=== Integration === | |||
[[File:OSM-Map-Detail-Integration.png]] | [[File:OSM-Map-Detail-Integration.png]] | ||
{|class="zhpropertytable" | |||
|- | |||
|class="zhproperty"|Use contacts||class="zhdescription"|The enabled/disabled state of using contacts<br /> | |||
You can enable using contact information and associate your placemark with contact to display contact information in placemark popup. | |||
|- | |||
|class="zhproperty"|Contact Details||class="zhdescription"|You can enter names of attributes to show. Separator is ''';'''<br /> | |||
Acceptable values<br /> | |||
* 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 | |||
|- | |||
|class="zhproperty"|Use users||class="zhdescription"|The enabled/disabled state of using users<br /> | |||
You can enable using user information and associate your placemark with user to display user information in placemark popup. | |||
|- | |||
|class="zhproperty"|Allow open Google Maps||class="zhdescription"|Enable/disable feature to open Google Maps (link or button in placemark popup) | |||
|- | |||
|class="zhproperty"|Allow open Google Maps for map center placemark||class="zhdescription"|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 === | |||
[[File:OSM-Map-Detail-Display.png]] | [[File:OSM-Map-Detail-Display.png]] |
Latest revision as of 14:06, 23 December 2019
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. |
Map Details
Show Title as Placemark | Show map title as a placemark
|
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 |
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 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 |
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 |
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
|
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
|
Map Properties for Placemark List
Width | Placemark List Width in pixels If set 0 then you've got 100% width. |
Height | Placemark List Height in pixels |
Position | Values
For example, <ul id="OMapsMarkerUL" style="list-style-type: none;"></ul> |
Style | Values
|
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;
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
|
Placemark List Content | Text from which placemark list contains
|
Appearance | Appearance of placemark list
|
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
|
Group Type | Behavior of group list
|
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 Column Width | Column width for the left or right position of list group |
Show Group | Show text, icon of group in list of group
|
Display Show All and Hide All buttons | Show buttons to show/hide all groups by one click
|
Search group field | Display search field to find group in group list |
Group CSS | Type of group decoration
There are two predefined style |
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
|
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
|
Panel width | Panel width in pixels |
Open Panel | Initial Panel state |
Loading map objects dynamically | Enable feature to load placemarks by AJAX
|
Load type | Type of loading placemarks, ie load it all, or depends on some conditions
|
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
Ie your page can contains placemark or path creation code, but all popup content can be loaded dynamically. |
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.
|
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
|
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
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
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
|