mirror of
https://github.com/Leaflet/Leaflet.git
synced 2026-02-01 17:27:23 +00:00
Refactor / Extend Overlay Tutorial (ImageOverlay, VideoOverlay, SVGOverlay) (#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>
This commit is contained in:
Konstantin Biriukov
GitHub
parent
cd0dcddecc
commit
a8ff4df765
@ -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."
|
||||
%}
|
||||
|
||||
***
|
||||
|
||||
31
docs/SlavaUkraini/examples/overlays/example-image.md
Normal file
31
docs/SlavaUkraini/examples/overlays/example-image.md
Normal file
@ -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 © <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>
|
||||
@ -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>
|
||||
29
docs/SlavaUkraini/examples/overlays/example-svg.md
Normal file
29
docs/SlavaUkraini/examples/overlays/example-svg.md
Normal file
@ -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 © <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>
|
||||
@ -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,25 +17,29 @@ 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;
|
||||
}
|
||||
@ -43,9 +47,10 @@ title: Video Overlay Tutorial
|
||||
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;
|
||||
}
|
||||
255
docs/SlavaUkraini/examples/overlays/index.md
Normal file
255
docs/SlavaUkraini/examples/overlays/index.md
Normal file
@ -0,0 +1,255 @@
|
||||
---
|
||||
layout: tutorial_v2
|
||||
title: Overlays
|
||||
---
|
||||
|
||||
## Overlays
|
||||
|
||||
There are 3 overlays in the Leaflet API:
|
||||
- [`ImageOverlay`](/reference.html#imageoverlay): Raster Layer, Extends [`Layer`](/reference.html#layer)
|
||||
- [`VideoOverlay`](/reference.html#videooverlay): Raster Layer, Extends [`ImageOverlay`](/reference.html#imageoverlay)
|
||||
- [`SVGOverlay`](/reference.html#svgoverlay): Vector Layer, Extends [`ImageOverlay`](/reference.html#imageoverlay)
|
||||
|
||||
In this tutorial, you’ll learn how to use these overlays.
|
||||
|
||||
### `ImageOverlay`
|
||||
|
||||
`L.ImageOverlay` is used to load and display a single image over specific bounds of the map.
|
||||
|
||||
To add an image overlay [`L.ImageOverlay`](/reference.html#imageoverlay) use this:
|
||||
|
||||
```
|
||||
var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, options);
|
||||
```
|
||||
|
||||
#### Creating a map
|
||||
|
||||
First of all, create a Leaflet map and add a background `L.TileLayer` in the usual way:
|
||||
|
||||
```
|
||||
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=' + mapboxAccessToken, {
|
||||
maxZoom: 18,
|
||||
attribution: 'Map data © <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);
|
||||
```
|
||||
|
||||
Let's create an image overlay with multiple options:
|
||||
|
||||
```
|
||||
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);
|
||||
```
|
||||
|
||||
If you want to see the area which is covered by the ImageOverlay, you can add a [`L.Rectangle`](/reference.html#rectangle) with the same `L.LatLngBounds` to the map:
|
||||
|
||||
```
|
||||
L.rectangle(latLngBounds).addTo(map);
|
||||
map.fitBounds(latLngBounds);
|
||||
```
|
||||
|
||||
- `opacity` defines the opacity of the image overlay, it equals to `1.0` by default. Decrease this value to make an image overlay transparent and to expose the underlying map layer.
|
||||
|
||||
- `errorOverlayUrl` is a URL to the overlay image to show in place of the overlay that failed to load.
|
||||
|
||||
- `alt` sets the HTML [`alt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt) attribute to provide an alternative text description of the image. Alternative text is essential information for screen reader users. It can also benefit people during poor network connectivity, in the case the image fails to load. Moreover, it can improve the SEO of a website.
|
||||
|
||||
- `interactive` is `false` by default. If `true`, the image overlay will emit mouse events when clicked or hovered.
|
||||
|
||||
You can find other options of `L.ImageOverlay` in the [documentation](/reference.html#imageoverlay).
|
||||
|
||||
{% include frame.html url="example-image.html" %}
|
||||
|
||||
### `VideoOverlay`
|
||||
|
||||
Video used to be a hard task when building a webpage, until the [`<video>` HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) was made available.
|
||||
|
||||
Nowadays, we can use the following HTML code:
|
||||
|
||||
```
|
||||
<video width="500" controls>
|
||||
<source src="https://www.mapbox.com/bites/00188/patricia_nasa.webm" type="video/webm">
|
||||
<source src="https://www.mapbox.com/bites/00188/patricia_nasa.mp4" type="video/mp4">
|
||||
</video>
|
||||
```
|
||||
|
||||
To display this video:
|
||||
|
||||
<video width="500" controls>
|
||||
<source src="https://www.mapbox.com/bites/00188/patricia_nasa.webm" type="video/webm">
|
||||
<source src="https://www.mapbox.com/bites/00188/patricia_nasa.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
If a video can be shown in a webpage in this way, then Leaflet can display it inside a map. It is important that the videos are prepared in such a way that they will fit the map: The video should have a "north-up" orientation, and its proportions should fit the map. If not, it will look out of place.
|
||||
|
||||
#### Creating a map
|
||||
|
||||
First of all, create a Leaflet map and add a background `L.TileLayer` in the usual way:
|
||||
|
||||
```
|
||||
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=' + mapboxAccessToken, {
|
||||
id: 'mapbox/satellite-v9',
|
||||
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
|
||||
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||||
tileSize: 512,
|
||||
zoomOffset: -1
|
||||
}).addTo(map);
|
||||
```
|
||||
|
||||
#### Adding the video overlay
|
||||
|
||||
Adding a video overlay works very similar to adding an image overlay.
|
||||
|
||||
For a video overlay, just:
|
||||
|
||||
- Use `L.VideoOverlay` instead of `L.ImageOverlay`
|
||||
- `L.VideoOverlay` is used to load and display a video player over specific bounds of the map. Extends [`L.ImageOverlay`](/reference.html#imageoverlay).
|
||||
A video overlay uses the [`<video>`](https://developer.mozilla.org/docs/Web/HTML/Element/video) HTML element.
|
||||
- Instead of the image URL, specify one video URL *or* an array of video URLs
|
||||
|
||||
```
|
||||
var videoUrls = [
|
||||
'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
|
||||
'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
|
||||
];
|
||||
var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
|
||||
var latLngBounds = L.latLngBounds([[32, -130], [13, -100]]);
|
||||
|
||||
var videoOverlay = L.videoOverlay(videoUrls, latLngBounds, {
|
||||
opacity: 0.8,
|
||||
errorOverlayUrl: errorOverlayUrl,
|
||||
interactive: true,
|
||||
autoplay: true,
|
||||
muted: true,
|
||||
playsInline: true
|
||||
}).addTo(map);
|
||||
```
|
||||
|
||||
And just like that, you'll get the video on your map:
|
||||
|
||||
{% include frame.html url="example-nocontrols.html" %}
|
||||
|
||||
- `autoplay` option defines whether the video starts playing automatically when loaded. It is `true` by default. It is important to know that on some browsers `autoplay` functionality will only work with `muted` option explicitly set to `true`.
|
||||
|
||||
- `muted` option defines whether the video starts on mute when loaded. It is `false` by default.
|
||||
|
||||
- `playsInline` option when it is set to `true` allows video to play inline without automatically entering fullscreen mode when playback begins in the mobile browser. It is `true` by default.
|
||||
|
||||
You can find other options of `L.videoOverlay` in the [documentation](/reference.html#videooverlay).
|
||||
|
||||
Video overlays behave like any other Leaflet layer - you can add and remove them, let the user select from several videos using a [layers control](../layers-control/), etc.
|
||||
|
||||
|
||||
#### A bit of control over the video
|
||||
|
||||
If you read the API documentation, you'll notice that the `L.VideoOverlay` class does not have a `play()` or `pause()` method.
|
||||
|
||||
For this, the `getElement()` method of the video overlay is useful. It returns the [`HTMLVideoElement`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement) (which inherits from [`HTMLMediaElement`](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement)) for the overlay - and that has methods like `play()` and `pause()`, e.g.
|
||||
|
||||
```
|
||||
videoOverlay.getElement().pause();
|
||||
```
|
||||
|
||||
This allows us to build custom interfaces. For example, we can build a small subclass of `L.Control` to play/pause this video overlay once it's loaded:
|
||||
|
||||
```
|
||||
videoOverlay.on('load', function () {
|
||||
var MyPauseControl = L.Control.extend({
|
||||
onAdd: function() {
|
||||
var button = L.DomUtil.create('button');
|
||||
button.title = 'Pause';
|
||||
button.innerHTML = '<span aria-hidden="true">⏸</span>';
|
||||
L.DomEvent.on(button, 'click', function () {
|
||||
videoOverlay.getElement().pause();
|
||||
});
|
||||
return button;
|
||||
}
|
||||
});
|
||||
var MyPlayControl = L.Control.extend({
|
||||
onAdd: function() {
|
||||
var button = L.DomUtil.create('button');
|
||||
button.title = 'Play';
|
||||
button.innerHTML = '<span aria-hidden="true">▶️</span>';
|
||||
L.DomEvent.on(button, 'click', function () {
|
||||
videoOverlay.getElement().play();
|
||||
});
|
||||
return button;
|
||||
}
|
||||
});
|
||||
|
||||
var pauseControl = (new MyPauseControl()).addTo(map);
|
||||
var playControl = (new MyPlayControl()).addTo(map);
|
||||
});
|
||||
```
|
||||
|
||||
{% include frame.html url="example-video.html" %}
|
||||
|
||||
### `SVGOverlay`
|
||||
|
||||
`L.SVGOverlay` is used to load, display and provide DOM access to an SVG file over specific bounds of the map.
|
||||
|
||||
To add an SVG overlay [`L.SVGOverlay`](/reference.html#svgoverlay) use this:
|
||||
|
||||
```
|
||||
var svgOverlay = L.svgOverlay(SVGElement, svgElementBounds, options);
|
||||
```
|
||||
|
||||
It instantiates an image overlay object given an SVG element and the geographical bounds it is tied to. A viewBox attribute is required on the SVG element to zoom in and out properly.
|
||||
|
||||
#### Creating an SVG element
|
||||
|
||||
Let's create an SVG element:
|
||||
|
||||
```
|
||||
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"/>';
|
||||
```
|
||||
|
||||
Alternatively, you can create the SVG element in HTML code:
|
||||
|
||||
```
|
||||
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><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"/></svg>
|
||||
```
|
||||
|
||||
And choose this SVG element by using a querySelector:
|
||||
|
||||
```
|
||||
var svgElement = document.querySelector('#svg');
|
||||
```
|
||||
|
||||
#### Adding the SVG overlay
|
||||
|
||||
Create the SVGOverlay with desired options similarly to ImageOverlay and VideoOverlay:
|
||||
|
||||
```
|
||||
var latLngBounds = L.latLngBounds([[32, -130], [13, -100]]);
|
||||
map.fitBounds(latLngBounds);
|
||||
|
||||
var svgOverlay = L.svgOverlay(svgElement, latLngBounds, {
|
||||
opacity: 0.7,
|
||||
interactive: true
|
||||
}).addTo(map);
|
||||
```
|
||||
|
||||
Although SVGOverlay does not have its own unique options, it inherits a variety of options from ImageOverlay, Interactive layer and Layer.
|
||||
Check out the documentation to find out more [`L.SVGOverlay`](/reference.html#svgoverlay) options.
|
||||
|
||||
{% include frame.html url="example-svg.html" %}
|
||||
|
Before Width: | Height: | Size: 200 KiB After Width: | Height: | Size: 200 KiB |
@ -1,23 +0,0 @@
|
||||
---
|
||||
layout: tutorial_frame
|
||||
title: Video 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 © <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 bounds = L.latLngBounds([[32, -130], [13, -100]]);
|
||||
|
||||
var rectangle = L.rectangle(bounds).addTo(map);
|
||||
|
||||
map.fitBounds(bounds);
|
||||
|
||||
</script>
|
||||
@ -1,124 +0,0 @@
|
||||
---
|
||||
layout: tutorial_v2
|
||||
title: Leaflet on Mobile
|
||||
---
|
||||
|
||||
## Video on webpages
|
||||
|
||||
Video used to be a hard task when building a webpage, until the [`<video>` HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) was made available.
|
||||
|
||||
Nowadays, we can use the following HTML code:
|
||||
|
||||
<video width="500" controls>
|
||||
<source src="https://www.mapbox.com/bites/00188/patricia_nasa.webm" type="video/webm">
|
||||
<source src="https://www.mapbox.com/bites/00188/patricia_nasa.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
To display this video:
|
||||
|
||||
<video width="500" controls>
|
||||
<source src="https://www.mapbox.com/bites/00188/patricia_nasa.webm" type="video/webm">
|
||||
<source src="https://www.mapbox.com/bites/00188/patricia_nasa.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
If a video can be shown in a webpage in this way, then Leaflet can display it inside a map. It is important that the videos are prepared in such a way that they will fit the map: The video should have a "north-up" orientation, and its proportions should fit the map. If not, it will look out of place.
|
||||
|
||||
### Bounds of an image overlay
|
||||
|
||||
First of all, create a Leaflet map and add a background `L.TileLayer` in the usual way:
|
||||
|
||||
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=' + mapboxAccessToken, {
|
||||
id: 'mapbox/satellite-v9',
|
||||
attribution: ...,
|
||||
tileSize: 512,
|
||||
zoomOffset: -1
|
||||
}).addTo(map);
|
||||
|
||||
Then, we'll define the geographical bounds that the video will cover. This is an instance of [`L.LatLngBounds`](/reference.html#latlngbounds), which is a rectangular shape:
|
||||
|
||||
var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
|
||||
|
||||
If you want to see the area covered by a `LatLngBounds`, use a [`L.Rectangle`](/reference.html#rectangle):
|
||||
|
||||
L.rectangle(bounds).addTo(map);
|
||||
|
||||
map.fitBounds(bounds);
|
||||
|
||||
{% include frame.html url="example-bounds.html" %}
|
||||
|
||||
|
||||
### Adding the video overlay
|
||||
|
||||
Adding a video overlay works very similar to adding a image overlay. For just one image, [`L.ImageOverlay`s](/reference.html#imageoverlay) is used like this:
|
||||
|
||||
var overlay = L.imageOverlay( imageUrl, bounds, options );
|
||||
|
||||
For a video overlay, just:
|
||||
|
||||
* Use `L.videoOverlay` instead of `L.imageOverlay`
|
||||
* Instead of the image URL, specify one video URL *or* an array of video URLs
|
||||
|
||||
```
|
||||
var videoUrls = [
|
||||
'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
|
||||
'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
|
||||
];
|
||||
|
||||
var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
|
||||
|
||||
var videoOverlay = L.videoOverlay( videoUrls, bounds, {
|
||||
opacity: 0.8
|
||||
}).addTo(map);
|
||||
```
|
||||
|
||||
And just like that, you'll get the video on your map:
|
||||
|
||||
{% include frame.html url="example-nocontrols.html" %}
|
||||
|
||||
|
||||
Video overlays behave like any other Leaflet layer - you can add and remove them, let the user select from several videos using a [layers control](../layers-control/), etc.
|
||||
|
||||
|
||||
### A bit of control over the video
|
||||
|
||||
If you read the API documentation, you'll notice that the `L.VideoOverlay` class does not have a `play()` or `pause()` method.
|
||||
|
||||
For this, the `getElement()` method of the video overlay is useful. It returns the [`HTMLVideoElement`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement) (which inherits from [`HTMLMediaElement`](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement)) for the overlay - and that has methods like `play()` and `pause()`, e.g.
|
||||
|
||||
```
|
||||
videoOverlay.getElement().pause();
|
||||
```
|
||||
|
||||
This allows us to build custom interfaces. For example, we can build a small subclass of `L.Control` to play/pause this video overlay once it's loaded:
|
||||
|
||||
```
|
||||
videoOverlay.on('load', function () {
|
||||
var MyPauseControl = L.Control.extend({
|
||||
onAdd: function() {
|
||||
var button = L.DomUtil.create('button');
|
||||
button.innerHTML = '⏸';
|
||||
L.DomEvent.on(button, 'click', function () {
|
||||
videoOverlay.getElement().pause();
|
||||
});
|
||||
return button;
|
||||
}
|
||||
});
|
||||
var MyPlayControl = L.Control.extend({
|
||||
onAdd: function() {
|
||||
var button = L.DomUtil.create('button');
|
||||
button.innerHTML = '▶️';
|
||||
L.DomEvent.on(button, 'click', function () {
|
||||
videoOverlay.getElement().play();
|
||||
});
|
||||
return button;
|
||||
}
|
||||
});
|
||||
|
||||
var pauseControl = (new MyPauseControl()).addTo(map);
|
||||
var playControl = (new MyPlayControl()).addTo(map);
|
||||
});
|
||||
```
|
||||
|
||||
{% include frame.html url="example.html" %}
|
||||
Loading…
x
Reference in New Issue
Block a user