Intro to Leaflet  |  GIS Analysis: Turf Center

This is an example of the turf.centerOfMass() function, which is being called on every county in the country. The resulting points are added to the map as individual L.circleMarker() features added to an L.geoJSON() feature. The radius is the winning vote percentage of the 2016 presidential race times the county population (divided by 60,000 to make them legible on the map). This example also highlights the vastly different maps that can be made from the same dataset.

« GIS Analysis: Turf Within

Full Map Code

      
var map = L.map("map");

map.setView([40.3,-96.6], 5);

L.hash(map);

L.control.scale().addTo(map);

var layerControl = new L.control.layers(null, null).addTo(map);

/*Easily add basemaps or baselayers with L.tileLayer wms layers can also be added with L.tileLayer.wms */

var OpenStreetMap_HOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
}).addTo(map);

layerControl.addBaseLayer(OpenStreetMap_HOT, "Streets");

var url = "/gis-tutorials/tutorial-data/counties.topojson";

var counties = L.geoJson(null, {
  style: function(feature) {
    switch (feature.properties.winner) {
      case "Trump":
        return {
          fillColor: "red",
          fillOpacity: 0.4,
          color: 'white',
          weight: 1
        }
      default:
        return {
          fillColor: "blue",
          fillOpacity: 0.4,
          color: 'white',
          weight: 1
        }
    }
  },
  onEachFeature: function(feature, county) {
    var info = county.feature.properties.NAME +
      "<" + "br" + ">" + county.feature.properties.winner;
    county.bindPopup(info);
  }
}).addTo(map);

layerControl.addOverlay(counties, "Counties");

var cData = omnivore.topojson(url, null, counties);

var countyPoints = L.geoJson(null, {
  pane: 'makerPane'
}).addTo(map);
layerControl.addOverlay(countyPoints, "Winner Percentage * Population")
var x = 0;
var r = 1;
var v = 1;
var c = 'gray';
var o = 0.7;
cData.on('ready', function(data) {
  counties.eachLayer(function(layer) {
    var center = turf.centerOfMass(layer.toGeoJSON());
    if (x == 0) {console.log(center);}
    x = 1;
    if (layer.feature.properties.winner == 'Trump') {
      v = ((layer.feature.properties.POPULATION) * (layer.feature.properties["per_gop"]));
      r = v/60000;
      c = 'red';
      o = layer.feature.properties["per_gop"]
    }
    if (layer.feature.properties.winner == 'Hillary') {
      v = ((layer.feature.properties.POPULATION) * (layer.feature.properties["per_dem"]));
      r = v/60000;
      c = 'blue';
      o = layer.feature.properties["per_dem"]
    }
    if (r < 1 ) {r = 1}
    var marker = L.circleMarker([center.geometry.coordinates[1],center.geometry.coordinates[0]], {radius: r, opacity: o, fillOpacity: o, color: c, fillColor: c});
    marker.bindPopup('County Population * Percent of Winner Vote: ' + v.toFixed(0));
    countyPoints.addLayer(marker);
  })
});