Refactor / Extend Overlay Tutorial (ImageOverlay, VideoOverlay, SVGOv…

…erlay) (#8090) * ImageOverlay explanation, VideoOverlay explanation, interactive option, errorOverlayUrl option added * description of autoplay and muted options of VideoOverlay added * Full refractoring of ImageOverlay, VideoOverlay. SVGOverlay added. playsInline option added. * headers in SVGOverlay changed * playsInline option added to videoOverlay example * markdown (block of code) fixes * playsInline option, extend description * playsInline option, extend description * remove repetitive options for VideoOverlay, fixed some styling and typos * less indent for 1 tab, change level of headers for 1 level, change description in example.md * description change * change title * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * SVG overlay tutorial, title change * SVG overlay tutorial, change title * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * fix svgoverlay description * change title * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/video-overlay/example-svg.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * altText change, videoTutorial file update * new image-overlay example added * Newark bounds changes * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * example-noncontrols video file updated * titles of the examples changed * fix tabs * real attribution added * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples/video-overlay/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * change folder from 'video-overlay' to 'overlays' * alt text changed * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * add more spaces between text and code, change id element for Svg overlay * Update docs/SlavaUkraini/examples/overlays/example-svg.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/overlays/example-video.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/overlays/example-nocontrols.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/overlays/example-video.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples/overlays/example-video.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples/overlays/example-video.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * remove duplication for map.fitBounds for VideoOverlay * Update docs/SlavaUkraini/examples/overlays/example-svg.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/overlays/example-nocontrols.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/overlays/example-image.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Florian Bischof <design.falke@gmail.com> * remove altText for videoOverlay * example-bounds.html removed * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * Update docs/SlavaUkraini/examples/overlays/index.md Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com> * fix headers Co-authored-by: Florian Bischof <design.falke@gmail.com> Co-authored-by: Robert Linder <robert.vuj.linder@outlook.com>
Leaflet · Apr 22, 2022 · a8ff4df · a8ff4df
1 parent cd0dcdd
commit a8ff4df
Show file tree

Hide file tree

Showing 9 changed files with 347 additions and 170 deletions.
diff --git a/docs/SlavaUkraini/examples.md b/docs/SlavaUkraini/examples.md
@@ -97,10 +97,10 @@ description="How the default map panes work to display overlays on top of tiles,
 
 
 {% include tutorial_link.html
-page="video-overlay/"
-thumbnail="video-overlay/thumbnail.gif"
-title="Showing video files"
-description="Leaflet can help you display videos somewhere on the map."
+page="overlays/"
+thumbnail="overlays/thumbnail.gif"
+title="Overlays: Image, Video, SVG"
+description="Leaflet can help you display images, videos and SVG elements somewhere on the map."
 %}
 
 ***

diff --git a/docs/SlavaUkraini/examples/overlays/example-image.md b/docs/SlavaUkraini/examples/overlays/example-image.md
@@ -0,0 +1,31 @@
+---
+layout: tutorial_frame
+title: Image Overlay Tutorial
+---
+<script>
+	var map = L.map('map').setView([37.8, -96], 4);
+
+	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
+		maxZoom: 18,
+		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
+			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+		id: 'mapbox/satellite-v9',
+		tileSize: 512,
+		zoomOffset: -1
+	}).addTo(map);
+
+	var imageUrl = 'https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';
+	var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
+	var altText = 'Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT Libraries Map Collection.';
+	var latLngBounds = L.latLngBounds([[40.799311, -74.118464], [40.68202047785919, -74.33]]);
+
+	var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, {
+		opacity: 0.8,
+		errorOverlayUrl: errorOverlayUrl,
+		alt: altText,
+		interactive: true
+	}).addTo(map);
+
+	L.rectangle(latLngBounds).addTo(map);        
+	map.fitBounds(latLngBounds);
+</script>
diff --git a/...mples/video-overlay/example-nocontrols.md → ...i/examples/overlays/example-nocontrols.md b/...mples/video-overlay/example-nocontrols.md → ...i/examples/overlays/example-nocontrols.md
@@ -17,15 +17,19 @@ title: Video Overlay Tutorial
 	var videoUrls = [
 		'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
 		'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
-	],
-	bounds = L.latLngBounds([[32, -130], [13, -100]]);
+	];
+	var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
+	var bounds = L.latLngBounds([[32, -130], [13, -100]]);
 
 	map.fitBounds(bounds);
 
