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.
    

    //Find the centroid of EACH district
    var centroidPoints = [];
    for (var i=0; i < districts.features.length; i++) {
        var district = districts.features[i];
        var districtCentroid = turf.centroid(district);
        districtCentroid.properties.DistrictNum = district.properties.DistrictNum;
        centroidPoints.push(districtCentroid)
    }
    var centroidFeatures = turf.featurecollection(centroidPoints);
    showOnMap(centroidFeatures);
}

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 =  [];
            for (prop in feature.properties) {
                if (hasOwnProperty.call(feature.properties, prop)) {
                    text.push("<b>" + prop + "</b>: " + feature.properties[prop]);
                }
              }
            if (text.length) {
                layer.bindPopup(text.join('<br>'));
            }
 ...