开发者 |
bozdoz
remigr gerital sal0max thibault-barrat hupe13 sardylan AK-digital jannefleischer |
---|---|
更新时间 | 2024年7月22日 10:54 |
捐献地址: | 去捐款 |
PHP版本: | 4.6 及以上 |
WordPress版本: | 6.6 |
版权: | GPLv2 |
版权网址: | 版权信息 |
[leaflet-map]
Lookup an address with:
[leaflet-map address="chicago"]
Know the latitude and longitude of a location? Use them (and a zoom level) with:
[leaflet-map lat=44.67 lng=-63.61 zoom=5]
Add a marker under your map shortcode, like so:
[leaflet-map] [leaflet-marker]
Want more? Make more (and fit the map to contain all of them):
[leaflet-map fitbounds] [leaflet-marker address="tokyo"] [leaflet-marker address="oslo"] [leaflet-marker address="cairo"] [leaflet-marker address="toronto"]
You can even add popups (to any shape) with their names:
[leaflet-map fitbounds] [leaflet-marker address="tokyo"]Tokyo[/leaflet-marker] [leaflet-marker address="oslo"]Oslo[/leaflet-marker] ...
Add a link to the popup messages the same way you would add any other link with the WordPress editor.
Other Shapes, GeoJSON, and KML
Add a line to the map by adding [leaflet-line]
. You can specify the postions with a list separated by semi-colon ;
or bar |
using lat/lng: [leaflet-line latlngs="41, 29; 44, 18"]
or addresses: [leaflet-line addresses="Istanbul; Sarajevo"]
, or x/y coordinates for image maps.
Add a circle to the map by adding [leaflet-circle]
. You can specify the position using lat
and lng
and the radius in meters using radius
. You can also customize the style using Leaflet's Path options. Example: [leaflet-circle message="max distance" lng=5.117909610271454 lat=52.097914814706094 radius=17500 color="#0DC143" fillOpacity=0.1]
.
Or you can add a geojson shape via a url (make sure you are allowed to access it if it's not hosted on your own server): [leaflet-geojson src="https://example.com/path/to.geojson"]
. Add custom popups with field names; try out the default src file and fields like so:
[leaflet-map fitbounds] [leaflet-geojson]{name}[/leaflet-geojson]
name
is a property on that GeoJSON, and it can be accessed with curly brackets and the property name.
Image Maps
Alternatively, you could use a plain image for visitors to zoom and pan around with [leaflet-image src="path/to/image/file.jpg"]
. See screenshots 3 - 5 for help setting that up.
More
Check out other examples on the Shortcode Helper page in the Leaflet Map admin section.
Check out the source code and more details on GitHub!
[leaflet-map]
and [leaflet-marker]
Yes! Convert the default marker into an svg with a shortcode like this: [leaflet-marker svg color="white" iconClass="fab fa-wordpress-simple" background="red"]
The iconClass
is perfect for adding a font-awesome icon.
Pass the style attributes to the respective shortcodes (see all options on LeafletJS):
[leaflet-line color="red" weight=10 dasharray="2,15" addresses="Halifax, NS; Tanzania" classname=marching-ants]
Yes, just give it a source URL: [leaflet-geojson src="https://example.com/path/to.geojson"]
It will also support leaflet geojson styles or geojson.io styles. Add a popup message with [leaflet-geojson popup_text="hello!"]
, or add HTML by adding it to the content of the shortcode: [leaflet-geojson]<a href="#">Link here, or use text from a feature property, like {title}</a>[/leaflet-geojson]
or identify a geojson property with popup_property
, and each shape will use its own popup text if available.
Sure!? Use the same attributes as leaflet-geojson (above), but use the [leaflet-kml]
or [leaflet-gpx]
shortcode.
Sure. Use the same attributes as leaflet-map, but use the [leaflet-wms]
shortcode; attributes include: src
, layer
, and crs
.
Yes: [leaflet-marker visible]Hello there![/leaflet-marker]
, where visible designates if it is visible on page load. Otherwise it is only visible when clicked.
Yes: Use [leaflet-image src="path/to/image/file.jpg"]
. See screenshots 3 - 5 for help setting that up.
Yes: Add your custom URL to the options in the admin page.
Use the marker format [leaflet-marker]Click here![/leaflet-marker]
and add a hyperlink like you normally would with the WordPress editor.
= I need more functions!
Take a look at the functions of Extensions for Leaflet Map.
For more FAQs, please visit the FAQ section on GitHub here.
lat
and lon
in osm_geocode with isset
tooltipAnchor
to geojson and marker shortcodes0
as a value for x/y and lat/lng coordinatespopupAnchor
without passing iconUrl
detect-retina
to plugin options and leaflet-map
shortcodevisible
att in popups.{attributes.email}
[leaflet-map address="las vegas" !boxZoom !doubleClickZoom !dragging !keyboard !scrollwheel !attribution !touchZoom]
boxZoom
touchZoom
to map attributesfit_markers
with fitbounds
, which now fits all shapes in map view[leaflet-marker draggable svg]
would be the same as [leaflet-marker draggable=1 svg=1]
[leaflet-circle]
src
in leaflet-image and leaflet-geojson/kmlwpautop
; fix was to remove spaces.[leaflet-kml]
;leaflet-image
shortcode![leaflet-map address="halifax, ns"]
.