Leaflet Tutorial – Overlay

leaflet tutorial - overlay

Leaflet Tutorial – Overlay – Brilliansolution. Instead of map overlays, you can also use image, video overlays in a Leaflet application. In this chapter, we will see how to use such overlays.

leaflet tutorial - overlay

Image Overlay

Follow the steps given below to use an image overlay.

Step 1 − Create a Map object by passing a <div> element (String or object) and map options (optional).

Step 2 − Create a Layer object by passing the URL of the desired tile.

Step 3 − Add the layer object to the map using the addLayer() method of the Map class.

Step 4 − Create the image overlay using L.imageOverlay(). Pass the URL of the image and an object representing image bounds, as shown below.

// Creating Image overlay
var imageUrl = 'tpPoster.jpg';
var imageBounds = [[17.342761, 78.552432], [16.396553, 80.727725]];
var overlay = L.imageOverlay(imageUrl, imageBounds);

Step 5 − Add the overlay to the map using addTo() method of the imageOverlay class, as shown below.

// Adding overlay to the map
overlay.addTo(map);

Example

The following code demonstrates the usage of image overlay.

<!DOCTYPE html>
<html>
   <head>
      <title>Image Overlay Example</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.342761, 78.552432],
            zoom: 8
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);  // Adding layer to the map
         
         // Creating Image overlay
         var imageUrl = 'tpPoster.jpg';
         var imageBounds = [[17.342761, 78.552432], [16.396553, 80.727725]];
         var overlay = L.imageOverlay(imageUrl, imageBounds);
         overlay.addTo(map);
      </script>
   </body>
   
</html>

Overlays

There are 3 overlays in the Leaflet API:

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 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);

var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).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 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 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.

https://leafletjs.com/examples/overlays/example-image.html
See this example stand-alone.

VideoOverlay

Video used to be a hard task when building a webpage, until the <video> HTML element 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:

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);

var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).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. A video overlay uses the <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:

https://leafletjs.com/examples/overlays/example-nocontrols.html
See this example stand-alone.
  • 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.

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, 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 (which inherits from 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);
});
https://leafletjs.com/examples/overlays/example-video.html
See this example stand-alone.

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 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 options.

https://leafletjs.com/examples/overlays/example-svg.html
See this example stand-alone.

DivOverlay

Base model for L.Popup and L.Tooltip. Inherit from it for custom overlays like plugins.

Options

OptionTypeDefaultDescription
interactiveBooleanfalseIf true, the popup/tooltip will listen to the mouse events.
offsetPointPoint(0, 0)The offset of the overlay position.
classNameString''A custom CSS class name to assign to the overlay.
paneStringundefinedMap pane where the overlay will be added.
contentString|HTMLElement|Function''Sets the HTML content of the overlay while initializing. If a function is passed the source layer will be passed to the function. The function should return a String or HTMLElement to be used in the overlay.

▶ Options inherited from Interactive layer▶ Options inherited from Layer

Events

DivOverlay events

EventDataDescription
contentupdateEventFired when the content of the overlay is updated

▶ Mouse events inherited from Interactive layer▶ Events inherited from Layer▶ Popup events inherited from Layer▶ Tooltip events inherited from Layer

Methods

MethodReturnsDescription
openOn(<Mapmap)thisAdds the overlay to the map. Alternative to map.openPopup(popup)/.openTooltip(tooltip).
close()thisCloses the overlay. Alternative to map.closePopup(popup)/.closeTooltip(tooltip) and layer.closePopup()/.closeTooltip().
toggle(<Layerlayer?)thisOpens or closes the overlay bound to layer depending on its current state. Argument may be omitted only for overlay bound to layer. Alternative to layer.togglePopup()/.toggleTooltip().
getLatLng()LatLngReturns the geographical point of the overlay.
setLatLng(<LatLnglatlng)thisSets the geographical point where the overlay will open.
getContent()String|HTMLElementReturns the content of the overlay.
setContent(<String|HTMLElement|Function> htmlContent)thisSets the HTML content of the overlay. If a function is passed the source layer will be passed to the function. The function should return a String or HTMLElement to be used in the overlay.
getElement()String|HTMLElementReturns the HTML container of the overlay.
update()nullUpdates the overlay content, layout and position. Useful for updating the overlay after something inside changed, e.g. image loaded.
isOpen()BooleanReturns true when the overlay is visible on the map.
bringToFront()thisBrings this overlay in front of other overlays (in the same map pane).
bringToBack()thisBrings this overlay to the back of other overlays (in the same map pane).

▶ Methods inherited from Layer▶ Popup methods inherited from Layer▶ Tooltip methods inherited from Layer▶ Methods inherited from Evented

ImageOverlay

Used to load and display a single image over specific bounds of the map. Extends Layer.

Usage example

var imageUrl = 'https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);

Creation

FactoryDescription
L.imageOverlay(<String> imageUrl, <LatLngBoundsbounds, <ImageOverlay optionsoptions?)Instantiates an image overlay object given the URL of the image and the geographical bounds it is tied to.

Options

OptionTypeDefaultDescription
opacityNumber1.0The opacity of the image overlay.
altString''Text for the alt attribute of the image (useful for accessibility).
interactiveBooleanfalseIf true, the image overlay will emit mouse events when clicked or hovered.
crossOriginBoolean|StringfalseWhether the crossOrigin attribute will be added to the image. If a String is provided, the image will have its crossOrigin attribute set to the String provided. This is needed if you want to access image pixel data. Refer to CORS Settings for valid String values.
errorOverlayUrlString''URL to the overlay image to show in place of the overlay that failed to load.
zIndexNumber1The explicit zIndex of the overlay layer.
classNameString''A custom class name to assign to the image. Empty by default.

