JSFiddle - React, Tailwind, and code Playground

by jseppi

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);
    
    
    //Some suggestions:
    //  - EASY: Find the center of Austin based on the districts
    //  - EASY: Combine (merge) the districts into a single feature
    //  - EASY: Find the number of landmarks in each district
    //  - MEDIUM: Find all the landmarks in district 9
    //  - HARD: Find the perimeter of each district
    //  - HARD: Find the centroid of EACH district
}

function showResult(any) {
    $('#display').text("Result: " + any.toString());   
}

//This function shows the given features as a layer on the map.
//It also adds popups to each of the features.
//You should not need to modify this function -- it's here as a handy helper
function showOnMap(geojsonFeatures) {
    if (!geojsonFeatures) { return; }
    L.geoJson(geojsonFeatures, {
        onEachFeature: function (feature, layer) {
            var text =  [];
         ...