Building a street view map for a city, what is better: Build a json file and read all the scenes from that json, or create a script with variables that get the information from the database and change dynamically on the script tag?

Hello Matthew,

Thank you for making the library available. I'm working on building a street view experience using cubemap images and need to enable navigation through the map. This will be accessible to users, and I need to develop an API for the web app to request the next chunk of scenes from the database. Alternatively, should each user read from a pre-built JSON file containing all possible scenes?

Could you provide some guidance on this?

Thank you!

I'm using flask with jinja2 template to create a javascript script tag. There is a simpler way that you can recommend? Thank You.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tour</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
    <style>
    #panorama {
        width: 600px;
        height: 400px;
    }
    </style>
</head>
<body>

<div id="panorama"></div>
<script>
var load = pannellum.viewer('panorama', {   
    "default": {
        "firstScene": "{{scenes[0]['name']}}",
        "sceneFadeDuration": 1000
    },

    "scenes": { 
        {% for scene in scenes %}
        "{{scene['name']}}": {
            "title": "{{ scene['title'] }}",
            "type": "{{ scene['type'] }}",
            "panorama": "/static/images/{{ scene['image'] }}",
            "hotSpots": [
                {% for hotspot in hotspots %}
                {
                    "pitch": "{{ hotspot['pitch'] }}",
                    "yaw": "{{ hotspot['yaw'] }}",
                    "type": "{{ hotspot['type'] }}",
                    "text": "{{ hotspot['text'] }}",
                    "sceneId": "{{ hotspot['sceneId'] }}"
                },
                {% endfor %}
            ]
        },
        {% endfor %}
    }
});

    function loadScene(clicked_id){
        load.loadScene(clicked_id);
    }
</script>

</body>
</html>

This will be accessible to users, and I need to develop an API for the web app to request the next chunk of scenes from the database. Alternatively, should each user read from a pre-built JSON file containing all possible scenes?

It depends on how many scenes you have. If you have only a couple hundred, a single JSON file is probably fine and would be the simplest. If you have more, I'd use the addScene / removeScene methods to dynamically change the scenes as the user navigates.

I'm using flask with jinja2 template to create a javascript script tag. There is a simpler way that you can recommend?

Since you're using Python, I'd create the dictionary / list combination as a native object and then use the json module to convert the configuration.

mpetroff / pannellum

Building a street view map for a city, what is better: Build a json file and read all the scenes from that json, or create a script with variables that get the information from the database and change dynamically on the script tag? #1233