Wiki-Quellcode von Map Macro
Zuletzt geändert von xwikiadmin am 2024/01/25 22:03
Zeige letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{box cssClass="floatinginfobox" title="**Contents**"}} | ||
| 2 | {{toc/}} | ||
| 3 | {{/box}} | ||
| 4 | |||
| 5 | == Description == | ||
| 6 | |||
| 7 | {{velocity}} | ||
| 8 | #set($macro = $doc.getObject('XWiki.WikiMacroClass')) | ||
| 9 | $doc.display("description", $macro) | ||
| 10 | #if($macro.getProperty("supportsInlineMode").value == 0) | ||
| 11 | |||
| 12 | {{box}}This macro does not supports inline mode.{{/box}} | ||
| 13 | #end | ||
| 14 | {{/velocity}} | ||
| 15 | |||
| 16 | {{info}} | ||
| 17 | You will need connectivity back and forth from the wiki to either OpenStreetMap or Google Maps servers for the macro to properly work. This might not be the case for a intranet in a corporate environment for example. | ||
| 18 | {{/info}} | ||
| 19 | |||
| 20 | == Content == | ||
| 21 | |||
| 22 | The content is optional and is used for displaying information in a popup activated on click. With Leaflet, if there is no content a click leads to the [[OpenStreetMap routing service>>https://www.openstreetmap.org/directions]]. | ||
| 23 | |||
| 24 | == Parameters == | ||
| 25 | |||
| 26 | |=Name|=Mandatory|=(% style="width:15%" %)Values|=Default|=Description | ||
| 27 | |**location**|**Yes**|*|-|Address of a place | ||
| 28 | |**width**|**No**|[0-9]+px or % |500px|The width in pixels or in percent the map container will take | ||
| 29 | |**height**|**No**|[0-9]+px or %|400px|The height in pixels or in percent the map container will take | ||
| 30 | |**zoom**|**No**|[0-9]+|15 (which is about the size of a block of houses)|The initial zoom the map will be focused at. Please refer to your provider API reference for intelligible values. | ||
| 31 | |**errors**|**No**|show / hide|show|Display a popup with the returned status code when it is anything other than "OK" | ||
| 32 | |**locationType**|**No**|address/latlng|address|{{info}}Since 1.2.3{{/info}} Specify the type of location, possible values : ##address## (default) or ##latlng## ( in this case the location should be a geographic coordinate like : 47.156427, 27.576387) | ||
| 33 | |**tiles**|**No**||OSM tile server|URL scheme of the tile provider. Example: [[https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png]] (default). See also: [[OpenStreetMap tile servers>>https://wiki.openstreetmap.org/wiki/Tile_servers]]. The tile provider can be set either from the map macro administration page (see below) or at the macro level. | ||
| 34 | |||
| 35 | == Administration == | ||
| 36 | |||
| 37 | {{info}} | ||
| 38 | Choose the map library (either Leaflet (default) or Google Maps) and the tile server directly from the map macro administration section. To use the Google Maps JavaScript API or the Mapbox tile server, you must register your app project on the Google API Console or on the Mapbox console and get a [[Google API key>>path:https://developers.google.com/maps/documentation/javascript/get-api-key]] or a [[Mapbox token>>https://www.mapbox.com/help/how-access-tokens-work/]], which you can add to your app. | ||
| 39 | {{/info}} | ||
| 40 | |||
| 41 | == Examples == | ||
| 42 | |||
| 43 | === Map with default OpenStreetMap tiles === | ||
| 44 | |||
| 45 | Code: | ||
| 46 | |||
| 47 | {{code}} | ||
| 48 | {{map location="35 rue Beaubourg, 75003 Paris, France" /}} | ||
| 49 | {{/code}} | ||
| 50 | |||
| 51 | Result: | ||
| 52 | |||
| 53 | {{map location="35 rue Beaubourg, 75003 Paris, France" /}} | ||
| 54 | |||
| 55 | === Map using geographic coordinates and percent width === | ||
| 56 | |||
| 57 | Code: | ||
| 58 | |||
| 59 | {{code}} | ||
| 60 | {{map location="47.156427, 27.576387" locationType="latlng" width="50%" /}} | ||
| 61 | {{/code}} | ||
| 62 | |||
| 63 | Result: | ||
| 64 | |||
| 65 | {{map location="47.156427, 27.576387" width="50%" locationType="latlng" /}} | ||
| 66 | |||
| 67 | === Map with information popup === | ||
| 68 | |||
| 69 | Code: | ||
| 70 | |||
| 71 | {{code}} | ||
| 72 | {{map location="Rue des Thermopyles, 75014 Paris" width="400px" height="300px"}} | ||
| 73 | A beautiful street in Paris | ||
| 74 | {{/map}} | ||
| 75 | {{/code}} | ||
| 76 | |||
| 77 | Result: | ||
| 78 | |||
| 79 | {{map location="Rue des Thermopyles, 75014 Paris" width="400px" height="300px"}} | ||
| 80 | A beautiful street in Paris | ||
| 81 | {{/map}} | ||
| 82 | |||
| 83 | === Map with custom tiles === | ||
| 84 | |||
| 85 | Code: | ||
| 86 | |||
| 87 | {{code}} | ||
| 88 | {{map location="35 rue Beaubourg, 75003 Paris" tiles="http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg" /}} | ||
| 89 | {{/code}} | ||
| 90 | |||
| 91 | Result: | ||
| 92 | |||
| 93 | {{map location="35 rue Beaubourg, 75003 Paris" tiles="http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg" /}} | ||
| 94 | |||
| 95 | === Map with Google Maps tiles === | ||
| 96 | |||
| 97 | In order to use the Google Maps tiles, head to the map macro administration section as explained above, and select "Google Maps" library. In that case, you don't need to fill in any tile server as it is automatically set to the Google Maps one. | ||
| 98 | |||
| 99 | == Google Maps Events == | ||
| 100 | |||
| 101 | If you use the Google Maps library, the events listed below are available. | ||
| 102 | |||
| 103 | |=Name|=Description | ||
| 104 | |GMAPS:OK|Indicates that no errors occurred; the address was successfully parsed and at least one geocode was returned | ||
| 105 | |GMAPS:ZERO_RESULTS|Indicates that the geocode was successful but returned no results. This may occur if the geocoder was passed a non-existent address. | ||
| 106 | |GMAPS:OVER_QUERY_LIMIT|Indicates that you are over your quota. | ||
| 107 | |GMAPS:REQUEST_DENIED|Indicates that your request was denied. | ||
| 108 | |GMAPS:INVALID_REQUEST|Generally indicates that the query (address, components or latlng) is missing. | ||
| 109 | |GMAPS:UNKNOWN_ERROR|Indicates that the request could not be processed due to a server error. The request may succeed if you try again. |