▶ Options inherited from Interactive layer▶ Options inherited from Layer

Events

EventDataDescription
loadEventFired when the ImageOverlay layer has loaded its image
errorEventFired when the ImageOverlay layer fails to load its image

▶ Mouse events inherited from Interactive layer▶ Events inherited from Layer▶ Popup events inherited from Layer▶ Tooltip events inherited from Layer

Methods

MethodReturnsDescription
setOpacity(<Number> opacity)thisSets the opacity of the overlay.
bringToFront()thisBrings the layer to the top of all overlays.
bringToBack()thisBrings the layer to the bottom of all overlays.
setUrl(<String> url)thisChanges the URL of the image.
setBounds(<LatLngBoundsbounds)thisUpdate the bounds that this ImageOverlay covers
setZIndex(<Number> value)thisChanges the zIndex of the image overlay.
getBounds()LatLngBoundsGet the bounds that this ImageOverlay covers
getElement()HTMLElementReturns the instance of HTMLImageElement used by this overlay.
getCenter()LatLngReturns the center of the ImageOverlay.

▶ Methods inherited from Layer▶ Popup methods inherited from Layer▶ Tooltip methods inherited from Layer▶ Methods inherited from Evented

VideoOverlay

Used to load and display a video player over specific bounds of the map. Extends ImageOverlay.

A video overlay uses the <video> HTML5 element.

Usage example

var videoUrl = 'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
    videoBounds = [[ 32, -130], [ 13, -100]];
L.videoOverlay(videoUrl, videoBounds ).addTo(map);

Creation

FactoryDescription
L.videoOverlay(<String|Array|HTMLVideoElement> video, <LatLngBoundsbounds, <VideoOverlay optionsoptions?)Instantiates an image overlay object given the URL of the video (or array of URLs, or even a video element) and the geographical bounds it is tied to.

Options

OptionTypeDefaultDescription
autoplayBooleantrueWhether the video starts playing automatically when loaded. On some browsers autoplay will only work with muted: true
loopBooleantrueWhether the video will loop back to the beginning when played.
keepAspectRatioBooleantrueWhether the video will save aspect ratio after the projection. Relevant for supported browsers. See browser compatibility
mutedBooleanfalseWhether the video starts on mute when loaded.
playsInlineBooleantrueMobile browsers will play the video right where it is instead of open it up in fullscreen mode.

▶ Options inherited from ImageOverlay▶ Options inherited from Interactive layer▶ Options inherited from Layer

Events

EventDataDescription
loadEventFired when the video has finished loading the first frame

▶ Events inherited from ImageOverlay▶ Mouse events inherited from Interactive layer▶ Events inherited from Layer▶ Popup events inherited from Layer▶ Tooltip events inherited from Layer

Methods

MethodReturnsDescription
getElement()HTMLVideoElementReturns the instance of HTMLVideoElement used by this overlay.

▶ Methods inherited from ImageOverlay▶ Methods inherited from Layer▶ Popup methods inherited from Layer▶ Tooltip methods inherited from Layer▶ Methods inherited from Evented

SVGOverlay

Used to load, display and provide DOM access to an SVG file over specific bounds of the map. Extends ImageOverlay.

An SVG overlay uses the <svg> element.

Usage example

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 svgElementBounds = [ [ 32, -130 ], [ 13, -100 ] ];
L.svgOverlay(svgElement, svgElementBounds).addTo(map);

Creation

FactoryDescription
L.svgOverlay(<String|SVGElement> svg, <LatLngBoundsbounds, <SVGOverlay options> options?)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.

Options

▶ Options inherited from ImageOverlay▶ Options inherited from Interactive layer▶ Options inherited from Layer

Events

▶ Events inherited from ImageOverlay▶ Mouse events inherited from Interactive layer▶ Events inherited from Layer▶ Popup events inherited from Layer▶ Tooltip events inherited from Layer

Methods

MethodReturnsDescription
getElement()SVGElementReturns the instance of SVGElement used by this overlay.

▶ Methods inherited from ImageOverlay▶ Methods inherited from Layer▶ Popup methods inherited from Layer▶ Tooltip methods inherited from Layer▶ Methods inherited from Evented

Source : https://leafletjs.com/

keywords :

  • Leaflet Tutorial Beginer – Leaflet Marker
  • leaflet marker
  • leaflet markercluster
  • leaflet custom marker
  • react leaflet marker
  • maps marker pro
  • leaflet multiple markers
  • leaflet maps marker
  • custom marker leaflet
  • leaflet filter markers
  • marker react leaflet
  • mapsmarker leaflet
  • text marker
  • wordpress leaflet maps marker
  • leaflet map multiple markers
  • custom leaflet markers
  • leafletmaps

brillian

Leave a Reply

%d bloggers like this:
Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Adblockers perform their job via blocking communication with ad-forcing servers, and by hiding the webpage elements containing commercial content. By referring to filter lists containing the addresses of ad servers, ad blockers seek matches in website elements and define what should be blocked.

Adblocking detection in its turn is performed through “bait content”. Invisible to the user, such bait is implemented the way adblockers recognize it as commercial content. As soon as the webpage finishes loading, the detection algorithm calls to the properties of the bait. If the bait is hidden, the algorithm recognizes that there’s an active adblocker. Although baits are different and have different levels of complexity, it’s not that hard to disable adblock detection.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock