Alex-Devoid/centroidCords1111.geojson

## centroidCords1111.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              centroidCords1111.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.
      
    
## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title></title>
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src='bundle.js'></script>

<script src="https://cdn.jsdelivr.net/npm/geolib@3.0.4/lib/index.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>

<style>
html, body {
    padding: 0px;
    margin: 0px;
}

.range{

    height: 50px;
}


.tick line {
    stroke-dasharray: 2 2 ;
    stroke: #ccc;
}
.dot {
  height: .5em;
  width: .5em;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.legend {
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}
.selectedCircle{
  stroke: #0033ff;
  fill: #0033ff;

}

</style>

</head>


<body>


<div id="map" style="width:100%; height: 500px;"></div>

<script>
!(function(){
    "use strict";


    var colorScale = d3.scaleLinear()
    .domain([1877, 2019])
    .range(["#ffb2c1","#ff0033"]);

    var map;
    var i =2019;
    var g;
    var url = 'https://gist.githubusercontent.com/Alex-Devoid/5f6665782677129909bfc76569cf118d/raw/a55a828ffc6e892192eec23777caf0c29b5c7f62/Annexations.json';
    var centroids = 'centroidCords1111.geojson';


    var circleFeature = {
   "type": "FeatureCollection",
   "features": []
}

    queue()
        .defer(d3.json, url)
        .defer(d3.json, centroids)
    .await(main);


    function main(error, data, centroids) {

      var b = true;

        addLmaps();

        var svg = d3.select("#map").select("svg");
        var g = svg.append("g").attr("class", 'city');
        var gCircles = svg.append("g").attr("class", 'circles');


        var circle = L.geoJSON(centroids, {

                pointToLayer: function(geoJsonPoint, latlng) {

                  return L.circle(latlng, {radius: 100,
                    color: colorScale(geoJsonPoint.id),
                    fillColor: colorScale(geoJsonPoint.id),
                    fillOpacity: '.7',
                    opacivty:'.5',
                    className: 'a'+geoJsonPoint.id.toString()

    }).on('click',function(d){

      b = false;
      console.log(b);
      update(data, d.target.feature.id, g, gCircles)

    })
    }

    }).addTo(map)

        drawFeatures(data, i, g, gCircles);

        back.onclick = function(){
          console.log("Called next");
            i--;
            b = false;
            console.log(b);
            update(data, i, g, gCircles)
      }

        next.onclick = function(){
          console.log("Called back");
            i++
            b = false;
            console.log(b);
            update(data, i, g, gCircles)
        }
    }

    function addLmaps() {


        map = L.map('map').setView([32.15410395888261, -110.87882493866977], 11);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

          L.svg().addTo(map);
         map.doubleClickZoom.disable();

         var legend = L.control({position: 'bottomleft'});


         legend.onAdd = function (map) {

             var div = L.DomUtil.create('div', 'info legend');

               div.innerHTML =
                     '<p ><i style="background:'+"red"  + '"></i>' + "Yearly Centroids" + '</p> <br>'+
                     '<p><i style="background:'+"blue"  + '"></i> <p id="changeYear">' + '</p></p> <br>'+
                     '<p>' + 'Change year' + '</p> <br>'+
                     '<button type="button" id="back" aria-label="Close">Back</button>'+
                     '<button type="button" id="next" aria-label="Close">Next</button>'
                     ;

             return div;
         };

         legend.addTo(map);

    }

  function projectPoint(x, y) {
        var point = map.latLngToLayerPoint(new L.LatLng(y, x));

        this.stream.point(point.x, point.y);
    }


    function drawFeatures(az, date, g, gCircles) {


        update(az,date, g, gCircles)
}


function update(az,date,g, gCircles){

  console.log(date);
  d3.select("#changeYear")
    .text(date)
  var selectedCircle1 = d3.selectAll(".leaflet-interactive")

  selectedCircle1.classed("selectedCircle", false);

  selectedCircle1.filter(`.a${date.toString()}`)
    .raise().classed("selectedCircle", true);


        g.selectAll("*").remove();
        // gCircles.selectAll("*").remove();
        var transform = d3.geoTransform({point: projectPoint});

        var path = d3.geoPath().projection(transform);

        var selected = d3.set([
         'TUC'
        ]);

var mergeTucson = topojson.merge(az, az.objects.Annexations.geometries.filter(function(d) {

          var yearBounds = new Date('')

          yearBounds.setFullYear(date)

          if (new Date(d.properties.EFF_DATE).getFullYear() <= yearBounds.getFullYear() ) {
            return selected.has(d.properties.CITY_CD)
          }


      }));

      console.log(mergeTucson);

       var mergeCentroid = path.centroid(mergeTucson);


       var latLngCentroid = map.layerPointToLatLng(mergeCentroid);
///////////

       var latLngCentroid1 =  {
     "type": "Feature",
     "id": i,
     "geometry": {
       "type": "Point",
       "coordinates": [latLngCentroid.lng, latLngCentroid.lat]
     },
     "properties": {
       "year": i
     }
   }

       circleFeature.features.push(latLngCentroid1)

       var featureElement = g.selectAll(".city")
         .data([mergeTucson]).enter().append("path")

         .attr("fill", "grey")
         .attr("fill-opacity", 0.5)
         // .attr("stroke", "#000ffd")
         ;

        map.on("moveend", update);

        update();

        function update() {

            featureElement.attr("d", path);
            // points.attr("d", path);

  }
}

}());
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<title></title>
	<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
	<script src="https://d3js.org/queue.v1.min.js"></script>
	<script src='bundle.js'></script>

	<script src="https://cdn.jsdelivr.net/npm/geolib@3.0.4/lib/index.min.js"></script>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>

	<style>
	html, body {
	padding: 0px;
	margin: 0px;
	}

	.range{

	height: 50px;
	}


	.tick line {
	stroke-dasharray: 2 2 ;
	stroke: #ccc;
	}
	.dot {
	height: .5em;
	width: .5em;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	}

	.info {
	padding: 6px 8px;
	font: 14px/16px Arial, Helvetica, sans-serif;
	background: white;
	background: rgba(255,255,255,0.8);
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	border-radius: 5px;
	}
	.legend {
	line-height: 18px;
	color: #555;
	}
	.legend i {
	width: 18px;
	height: 18px;
	float: left;
	margin-right: 8px;
	opacity: 0.7;
	}
	.selectedCircle{
	stroke: #0033ff;
	fill: #0033ff;

	}

	</style>

	</head>



	<body>


	<div id="map" style="width:100%; height: 500px;"></div>

	<script>
	!(function(){
	"use strict";


	var colorScale = d3.scaleLinear()
	.domain([1877, 2019])
	.range(["#ffb2c1","#ff0033"]);

	var map;
	var i =2019;
	var g;
	var url = 'https://gist.githubusercontent.com/Alex-Devoid/5f6665782677129909bfc76569cf118d/raw/a55a828ffc6e892192eec23777caf0c29b5c7f62/Annexations.json';
	var centroids = 'centroidCords1111.geojson';



	var circleFeature = {
	"type": "FeatureCollection",
	"features": []
	}

	queue()
	.defer(d3.json, url)
	.defer(d3.json, centroids)
	.await(main);


	function main(error, data, centroids) {

	var b = true;

	addLmaps();

	var svg = d3.select("#map").select("svg");
	var g = svg.append("g").attr("class", 'city');
	var gCircles = svg.append("g").attr("class", 'circles');


	var circle = L.geoJSON(centroids, {

	pointToLayer: function(geoJsonPoint, latlng) {

	return L.circle(latlng, {radius: 100,
	color: colorScale(geoJsonPoint.id),
	fillColor: colorScale(geoJsonPoint.id),
	fillOpacity: '.7',
	opacivty:'.5',
	className: 'a'+geoJsonPoint.id.toString()

	}).on('click',function(d){

	b = false;
	console.log(b);
	update(data, d.target.feature.id, g, gCircles)

	})
	}

	}).addTo(map)

	drawFeatures(data, i, g, gCircles);

	back.onclick = function(){
	console.log("Called next");
	i--;
	b = false;
	console.log(b);
	update(data, i, g, gCircles)
	}

	next.onclick = function(){
	console.log("Called back");
	i++
	b = false;
	console.log(b);
	update(data, i, g, gCircles)
	}
	}

	function addLmaps() {


	map = L.map('map').setView([32.15410395888261, -110.87882493866977], 11);

	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);

	L.svg().addTo(map);
	map.doubleClickZoom.disable();

	var legend = L.control({position: 'bottomleft'});



	legend.onAdd = function (map) {

	var div = L.DomUtil.create('div', 'info legend');

	div.innerHTML =
	'<p ><i style="background:'+"red" + '"></i>' + "Yearly Centroids" + '</p> <br>'+
	'<p><i style="background:'+"blue" + '"></i> <p id="changeYear">' + '</p></p> <br>'+
	'<p>' + 'Change year' + '</p> <br>'+
	'<button type="button" id="back" aria-label="Close">Back</button>'+
	'<button type="button" id="next" aria-label="Close">Next</button>'
	;

	return div;
	};

	legend.addTo(map);

	}

	function projectPoint(x, y) {
	var point = map.latLngToLayerPoint(new L.LatLng(y, x));

	this.stream.point(point.x, point.y);
	}


	function drawFeatures(az, date, g, gCircles) {



	update(az,date, g, gCircles)
	}


	function update(az,date,g, gCircles){

	console.log(date);
	d3.select("#changeYear")
	.text(date)
	var selectedCircle1 = d3.selectAll(".leaflet-interactive")

	selectedCircle1.classed("selectedCircle", false);

	selectedCircle1.filter(`.a${date.toString()}`)
	.raise().classed("selectedCircle", true);


	g.selectAll("*").remove();
	// gCircles.selectAll("*").remove();
	var transform = d3.geoTransform({point: projectPoint});

	var path = d3.geoPath().projection(transform);

	var selected = d3.set([
	'TUC'
	]);

	var mergeTucson = topojson.merge(az, az.objects.Annexations.geometries.filter(function(d) {

	var yearBounds = new Date('')

	yearBounds.setFullYear(date)

	if (new Date(d.properties.EFF_DATE).getFullYear() <= yearBounds.getFullYear() ) {
	return selected.has(d.properties.CITY_CD)
	}



	}));

	console.log(mergeTucson);

	var mergeCentroid = path.centroid(mergeTucson);


	var latLngCentroid = map.layerPointToLatLng(mergeCentroid);
	///////////

	var latLngCentroid1 = {
	"type": "Feature",
	"id": i,
	"geometry": {
	"type": "Point",
	"coordinates": [latLngCentroid.lng, latLngCentroid.lat]
	},
	"properties": {
	"year": i
	}
	}

	circleFeature.features.push(latLngCentroid1)

	var featureElement = g.selectAll(".city")
	.data([mergeTucson]).enter().append("path")

	.attr("fill", "grey")
	.attr("fill-opacity", 0.5)
	// .attr("stroke", "#000ffd")
	;

	map.on("moveend", update);

	update();

	function update() {

	featureElement.attr("d", path);
	// points.attr("d", path);

	}
	}

	}());
	</script>
	</body>
	</html>