CODEWITHSUNDEEP
pythonhtmlflaskjinja2mapbox-gl
Will Layton
Will Layton

Reputation: 35

Pull array From Python and use it in HTML <script> js

I am trying to make a website using the Green Events API (http://www.trumba.com/calendars/green-events.rss) i have used google geocode to convert each location from each event into lgn and lat to then parse into HTML and render out with MapBox using the tags (image of web below)

enter image description here (The marker that can be seen is hard coded and not automatic, as seen further down to test)

I parse through a altered version of the API turned into a 2D array:

FORMAT:

GreenEventsArray = [[name, tag, location, time, description, lat, lgn]]

This array is then parse through to html in python like so:

@app.route("/")
@app.route("/events")
def main():
    print(GreenEventsArray)
    return render_template("Index.html", GreenEventsArray = GreenEventsArray, data=json.dumps(GreenEventsArray))

the script at the bottom of the HTMl looks like this:

<script>
        // TO MAKE THE MAP APPEAR YOU MUST
        // ADD YOUR ACCESS TOKEN FROM
        // https://account.mapbox.com
        mapboxgl.accessToken = '<My Token>';
        var map = new mapboxgl.Map({
            container: 'mapBox', // container id
            style: 'mapbox://styles/wlayton/ckp4m56hj0ekr17qp0zdeb2v2', // style URL
            center: [153, -27.47], // starting position [lng, lat]
            zoom: 9 // starting zoom
        });

        map.addControl(new mapboxgl.NavigationControl());
        
        // add markers to map
        var geojson = {{GreenEventsArray | safe}}
        window.alert(geojson[1][6]); //using as a test to check what it'll print
        //point = new mapboxgl.Marker()
        //      .setLngLat([geojson[1][7], geojson[1][6]])
        //      .addTo(map);
        geojson.forEach(function(marker) {
            window.alert(marker[6]);
            // create a HTML element for each feature
            var el = document.createElement('div');
            el.className = 'marker';

            // make a marker for each feature and add to the map
            new mapboxgl.Marker(el)
                .setLngLat([marker[6], marker[7]])
                .addTo(map);
        });

</script>

But the retrieved GreenEventsArray - stored as data i the HTML script - in html only gets the first entry of the Array and i want it to look through and create a marker for each event using the lat and lgn.

Upvotes: 1

Views: 352

Answers (1)

Noah Burchell
Noah Burchell

Reputation: 27

The problem may be that you need the API key. Line 5 in html "mapboxgl.accessToken = 'My Token';"

Upvotes: 0

Related Questions