← All changes | README.md +148 -43 2.16.2 → 3.4.5 View file →

		@@ -1,8 +1,8 @@
1	1	# Leaflet Map WordPress Plugin
2	2
3		-
4		-
	3	+
	4	+
5	5
6	6	
7	7
8	8	Add a map generated with [LeafletJS](http://leafletjs.com/): an open-source JavaScript library for mobile-friendly interactive maps. Map tiles are provided by default through [OpenStreetMap](http://www.openstreetmap.org/), or [MapQuest](https://www.mapquest.ca/) (with an app key). Can be set per map with shortcode attributes or through the dashboard settings.
		@@ -20,8 +20,10 @@
20	20	- [[leaflet-map]](#leaflet-map)
21	21	- [[leaflet-map] Options:](#leaflet-map-options)
22	22	- [[leaflet-image]](#leaflet-image)
23	23	- [[leaflet-image] Options:](#leaflet-image-options)
	24	+ - [[leaflet-wms]](#leaflet-wms)
	25	+ - [[leaflet-wms] Options:](#leaflet-wms-options)
24	26	- [[leaflet-marker]](#leaflet-marker)
25	27	- [[leaflet-marker] Options:](#leaflet-marker-options)
26	28	- [[leaflet-line]](#leaflet-line)
27	29	- [[leaflet-line] Options](#leaflet-line-options)
		@@ -31,8 +33,11 @@
31	33	- [[leaflet-geojson]](#leaflet-geojson)
32	34	- [[leaflet-geojson] Options](#leaflet-geojson-options)
33	35	- [[leaflet-kml]](#leaflet-kml)
34	36	- [[leaflet-gpx]](#leaflet-gpx)
	37	+ - [[leaflet-scale]](#leaflet-scale)
	38	+ - [[leaflet-image-overlay]](#leaflet-image-overlay)
	39	+ - [[leaflet-video-overlay]](#leaflet-video-overlay)
35	40	- [Frequently Asked Questions](#frequently-asked-questions)
36	41	- [How Can I Add another Leaflet Plugin?](#how-can-i-add-another-leaflet-plugin)
37	42	- [Contributing](#contributing)
38	43	- [Wish List](#wish-list)
		@@ -38,12 +43,10 @@
38	43	- [Wish List](#wish-list)
39	44
40	45	## Installation
41	46
42		-- (simple) Install via the WordPress plugins page on your WordPress site: `/wp-admin/plugin-install.php` (search Leaflet)
	47	+- Install via the WordPress plugins page on your WordPress site: `/wp-admin/plugin-install.php` (search Leaflet)
43	48
44		-- (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`
45		-
46	49	## General Usage
47	50
48	51	```
49	52	[leaflet-map address="Manhattan, New York"]
		@@ -69,20 +72,13 @@
69	72	1. fork/clone the repo, and
70	73	1. execute this command from the repo's root directory in your terminal:
71	74
72	75	```bash
73		-docker-compose up
	76	+docker compose up
74	77	```
75	78
76		-You should also have node and NPM installed if you want to edit JavaScript files, and need to minify them:
	79	+You can also use NPM scripts to interact with Docker, if you make changes to Docker-related files:
77	80
78		-```bash
79		-npm install
80		-npm run minify
81		-```
82		-
83		-You can also use these NPM scripts to interact with Docker, if you make changes to Docker-related files:
84		-
85	81	To start:
86	82
87	83	```bash
88	84	npm start
		@@ -113,30 +109,47 @@
113	109	```
114	110	[leaflet-map address="Oslo, Norway"]
115	111	```
116	112
	113	+When using the OpenStreetMap Nominatim geocoder, the plugin sends a contact email in the request user agent. By default this uses the site admin email, but you can override it in the plugin settings with `Nominatim Contact Email (optional)` or in code with the `leaflet_map_nominatim_contact_email` filter.
	114	+
	115	+```php
	116	+add_filter('leaflet_map_nominatim_contact_email', function ($email) {
	117	+ return '[email protected]';
	118	+});
	119	+```
	120	+
117	121	#### [leaflet-map] Options:
118	122
119		-| Option | Default |
120		-| ---------------------------- | ----------------------- |
121		-| `lat` and `lng` or `address` | lat: 44.67, lng: -63.61 |
122		-| `zoom` | 12 |
123		-| `height` | 250 |
124		-| `width` | 100% |
125		-| `fitbounds` | 0 (false) |
126		-| `zoomcontrol` | 0 (false) |
127		-| `scrollwheel` | 0 (false) |
128		-| `doubleclickzoom` | 0 (false) |
129		-| `min_zoom` | 0 |
130		-| `max_zoom` | 20 |
131		-| `subdomains` | abc |
132		-| `attribution` | ©Leaflet ©OpenStreetMap |
133		-| `closepopuponclick` | false |
134		-| `trackresize` | false |
135		-| `boxZoom` | true |
136		-| `dragging` | true |
137		-| `keyboard` | true |
138		-| `maxbounds` | null |
	123	+| Option | Default |
	124	+| ---------------------------- | ---------------------------------------------------- |
	125	+| `lat` and `lng` or `address` | lat: 44.67, lng: -63.61 |
	126	+| `zoom` | 12 |
	127	+| `height` | 250 |
	128	+| `width` | 100% |
	129	+| `fitbounds` | 0 (false) |
	130	+| `zoomcontrol` | 0 (false) |
	131	+| `scrollwheel` | 0 (false) |
	132	+| `doubleclickzoom` | 0 (false) |
	133	+| `min_zoom` | 0 |
	134	+| `max_zoom` | 20 |
	135	+| `subdomains` | abc |
	136	+| `attribution` | ©Leaflet ©OpenStreetMap |
	137	+| `closepopuponclick` | false |
	138	+| `trackresize` | false |
	139	+| `boxZoom` | true |
	140	+| `dragging` | true |
	141	+| `keyboard` | true |
	142	+| `maxbounds` | null |
	143	+| `detect-retina` | 0 (false) |
	144	+| `tileurl` | 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' |
	145	+| `subdomains` | 'abc' |
	146	+| `tap` | true |
	147	+| `tilesize` | 256 |
	148	+| `mapid` | null |
	149	+| `accesstoken` | null |
	150	+| `zoomoffset` | 0 |
	151	+| `nowrap` | false |
139	152
140	153	---
141	154
142	155	### [leaflet-image]
		@@ -166,11 +179,44 @@
166	179	| `doubleclickzoom` | 0 (false) |
167	180	| `min_zoom` | 0 |
168	181	| `max_zoom` | 20 |
169	182	| `attribution` | ©Leaflet ©OpenStreetMap |
	183	+| `x` | 0 |
	184	+| `y` | 0 |
170	185
171	186	---
172	187
	188	+### [leaflet-wms]
	189	+
	190	+Much the same as leaflet-map above, but for wms services and uses `src` for the service url,
	191	+`layer` for the layer name and `crs` for the coordination system (only supported by
	192	+leaflet: EPSG:3857 and EPSG:4326).
	193	+```
	194	+[leaflet-wms source="https://your/wms/service?" layer="yourLayer" crs="EPSG:3857" zoom=1]
	195	+```
	196	+
	197	+#### [leaflet-wms] Options:
	198	+
	199	+| Option | Default |
	200	+| ----------------- | ----------------------------------------- |
	201	+| `src` | https://ows.mundialis.de/services/service? |
	202	+| `layer ` | TOPO-OSM-WMS |
	203	+| `crs ` | EPSG:3857 |
	204	+| `zoom` | 12 |
	205	+| `height` | 250 |
	206	+| `width` | 100% |
	207	+| `fitbounds` | 0 (false) |
	208	+| `zoomcontrol` | 0 (false) |
	209	+| `scrollwheel` | 0 (false) |
	210	+| `doubleclickzoom` | 0 (false) |
	211	+| `min_zoom` | 0 |
	212	+| `max_zoom` | 20 |
	213	+| `attribution` | ©Leaflet ©OpenStreetMap |
	214	+| `lat` | 0 |
	215	+| `lng` | 0 |
	216	+
	217	+---
	218	+
173	219	### [leaflet-marker]
174	220
175	221	
176	222
		@@ -192,8 +238,9 @@
192	238	| `shadowurl` | Give a url for the marker shadow image file |
193	239	| `shadowsize` | Set the size of the shadow: e.g. "80,50" for 80px width 50px height |
194	240	| `shadowanchor` | Set the anchor position of the shadow: e.g. "40,60" for 40px left 60px top |
195	241	| `popupanchor` | Set the anchor position of the popup: e.g. "40,60" for 40px left 60px top |
	242	+| `tooltipanchor` | Set the anchor position of the tooltip: e.g. "40,60" for 40px left 60px top |
196	243	| `svg` | Boolean for whether the marker should be created as an svg: default `false` |
197	244	| `background` | Background color for an SVG marker (above) |
198	245	| `color` | color of the SVG marker (above) |
199	246	| `iconclass` | className for the marker image |
		@@ -216,9 +263,9 @@
216	263	| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
217	264	| `addresses`, `latlngs`, or `coordinates` | For geocoded addresses, latitude/longitude, or x/y coordinates for Image Maps; ex: `[leaflet-line latlngs="41, 29; 44, 18"]` or addresses: `[leaflet-line addresses="Istanbul; Sarajevo"]` |
218	265	| `fitbounds` | Fit the map to the bounds of the line (instead of whatever center you gave the map originally) |
219	266
220		-And the following Shape Options. See https://leafletjs.com/reference-1.3.4.html#path for details.
	267	+And the following Shape Options. See https://leafletjs.com/reference.html#path for details.
221	268	'stroke', 'color', 'weight', 'opacity',
222	269	'lineCap', 'lineJoin', 'dashArray', 'dashOffset'
223	270	'fill', 'fillColor', 'fillOpacity', 'fillRule', 'className'
224	271
		@@ -233,9 +280,9 @@
233	280	### [leaflet-circle]
234	281
235	282	
236	283
237		-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](https://leafletjs.com/reference-1.3.4.html#path-option). Example: `[leaflet-circle message="max distance" lng=5.1179 lat=52.0979 radius=17500 color="#0DC143" fillOpacity=0.1]`.
	284	+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](https://leafletjs.com/reference.html#path). Example: `[leaflet-circle message="max distance" lng=5.1179 lat=52.0979 radius=17500 color="#0DC143" fillOpacity=0.1]`.
238	285
239	286	#### [leaflet-circle] Options
240	287
241	288	| Options | Usage |
		@@ -243,9 +290,9 @@
243	290	| `address`, `lat/lng`, or `x/y` | For geocoded addresses, latitude/longitude, or x/y coordinates for Image Maps (see [leaflet-image]); ex: `[leaflet-circle lat=52 lng=5]` or addresses: `[leaflet-circle address="Amsterdam"]` |
244	291	| `fitbounds` | Fit the map to the bounds of the circle (instead of whatever center you gave the map originally) |
245	292	| radius | Radius of the circle in meters |
246	293
247		-Includes all style options: See https://leafletjs.com/reference-1.3.4.html#path
	294	+Includes all style options: See https://leafletjs.com/reference.html#path
248	295
249	296	---
250	297
251	298	### [leaflet-geojson]
		@@ -267,10 +314,16 @@
267	314	| `popup_property` | Name of the geojson property that contains popup content |
268	315	| `fitbounds` | Fit the map to the bounds of all shapes (instead of whatever center you gave the map originally) |
269	316	| `circleMarker` | Display circles instead of markers. Vastly improves performance on maps with a lot of points. |
270	317	| `radius` | Radius of the circles, when `circleMarkers` is set |
	318	+| `table-view` | Show all properties on each feature when clicked |
	319	+| `iconurl` | Give a url for the marker image file |
	320	+| `iconsize` | Set the size of the icon: e.g. "80,50" for 80px width 50px height |
	321	+| `iconanchor` | Set the anchor position of the icon: e.g. "40,60" for 40px left 60px top |
	322	+| `popupanchor` | Set the anchor position of the popup: e.g. "40,60" for 40px left 60px top |
	323	+| `tooltipanchor` | Set the anchor position of the tooltip: e.g. "40,60" for 40px left 60px top |
271	324
272		-Includes all style options: See https://leafletjs.com/reference-1.3.4.html#path. Also, if you want to add feature
	325	+Includes all style options: See https://leafletjs.com/reference.html#path. Also, if you want to add feature
273	326	properties to the popups, use the inner content and curly brackets to substitute the values:
274	327	`[leaflet-geojson]Field A = {field_a}[/leaflet-geojson]`.
275	328
276	329	### [leaflet-kml]
		@@ -280,8 +333,49 @@
280	333	### [leaflet-gpx]
281	334
282	335	Same idea as geojson and KML (above), but takes GPX files and also loads [Mapbox's togeojson library](https://github.com/mapbox/togeojson)
283	336
	337	+### [leaflet-scale]
	338	+
	339	+Can be added after any map, or enabled for all maps in the admin. If you want to extend it, you can extend window.WPLeafletMapPlugin.createScale with custom JavaScript.
	340	+
	341	+| Option | Default |
	342	+| ---------------- | --------- |
	343	+| `maxWidth` | 100 |
	344	+| `metric` | 1 (true) |
	345	+| `imperial` | 1 (true) |
	346	+| `updateWhenIdle` | 0 (false) |
	347	+| `position` | topright |
	348	+
	349	+### [leaflet-image-overlay]
	350	+
	351	+```
	352	+[leaflet-image-overlay src="https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg" bounds="40.799311,-74.118464;40.68202047785919,-74.33"]
	353	+```
	354	+
	355	+#### [leaflet-image-overlay] Options
	356	+
	357	+| Option | Usage |
	358	+| ----------------- | ----------------------------------------------------------------------------- |
	359	+| `src` | Source of the image file |
	360	+| `bounds` | coordinates for south-west, and north-east coordinates |
	361	+| `interactive` | triggers mouse events (not recommended) |
	362	+| `opacity` | 0 - 1 for opaciity of the image |
	363	+| `alt` | alt attribute for the image |
	364	+| `crossOrigin` | Whether the crossOrigin attribute will be added to the image |
	365	+| `errorOverlayUrl` | URL to the overlay image to show in place of the overlay that failed to load. |
	366	+| `zIndex` | The explicit zIndex of the overlay layer |
	367	+| `className` | The className attribute for the image |
	368	+| `attribution` | String to be shown in the attribution control |
	369	+
	370	+### [leaflet-video-overlay]
	371	+
	372	+Same options as [leaflet-image-overlay]
	373	+
	374	+```
	375	+[leaflet-video-overlay src="https://www.mapbox.com/bites/00188/patricia_nasa.webm" bounds="32,-130;13,-100"]
	376	+```
	377	+
284	378	## Frequently Asked Questions
285	379
286	380	### How Can I Add another Leaflet Plugin?
287	381
		@@ -304,29 +398,40 @@
304	398
305	399	/js/full-screen.js
306	400
307	401	```js
308		-(function() {
	402	+(function () {
309	403	function main() {
310	404	if (!window.WPLeafletMapPlugin) {
311		- console.log("no plugin found!");
	405	+ console.log('no plugin found!');
312	406	return;
313	407	}
314	408
315		- // iterate any of these: `maps`, `markers`, `markergroups`, `lines`, `circles`, `geojsons`
	409	+ // iterate any of these arrays: `maps`, `markers`, `lines`, `circles`, `geojsons`
316	410	var maps = window.WPLeafletMapPlugin.maps;
317	411
	412	+ // Note: `markergroups` is an *object*. If you'd like to iterate it, you can do it like this:
	413	+ // var markergroups = window.WPLeafletMapPlugin.markergroups;
	414	+ // var keys = Object.keys(markergroups);
	415	+ // for (var i = 0, len = keys.length; i < len; i++) {
	416	+ // var markergroup = markergroups[keys[i]];
	417	+ // }
	418	+
318	419	for (var i = 0, len = maps.length; i < len; i++) {
319	420	var map = maps[i];
320		- map.whenReady(function() {
	421	+ map.whenReady(function () {
321	422	this.addControl(new L.Control.Fullscreen());
322	423	});
323	424	}
324	425	}
325	426
326		- window.addEventListener("load", main);
	427	+ window.addEventListener('load', main);
327	428	})();
328	429	```
	430	+
	431	+### Are there some examples for adding a Leaflet Plugin and other functions?
	432	+
	433	+Take a look at the functions of [Extensions for Leaflet Map](https://wordpress.org/plugins/extensions-leaflet-map/).
329	434
330	435	## Contributing
331	436
332	437	[View Contribution guidelines](https://github.com/bozdoz/wp-plugin-leaflet-map/blob/master/CONTRIBUTING.md)