ericrobskyhuntley/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Linking Leaflet Layers by ID</title>
    <style>
      #map {height: 850px;}
    </style>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
    <!-- Must come after leaflet.css -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="map"></div>
    <script src="map.js" type="text/javascript"></script>
  </body>
</html>

## map.js
var animalMap = L.map('map').setView(
    center = [42.360724, -71.068711],
    zoom = 16);

var tonerLite = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', {
  attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  subdomains: 'abcd',
  minZoom: 0,
  maxZoom: 20,
  ext: 'png'
});
tonerLite.addTo(animalMap);

var bufferGroup = L.layerGroup().addTo(animalMap);

$.getJSON("test_points.geojson", function(data) {
    var point = L.geoJSON(data, {
      onEachFeature: function(feature, layer) {
        var props = feature.properties;
        layer.on('click', function() {
          addBuffer(props.CASE_ENQUIRY_ID);
        });
      }
    }).addTo(animalMap);
});

function addBuffer(id) {
  bufferGroup.clearLayers();
  $.getJSON("test_1p5km.geojson", function(data) {
    L.geoJSON(data, {
      filter: function(feature, layer) {
        return Math.round(feature.properties.CASE_ENQUI) == id;
      }
    }).addTo(bufferGroup);
  })
};

## test_1p5km.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              test_1p5km.geojson
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## test_points.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              test_points.geojson
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Linking Leaflet Layers by ID</title>
	<style>
	#map {height: 850px;}
	</style>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
	<!-- Must come after leaflet.css -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" type="text/javascript"></script>
	</head>
	<body>
	<div id="map"></div>
	<script src="map.js" type="text/javascript"></script>
	</body>
	</html>
	var animalMap = L.map('map').setView(
	center = [42.360724, -71.068711],
	zoom = 16);

	var tonerLite = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', {
	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
	subdomains: 'abcd',
	minZoom: 0,
	maxZoom: 20,
	ext: 'png'
	});
	tonerLite.addTo(animalMap);

	var bufferGroup = L.layerGroup().addTo(animalMap);

	$.getJSON("test_points.geojson", function(data) {
	var point = L.geoJSON(data, {
	onEachFeature: function(feature, layer) {
	var props = feature.properties;
	layer.on('click', function() {
	addBuffer(props.CASE_ENQUIRY_ID);
	});
	}
	}).addTo(animalMap);
	});

	function addBuffer(id) {
	bufferGroup.clearLayers();
	$.getJSON("test_1p5km.geojson", function(data) {
	L.geoJSON(data, {
	filter: function(feature, layer) {
	return Math.round(feature.properties.CASE_ENQUI) == id;
	}
	}).addTo(bufferGroup);
	})
	};