I adapted this tutorial:
https://github.com/asmaloney/Leaflet_Cluster_Example
It loads marker positions from a Json file.
now I want to integrate a VideoOverlay, which previously worked like this:
var videoUrls = [
'http://dominique.turzer.eu/media/mod_osmod/images/Film8.mp4'
];
var bounds = L.latLngBounds([[ 41.92398333, 12.45647433], [ 41.863167640465, 12.502337292]]);
var videoOverlay = L.videoOverlay( videoUrls, bounds, {
opacity: 0.7,
loop: false
}).addTo(mapid);
var videoElement = videoOverlay.getElement();
L.DomEvent.on(videoElement, 'ended', function(){
videoOverlay.remove();
});
I can t figure out where to place/integrate this code. In my first try it was placed beneth "L.tileLayer", which now has the result that there are no maker (instead of many) anymore.... It might be the problem that the markerCluster example is for leaflet 0.7.7 and my VideoOverly worked with leaflet 1.3.1 -
My script file, is referenced with this line to the Body of my html file
<script type='text/javascript' src='maps/leaf-demo.js'></script>
The script file looks like that:
var map = L.map( 'map', {
center: [41.8939551, 12.479556],
minZoom: 2,
zoom: 13
});
L.tileLayer( 'https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: ['a','b','c']
}).addTo( map );
var myURL = jQuery( 'script[src$="leaf-demo.js"]' ).attr( 'src' ).replace( 'leaf-demo.js', '' );
var myIcon = L.icon({
iconUrl: myURL + 'images/pin24.png',
iconRetinaUrl: myURL + 'images/pin48.png',
iconSize: [29, 24],
iconAnchor: [9, 21],
popupAnchor: [0, -14]
});
var markerClusters = L.markerClusterGroup();
for ( var i = 0; i < markers.length; ++i )
{
var popup = markers[i].name +
'<br/>' + markers[i].img;
var m = L.marker( [markers[i].lat, markers[i].lng], {icon: myIcon} )
.bindPopup( popup );
markerClusters.addLayer( m );
}
map.addLayer( markerClusters );
And finaly there is an GeoJson file, which is structured like this:
var markers = [
{
"name":"Ponte Milvio",
"lat":41.9361778,
"lng":12.47166861,
"img":'<img src="/images/banners/41-milvio.jpg" width=300 <p><strong style="color: #cd5c5c;">{loadposition position-12}</strong></p>',
},{
When lading the page the Video should be played and after the Video has vanished there sould be the clustered markers, which finally lead to a popupcontaining a drawing from this place in Rome. It would also be wonderful if I could use custom image marker ikons showing the drawing and if I could add different Layers for different people contributing, but for the moment my goal is to combine the video Overlay with the clustered markers...
PS: All this is going to be a website for an open source guideook about rome - a real physical book - which I am selling since 2009: The idea is that you can take the book to Rome to have notes and scetches. And who is returnig the book to me in 2020 become part of a collective exhibition:
http://stinanickel.org/index.php/de/component/spsimpleportfolio/item/2-roman-notes
Thanks for any hint!
There does not seem to be any issue in integrating both the Video Overlay and the Leaflet.markercluster plugin.
However, in your code examples you use mapid and in another one map. Make sure you do not mix up your variables name.
Furthermore, your initial view might be quite zoomed in, displaying your cluster markers out of the initial view, making you believe they are not displayed.
Using a zoom of 11 for example shows that the markers are there:
var map = L.map('map', {
center: [41.8939551, 12.479556],
minZoom: 2,
zoom: 11 //13
});
L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: ['a', 'b', 'c']
}).addTo(map);
var videoUrls = [
'http://dominique.turzer.eu/media/mod_osmod/images/Film8.mp4'
];
var bounds = L.latLngBounds([
[41.92398333, 12.45647433],
[41.863167640465, 12.502337292]
]);
var videoOverlay = L.videoOverlay(videoUrls, bounds, {
opacity: 0.7,
loop: false
}).addTo(map);
var videoElement = videoOverlay.getElement();
L.DomEvent.on(videoElement, 'ended', function() {
videoOverlay.remove();
});
var markers = [{
"name": "Ponte Milvio",
"lat": 41.9361778,
"lng": 12.47166861,
"img": '<img src="/images/banners/41-milvio.jpg" width=300/> <p><strong style="color: #cd5c5c;">{loadposition position-12}</strong></p>',
}, {
"name": "Ponte Milvio 2",
"lat": 41.9361778,
"lng": 12.47166861,
"img": '<img src="/images/banners/41-milvio.jpg" width=300/> <p><strong style="color: #cd5c5c;">{loadposition position-12}</strong></p>',
}, {
// Dummy marker to make sure it is visible on top of the video.
"name": "dummy marker",
"lat": 41.8939551,
"lng": 12.479556,
"img": "no img",
}];
var markerClusters = L.markerClusterGroup();
for (var i = 0; i < markers.length; ++i) {
var popup = markers[i].name +
'<br/>' + markers[i].img;
var m = L.marker([markers[i].lat, markers[i].lng], {
//icon: myIcon
})
.bindPopup(popup);
markerClusters.addLayer(m);
}
map.addLayer(markerClusters);<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<!-- Leaflet.markercluster assets -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster-src.js"></script>
<div id="map" style="height: 180px"></div>