leaflet-map / README.md

README.md in Leaflet Map 2.11.2, at README.md

152 lines 5.9 KB

Raw Download Zip

1	Leaflet Map WordPress Plugin
2	========
3
4	![Leaflet](https://img.shields.io/badge/leaflet-1.3.4-green.svg?style=flat)
5	![WordPress](https://img.shields.io/badge/wordpress-4.9.7-green.svg?style=flat)
6
7	![Header Image](https://ps.w.org/leaflet-map/assets/banner-1544x500.png?rev=1693083)
8
9	Add a map generated with [](http://leafletjs.com/LeafletJS](http://leafletjs.com/](http://leafletjs.com/): an open-source JavaScript library for mobile-friendly interactive maps. Map tiles are provided by default through [](http://www.openstreetmap.org/OpenStreetMap](http://www.openstreetmap.org/](http://www.openstreetmap.org/), or [](https://www.mapquest.ca/MapQuest](https://www.mapquest.ca/](https://www.mapquest.ca/) (with an app key). Can be set per map with shortcode attributes or through the dashboard settings.
10
11	![Admin Screenshot](https://imgur.com/W4BGTif.jpg)
12
13	Installation
14	------------
15
16	* (simple) Install via the WordPress plugins page on your WordPress site: `/wp-admin/plugin-install.php` (search Leaflet)
17
18	* (needlessly complicated) Copy this repo (or download a release of it) into your WordPress plugins directory: `/wp-content/plugins/`. You might also need to name the directory 'leaflet-map', like so: `git clone https://github.com/bozdoz/wp-plugin-leaflet-map.git leaflet-map`
19
20
21	Available Shortcodes
22	--------------------
23
24	### [leaflet-map]
25
26	![Alternate map tiles](https://imgur.com/oURcNiX.jpg)
27
28	Height, width, latitude, longitude and zoom are the basic attributes:
29
30	```
31	[leaflet-map height=250 width=250 lat=44.67 lng=-63.61 zoom=5]
32	```
33
34	However, you can also just give it an address, and the chosen geocoder (default: Nominatum) will look it up for you:
35
36	```
37	[leaflet-map address="Oslo, Norway"]
38	```
39
40	#### [leaflet-map] Options:
41
42	Option \| Default
43	--- \| ---
44	`lat` and `lng` or `address` \| lat: 44.67, lng: -63.61
45	`zoom` \| 12
46	`height` \| 250
47	`width` \| 100%
48	`fit_markers` \| 0 (false)
49	`zoomcontrol` \| 0 (false)
50	`scrollwheel` \| 0 (false)
51	`doubleclickzoom` \| 0 (false)
52	`min_zoom` \| 0
53	`max_zoom` \| 20
54	`subdomains` \| abc
55	`attribution` \| ©Leaflet ©OpenStreetMap
56	`closepopuponclick` \| false
57	`trackresize` \| false
58	`boxzoom` \| true
59	`dragging` \| true
60	`keyboard` \| true
61
62	---
63
64	### [leaflet-image]
65
66	Much the same as leaflet-map above, but uses `src` for the source image.
67
68	---
69
70	### [leaflet-marker]
71
72	![Markers with HTML within a popup](https://imgur.com/ap38lwe.jpg)
73
74	Add a marker to any map by adding `[leaflet-marker]` after any `[leaflet-map]` shortcode. You can adjust the lat/lng in the same way, as well as some other basic functionality (popup message, draggable, visible on load). Also, if you want to add a link to a marker popup, use `[leaflet-marker]Message here: click here[/leaflet-marker]` and add a link like you normally would with the WordPress editor.
75
76	#### [leaflet-marker] Options:
77
78	Option \| Usage
79	--- \| ---
80	`lat` and `lng` or `address` \| Location on the map; defaults to map center; `lat`/`lng` are floats, `address` is a string
81	`draggable` \| Make a marker draggable (`boolean`); default `false`
82	`title` \| Add a hover-over message to your marker (different than popup)
83	`alt` \| Add an alt text to the marker image
84	`zindexoffset` \| Define the z-index for the marker image
85	`opacity` \| Define the css opacity for the marker image
86	`iconurl` \| Give a url for the marker image file
87	`iconsize` \| Set the size of the icon: e.g. "80,50" for 80px width 50px height
88	`iconanchor` \| Set the anchor position of the icon: e.g. "40,60" for 40px left 60px top
89	`shadowurl` \| Give a url for the marker shadow image file
90	`shadowsize` \| Set the size of the shadow: e.g. "80,50" for 80px width 50px height
91	`shadowanchor` \| Set the anchor position of the shadow: e.g. "40,60" for 40px left 60px top
92	`popupanchor` \| Set the anchor position of the popup: e.g. "40,60" for 40px left 60px top
93	`svg` \| Boolean for whether the marker should be created as an svg: default `false`
94	`background` \| Background color for an SVG marker (above)
95	`color` \| color of the SVG marker (above)
96	`iconclass` \| className for the marker image
97
98	---
99
100	### [leaflet-line]
101
102	![Fitted Colored Line](https://imgur.com/dixNDtF.jpg)
103
104	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.
105
106	Add a popup to the line by adding text to the content of the shortcode:
107
108	`[leaflet-line addresses="new york; chicago"]New York to Chicago[/leaflet-line]`
109
110	#### [leaflet-line] Options
111
112	Option \| Usage
113	--- \| ---
114	`addresses`, `latlngs`, or `coordinates` \| For geocoded addresses, latitude/longitude, or x/y coordinates for Image Maps (see [leaflet-image]); ex: `[leaflet-line latlngs="41, 29; 44, 18"]` or addresses: `[leaflet-line addresses="Istanbul; Sarajevo"]`
115	`fitbounds` \| Fit the map to the bounds of the line (instead of whatever center you gave the map originally)
116
117	---
118	### [leaflet-circle]
119
120	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 [](https://leafletjs.com/reference-1.3.4.html#path-optionLeaflet's Path options](https://leafletjs.com/reference-1.3.4.html#path-option](https://leafletjs.com/reference-1.3.4.html#path-option). Example: `[leaflet-circle message="max distance" lng=5.117909610271454 lat=52.097914814706094 radius=17500 color="#0DC143" fillOpacity=0.1]`.
121
122	### [leaflet-geojson]
123
124	[](https://gist.github.com/bozdoz/064a7101b95a324e8852fe9381ab9a18![Random GeoJSON created by me](https://imgur.com/fJktgtI.jpg)](https://gist.github.com/bozdoz/064a7101b95a324e8852fe9381ab9a18](https://gist.github.com/bozdoz/064a7101b95a324e8852fe9381ab9a18)
125
126	Or you can add a geojson shape via a url:
127
128	```
129	[leaflet-geojson src="https://rawgit.com/bozdoz/567817310f102d169510d94306e4f464/raw/2fdb48dafafd4c8304ff051f49d9de03afb1718b/map.geojson"]
130	```
131
132	#### [leaflet-geojson] Options
133
134	Option \| Usage
135	--- \| ---
136	`src` \| Source of the geojson file
137	`
138
139	### [leaflet-kml]
140
141	Same idea as geojson (above), but takes KML files and loads [](https://github.com/mapbox/togeojsonMapbox's togeojson library](https://github.com/mapbox/togeojson](https://github.com/mapbox/togeojson)
142
143	Contributing
144	-------------
145
146	[](https://github.com/bozdoz/wp-plugin-leaflet-map/blob/master/CONTRIBUTING.mdView Contribution guidelines](https://github.com/bozdoz/wp-plugin-leaflet-map/blob/master/CONTRIBUTING.md](https://github.com/bozdoz/wp-plugin-leaflet-map/blob/master/CONTRIBUTING.md)
147
148	Wish List
149	---------
150
151	* A map editor/shortcode generator (so users can see what they're adding to the page)
152