How do I assign Panorama Images using geoJSON File?

[terraelfi]

Hello there, I'm creating a website with LeafletJS and Pannellum, and I'm wondering how to sync "filename" in geoJSON as a Pannellum "panorama:" object image.

What I want to do is when the user clicks on the marker on the map, the user will be loaded into the "filename" scene as a panorama image. The images are located in the folder "N98E57/(panorama_images)".

This geoJSON file contains tens of thousands of data.

This is my code in the leafletJS file including geoJSON data in there.

const mymap = L.map('map').setView([2.3105274, 102.208572], 17);
        const attribution = '&copy: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
        const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        const tiles = L.tileLayer(tileUrl,{attribution, "maxZoom":19}).addTo(mymap);

        const circleIcon = L.icon({
            iconUrl: 'img/circle.png',
            iconSize: [10,10]
        });        
        // const markers = 
        const geoJsonData =
        {
            "type": "FeatureCollection",
            "features": [
           {
             "type": "Feature",
             "geometry": {
                "type": "Point",
                "coordinates":  [ 102.208572,2.3105274 ]
             },
             "properties": {
             "filename":"N98E5700001.jpg",
             "heading":164.2536013,
             "pitch":1.029634,
             "roll":0.8173105,
             "date":"2021/07/26",
             "time":"12:06:10"
             }
           },
           {
             "type": "Feature",
             "geometry": {
                "type": "Point",
                "coordinates":  [ 102.208565,2.3105541 ]
             },
             "properties": {
             "filename":"N98E5700002.jpg",
             "heading":165.5862937,
             "pitch":0.8566141,
             "roll":1.0329013,
             "date":"2021/07/26",
             "time":"12:06:11"
             }
           },
           {
             "type": "Feature",
             "geometry": {
                "type": "Point",
                "coordinates":  [ 102.2085582,2.310581 ]
             },
             "properties": {
             "filename":"N98E5700003.jpg",
             "heading":165.1950249,
             "pitch":0.527374,
             "roll":1.0406185,
             "date":"2021/07/26",
             "time":"12:06:12"
             }
           },
           {
             "type": "Feature",
             "geometry": {
                "type": "Point",
                "coordinates":  [ 102.2085509,2.3106079 ]
             },
             "properties": {
             "filename":"N98E5700004.jpg",
             "heading":164.1811315,
             "pitch":-0.2002318,
             "roll":1.0031426,
             "date":"2021/07/26",
             "time":"12:06:13"
             }
           },
           //
           //
           //
           // More geoJson Data
           //
           //
           //
           {
             "type": "Feature",
             "geometry": {
                "type": "Point",
                "coordinates":  [ 102.2358613,2.3216851 ]
             },
             "properties": {
             "filename":"N98E5714990.jpg",
             "heading":58.7339763,
             "pitch":3.6986704,
             "roll":-1.8172238,
             "date":"2021/09/22",
             "time":"16:00:50"
             }
           },
           {
             "type": "Feature",
             "geometry": {
                "type": "Point",
                "coordinates":  [ 102.235838,2.3216676 ]
             },
             "properties": {
             "filename":"N98E5714991.jpg",
             "heading":51.1291412,
             "pitch":2.4323448,
             "roll":-2.0470457,
             "date":"2021/09/22",
             "time":"16:00:51"
             }
           },
           {
             "type": "Feature",
             "geometry": {
                "type": "Point",
                "coordinates":  [ 102.2358162,2.321651 ]
             },
             "properties": {
             "filename":"N98E5714992.jpg",
             "heading":55.0974399,
             "pitch":2.4972048,
             "roll":-0.9417798,
             "date":"2021/09/22",
             "time":"16:00:51"
             }
           }
         ]};

         var geojsonMarkerOptions = {
            radius: 3,
            fillColor: "#ff7800",
            color: "#000",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
        };

        L.geoJSON(geoJsonData, {
            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, geojsonMarkerOptions);
            }
        }).addTo(mymap);

This is my panorama.js file. So for example here, if i do it one by one it almost take weeks or more to done it by hand, copy and pasting all thousands of images.

const viewer = pannellum.viewer('panorama', {
    default: {
        firstScene: "firstRoad",
        author: "me",
        sceneFadeDuration: 500,
        autoLoad: true,
        hfov: 110,
        yaw: 180,
    },
    scenes: {
        firstRoad: {
            title: "#1",
            type: "equirectangular",
            panorama: "N98E57/(panorama_image_name)",
        },
    }
});

[mpetroff]

The configuration is a JavaScript object. You can manipulate it just like any other JavaScript object, so you can dynamically create it. If you're creating a repetitive configuration by hand, you're not thinking like a programmer.

If you're opening a new viewer in response to the click, you could dynamically create a single-scene Pannellum configuration in the click event handler you use with Leaflet and create the Pannellum viewer with that. If instead you're just changing the panorama in an existing Pannellum viewer instance, you could dynamically create a scene configuration, add it with the addScene method, and then switch to it with loadScene (or you could create a single configuration at initialization and just use loadScene).