Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
vlcp197 opened this issue Sep 3, 2024 · 1 comment
Labels

Comments

@vlcp197
Copy link

vlcp197 commented Sep 3, 2024

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/[email protected]/build/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/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>
@mpetroff
Copy link
Owner

mpetroff commented Sep 7, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants