JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="//api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js"></script>
<div id="myMap"></div>
<div id="display"></div>

CSS

#myMap {
    width: 100%;
    height: 400px;
}

JavaScript

var map;
$.getJSON('https://maptimeatx.github.io/intro-to-turf/data/historic_landmarks.geojson', function (landmarks) {
    $.getJSON('https://maptimeatx.github.io/intro-to-turf/data/austin_districts.geojson', function (districts) {
        setupMap();
        main(landmarks, districts);
    });
});


function main(landmarks, districts) {
    console.log("landmarks:", landmarks);
    console.log("districts:", districts);
    //YOUR MISSION: Use methods from turf to 
    // have fun with the landmark and district datasets.
    //
    //You can use the showResult function to display
    //  some text below the map.
    //
    //You can use the showOnMap function to display your 
    // GeoJSON result on the map with popups.

    //Example: Show the total area of all districts
    //var totalArea = turf.area(districts);
    //showResult(totalArea);

    //Example: Find the area of each district
    //for (var i=0; i < districts.features.length; i++) {
    //    var district = districts.features[i];
    //    var districtArea = turf.area(district);
    //    district.properties.Area = districtArea;
    //}

    //showOnMap(districts);
    //showOnMap(landmarks);


    //Some suggestions:
    //  - EASY: Combine (merge) the districts into a single feature

    //var allDistricts = turf.merge(districts);
    //showOnMap(allDistricts);    

    //  - EASY: Find the center of Austin based on the districts

    //var centerPt = turf.center(districts);
    //showOnMap(centerPt);    

    //  - EASY: Find the number of landmarks in each district

    //var counted = turf.count(districts, landmarks, 'pt_count');
    //showOnMap(counted);

    //  - MEDIUM: Find all the landmarks in district 9

    //var filteredDistricts = turf.filter(districts, "DistrictNum", 9);
    //var ptsWithin = turf.within(landmarks, filteredDistricts);
    //showOnMap(ptsWithin);

    //  - HARD: Find the centroid of EACH district

    var centroidPoints = [];
    for (var i = 0; i <...