Hello everyone, welcome to Crossin’s Programming Classroom!

During various long holidays, theme parks are popular destinations for people to visit. Today, we share a case study: creating a website to showcase the distribution of major theme parks around the world.

First, let’s take a look at the final result:

Next, let’s see how to create it.

Data Source

First, let’s discuss the data source. We obtain data from the queue times website, which specializes in collecting visitor data for various parks. It contains many interesting statistics; interested friends can explore it themselves.

https://queue-times.com/

This website provides an API interface to get theme parks data worldwide:

https://queue-times.com/parks.json

Using this interface, we can obtain the following data:

[
  {
    "id":11,
    "name":"Cedar Fair Entertainment Company",
    "parks":[
      {
        "id":57,
        "name":"California's Great America",
        "country":"United States",
        "continent":"North America",
        "latitude":"37.397799",
        "longitude":"-121.974717",
        "timezone":"America/Los_Angeles"
      },
      ...
    ]
  },
  ...
]

Next, we can create the distribution of theme parks around the world based on latitude and longitude information.

Creating Maps with Highcharts

Highcharts is a very powerful JavaScript charting tool. Let’s take a quick look at how to create maps.

$(function () {
    var H = Highcharts,
        map = H.maps['countries/us/us-all'],
        chart;
    // Add series with state capital bubbles
    $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/us-capitals.json&callback=?', function (json) {
        var data = [];
        $.each(json, function (ix, entry) {
            entry.z = entry.population;
            data.push(entry);
        });
        $('#container').highcharts('Map', {
            title: {
                text: 'Highmaps lat/lon demo'
            },
            tooltip: {
                formatter: function () {
                    return this.point.capital + ', ' + this.point.parentState + '<br>Lat: ' + this.point.lat + ' Lon: ' + this.point.lon + '<br>Population: ' + this.point.population;
                },
                crosshairs: [{
                    zIndex: 5,
                    dashStyle: 'dot',
                    snap: false,
                    color: 'gray'
                }, {
                    zIndex: 5,
                    dashStyle: 'dot',
                    snap: false,
                    color: 'gray'
                }],
            },
            mapNavigation: {
                enabled: true
            },
            series: [{
                name: 'Basemap',
                mapData: map,
                borderColor: '#606060',
                nullColor: 'rgba(200, 200, 200, 0.2)',
                showInLegend: false
            }, {
                name: 'Separators',
                type: 'mapline',
                data: H.geojson(map, 'mapline'),
                color: '#101010',
                enableMouseTracking: false
            }, {
                type: 'mapbubble',
                dataLabels: {
                    enabled: true,
                    format: '{point.capital}'
                },
                name: 'Cities',
                data: data,
                maxSize: '12%',
                color: H.getOptions().colors[0]
            }]
        });
        chart = $('#container').highcharts();
    });
    // Display custom label with lat/lon next to crosshairs
    $('#container').mousemove(function (e) {
        var position;
        if (chart) {
            if (!chart.lab) {
                chart.lab = chart.renderer.text('', 0, 0)
                    .attr({
                    zIndex: 5
                })
                    .css({
                    color: '#505050'
                })
                    .add();
            }
            e = chart.pointer.normalize(e);
            position = chart.fromPointToLatLon({
                x: chart.xAxis[0].toValue(e.chartX),
                y: chart.yAxis[0].toValue(e.chartY)
            });
            chart.lab.attr({
                x: e.chartX + 5,
                y: e.chartY - 22,
                text: 'Lat: ' + position.lat.toFixed(2) + '<br>Lon: ' + position.lon.toFixed(2)
            });
        }
    });
    $('#container').mouseout(function (e) {
        if (chart && chart.lab) {
            chart.lab.destroy();
            chart.lab = null;
        };
    });
});

The created chart is shown below:

As you can see, the created map is very beautiful.

Next, we can combine Flask to create the map website.

Creating the Website

First, we process the obtained data:

@app.route('/get_park_data')
def get_park_data():
    park_data = requests.get("https://queue-times.com/zh-CN/parks.json").json()
    final_data = []
    for i in park_data:
        final_data += i['parks']
    json_data = json.dumps(final_data)
    return json_data

Then we filter out data from different continents or countries:

@app.route("/get_us_data")
def get_US_data():
    data = json.loads(get_park_data())
    data_new = []
    for i in data:
        if i['country'] == "United States" and i["name"] != "Six Flags Discovery Kingdom":
            data_new.append(i)
    json_data = json.dumps(data_new)

Next, we return the front-end HTML file:

@app.route('/world')
def world():
    return render_template('world.html')

Now let’s see how to handle the JS file:

$(function () {
    // Initiate the chart
    $.getJSON('http://127.0.0.1:5000/get_world', function (json) {
        var data = [];
        $.each(json, function (ix, entry) {
            // entry.z = entry.population;
            entry.z = randomRange(10, 50);
            entry.lat = entry.latitude;
            entry.lon = entry.longitude;
            data.push(entry);
        });
        $('#container').highcharts('Map', {
...
}

We obtain the world theme park information from the Flask service and then pass the received data to Highcharts.

Finally, we create an index page to display all the jump pages:

...
<div class="row">
        <div class="col-xs-6 col-md-4">
            <div class="thumbnail">
                <img src="/static/images/world.PNG" alt="...">
                <div class="caption">
                    <h3>World Theme Park Distribution</h3>
                    <!--<p>...</p>-->
                    <p><a href="{{url_for('world')}}" class="btn btn-primary" role="button" target="_blank">GO</a></p>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-md-4">
            <div class="thumbnail">
                <img src="/static/images/europe.PNG" alt="...">
                <div class="caption">
                    <h3>European Theme Park Distribution</h3>
                    <p><a href="{{url_for('europe')}}" class="btn btn-primary" role="button" target="_blank">GO</a></p>
                </div>
            </div>
        </div>
...

Finally, let’s take a look at the charts of theme parks around the world:

Alright, that’s all for today’s share.

To get the code, please reply with the keyword: Theme Park in the public account.

Thanks to everyone for sharing and liking!