-	var overlay = L.videoOverlay(videoUrls, bounds, {
+	var videoOverlay = L.videoOverlay(videoUrls, bounds, {
 		opacity: 0.8,
-		interactive: true
-	});
-	map.addLayer(overlay);
+		errorOverlayUrl: errorOverlayUrl,
+		interactive: true,
+		autoplay: true,
+		muted: true,
+		playsInline: true
+	}).addTo(map);
 
 </script>
diff --git a/docs/SlavaUkraini/examples/overlays/example-svg.md b/docs/SlavaUkraini/examples/overlays/example-svg.md
@@ -0,0 +1,29 @@
+---
+layout: tutorial_frame
+title: SVG Overlay Tutorial
+---
+<script>
+	var map = L.map('map');
+
+	var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
+		maxZoom: 18,
+		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
+			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+		id: 'mapbox/satellite-v9',
+		tileSize: 512,
+		zoomOffset: -1
+	}).addTo(map);
+
+	var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg");
+	svgElement.setAttribute('viewBox', "0 0 200 200");
+	svgElement.innerHTML = '<rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/>';
+	var latLngBounds= L.latLngBounds([[32, -130], [13, -100]]);
+
+	map.fitBounds(latLngBounds);
+
+	var svgOverlay = L.svgOverlay(svgElement, latLngBounds, {
+		opacity: 0.7,
+		interactive: true
+	}).addTo(map)
+</script>
diff --git a/...Ukraini/examples/video-overlay/example.md → ...kraini/examples/overlays/example-video.md b/...Ukraini/examples/video-overlay/example.md → ...kraini/examples/overlays/example-video.md
@@ -1,6 +1,6 @@
 ---
 layout: tutorial_frame
-title: Video Overlay Tutorial
+title: Video Overlay Tutorial (video with controls)
 ---
 <script>
 	var map = L.map('map');
@@ -17,35 +17,40 @@ title: Video Overlay Tutorial
 	var videoUrls = [
 		'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
 		'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
-	],
-	bounds = L.latLngBounds([[32, -130], [13, -100]]);
+	];
+	var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
+	var bounds = L.latLngBounds([[32, -130], [13, -100]]);
 
 	map.fitBounds(bounds);
 
-	var overlay = L.videoOverlay(videoUrls, bounds, {
+	var videoOverlay = L.videoOverlay(videoUrls, bounds, {
 		opacity: 0.8,
-		interactive: false,
-		autoplay: false
-	});
-	map.addLayer(overlay);
+		errorOverlayUrl: errorOverlayUrl,
+		interactive: true,
+		autoplay: true,
+		muted: true,
+		playsInline: true
+	}).addTo(map);
 
-	overlay.on('load', function () {
+	videoOverlay.on('load', function () {
 		var MyPauseControl = L.Control.extend({
 			onAdd: function () {
 				var button = L.DomUtil.create('button');
-				button.innerHTML = '⏸';
+				button.title = 'Pause';
+				button.innerHTML = '<span aria-hidden="true">⏸</span>';
 				L.DomEvent.on(button, 'click', function () {
-					overlay.getElement().pause();
+					videoOverlay.getElement().pause();
 				});
 				return button;
 			}
 		});
 		var MyPlayControl = L.Control.extend({
 			onAdd: function () {
 				var button = L.DomUtil.create('button');
-				button.innerHTML = '▶️';
+				button.title = 'Play';
+				button.innerHTML = '<span aria-hidden="true">▶️</span>';
 				L.DomEvent.on(button, 'click', function () {
-					overlay.getElement().play();
+					videoOverlay.getElement().play();
 				});
 				return button;
 			}