← All changes | README.md +146 -33 2.17.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)
		@@ -67,9 +72,9 @@
67	72	1. fork/clone the repo, and
68	73	1. execute this command from the repo's root directory in your terminal:
69	74
70	75	```bash
71		-docker-compose up
	76	+docker compose up
72	77	```
73	78
74	79	You can also use NPM scripts to interact with Docker, if you make changes to Docker-related files:
75	80
		@@ -104,31 +109,47 @@
104	109	```
105	110	[leaflet-map address="Oslo, Norway"]
106	111	```
107	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 'maps@example.com';
	118	+});
	119	+```
	120	+
108	121	#### [leaflet-map] Options:
109	122
110		-| Option | Default |
111		-| ---------------------------- | ----------------------- |
112		-| `lat` and `lng` or `address` | lat: 44.67, lng: -63.61 |
113		-| `zoom` | 12 |
114		-| `height` | 250 |
115		-| `width` | 100% |
116		-| `fitbounds` | 0 (false) |
117		-| `zoomcontrol` | 0 (false) |
118		-| `scrollwheel` | 0 (false) |
119		-| `doubleclickzoom` | 0 (false) |
120		-| `min_zoom` | 0 |
121		-| `max_zoom` | 20 |
122		-| `subdomains` | abc |
123		-| `attribution` | ©Leaflet ©OpenStreetMap |
124		-| `closepopuponclick` | false |
125		-| `trackresize` | false |
126		-| `boxZoom` | true |
127		-| `dragging` | true |
128		-| `keyboard` | true |
129		-| `maxbounds` | null |
130		-| `detect-retina` | 0 (false) |
	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 |
131	152
132	153	---
133	154
134	155	### [leaflet-image]
		@@ -158,11 +179,44 @@
158	179	| `doubleclickzoom` | 0 (false) |
159	180	| `min_zoom` | 0 |
160	181	| `max_zoom` | 20 |
161	182	| `attribution` | ©Leaflet ©OpenStreetMap |
	183	+| `x` | 0 |
	184	+| `y` | 0 |
162	185
163	186	---
164	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	+
165	219	### [leaflet-marker]
166	220
167	221	
168	222
		@@ -184,8 +238,9 @@
184	238	| `shadowurl` | Give a url for the marker shadow image file |
185	239	| `shadowsize` | Set the size of the shadow: e.g. "80,50" for 80px width 50px height |
186	240	| `shadowanchor` | Set the anchor position of the shadow: e.g. "40,60" for 40px left 60px top |
187	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 |
188	243	| `svg` | Boolean for whether the marker should be created as an svg: default `false` |
189	244	| `background` | Background color for an SVG marker (above) |
190	245	| `color` | color of the SVG marker (above) |
191	246	| `iconclass` | className for the marker image |
		@@ -208,9 +263,9 @@
208	263	| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
209	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"]` |
210	265	| `fitbounds` | Fit the map to the bounds of the line (instead of whatever center you gave the map originally) |
211	266
212		-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.
213	268	'stroke', 'color', 'weight', 'opacity',
214	269	'lineCap', 'lineJoin', 'dashArray', 'dashOffset'
215	270	'fill', 'fillColor', 'fillOpacity', 'fillRule', 'className'
216	271
		@@ -225,9 +280,9 @@
225	280	### [leaflet-circle]
226	281
227	282	
228	283
229		-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]`.
230	285
231	286	#### [leaflet-circle] Options
232	287
233	288	| Options | Usage |
		@@ -235,9 +290,9 @@
235	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"]` |
236	291	| `fitbounds` | Fit the map to the bounds of the circle (instead of whatever center you gave the map originally) |
237	292	| radius | Radius of the circle in meters |
238	293
239		-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
240	295
241	296	---
242	297
243	298	### [leaflet-geojson]
		@@ -259,10 +314,16 @@
259	314	| `popup_property` | Name of the geojson property that contains popup content |
260	315	| `fitbounds` | Fit the map to the bounds of all shapes (instead of whatever center you gave the map originally) |
261	316	| `circleMarker` | Display circles instead of markers. Vastly improves performance on maps with a lot of points. |
262	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 |
263	324
264		-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
265	326	properties to the popups, use the inner content and curly brackets to substitute the values:
266	327	`[leaflet-geojson]Field A = {field_a}[/leaflet-geojson]`.
267	328
268	329	### [leaflet-kml]
		@@ -272,8 +333,49 @@
272	333	### [leaflet-gpx]
273	334
274	335	Same idea as geojson and KML (above), but takes GPX files and also loads [Mapbox's togeojson library](https://github.com/mapbox/togeojson)
275	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	+
276	378	## Frequently Asked Questions
277	379
278	380	### How Can I Add another Leaflet Plugin?
279	381
		@@ -296,29 +398,40 @@
296	398
297	399	/js/full-screen.js
298	400
299	401	```js
300		-(function() {
	402	+(function () {
301	403	function main() {
302	404	if (!window.WPLeafletMapPlugin) {
303		- console.log("no plugin found!");
	405	+ console.log('no plugin found!');
304	406	return;
305	407	}
306	408
307		- // iterate any of these: `maps`, `markers`, `markergroups`, `lines`, `circles`, `geojsons`
	409	+ // iterate any of these arrays: `maps`, `markers`, `lines`, `circles`, `geojsons`
308	410	var maps = window.WPLeafletMapPlugin.maps;
309	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	+
310	419	for (var i = 0, len = maps.length; i < len; i++) {
311	420	var map = maps[i];
312		- map.whenReady(function() {
	421	+ map.whenReady(function () {
313	422	this.addControl(new L.Control.Fullscreen());
314	423	});
315	424	}
316	425	}
317	426
318		- window.addEventListener("load", main);
	427	+ window.addEventListener('load', main);
319	428	})();
320	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/).
321	434
322	435	## Contributing
323	436
324	437	[View Contribution guidelines](https://github.com/bozdoz/wp-plugin-leaflet-map/blob/master/CONTRIBUTING.md)