Open valeriodeluca opened 4 years ago
SebastianKasan
commented
4 years ago Hello Valerio,
I just tried it, and it changes the scene when clicking on the map But of course, it is not exactly London :)...
Did you solve this, or did I misunderstood your question?
Cheers
Basti
o3web
commented
4 years ago Hello Sebastian,
For change the center location of map replace bold text with your GPS coords :
var mymap = L.map('mapid').setView([51.505, -0.09], 13); var marker0 = L.marker([51.50, -0.090]).addTo(mymap);
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(mymap);
function fmarker0() {
alert("I am an alert box!");
}
var marker0 = L.marker([51.50, -0.090]).addTo(mymap);
marker0.on('click', fmarker0 );Robin
Hi everybody,
I managed to insert a map. It is based on LeafletJS. Here the link:
http://www.mainjoin.eu/vt/floor/index.html
To insert the LeafleJS map I added a floorBar in the index.html, with the div related to the LeafletJS map inside:
div id="floorBar"> div id="mapid">
By clicking on the top right you can open and close the map.
To add the map to the "mapid" div I added this JS to the index.html:
script> var mymap = L.map('mapid').setView([51.505, -0.09], 13);
var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors' }).addTo(mymap);
function fmarker0() { alert("I am an alert box!"); }
var marker0 = L.marker([51.50, -0.090]).addTo(mymap);
marker0.on('click', fmarker0 ); /script>
Clicking on the marker0 on the map activates the JS function:
function fmarker0() { alert("I am an alert box!"); }
I ask for advice to write this function JS fmarker0() so that it changes the spherical scene inside the div "pano".
I have seen that an important group of lines that allows to pass from one sphere to another is in index.js:
// Set handler for scene switch. scenes.forEach(function(scene) { var el = document.querySelector('#sceneList .scene[data-id="' + scene.data.id + '"]'); el.addEventListener('click', function() { switchScene(scene); // On mobile, hide scene list after selecting a scene. if (document.body.classList.contains('mobile')) { hideSceneList(); } }); });
This allows the switch via the sceneList tool.
This group of lines requires these handlers in the index.html:
div id="sceneList"> ul class="scenes"> a href="#" class="scene" data-id="0-memoriale-maiella"> li class="text">Memoriale Maiella /a> a href="#" class="scene" data-id="1-sacrario-maiella"> li class="text">Sacrario Maiella /a> /ul> /div>
The handlers must be inside the div "sceneList":
This is because in the previously mentioned JS group we find the reference to #sceneList:
... var el = document.querySelector('#sceneList .scene[data-id="' + scene.data.id + '"]'); ...
I probably should also have the same thing for the #floolBar that contains the map and then add these lines in index.js:
// Set handler for scene switch in floorBar scenes.forEach(function(scene) { var el = document.querySelector('#floorBar .scene[data-id="' + scene.data.id + '"]'); el.addEventListener('click', function() { switchScene(scene); }); });
But I still can't change scene by clicking on the marker on the LeafletJS map because I don't understand what to write in the function fmarker0().
Thank you all Valerio