jballelos/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This is a simple setup of Mapbox GL with d3 to show dots on a map. This can serve as a base for many interesting geographically based visualizations
Built with blockbuilder.org
forked from enjalot's block: dots on a map: setup-gl
forked from enjalot's block: dots on a map: The Counted
forked from enjalot's block: dots on a map: The Counted

  
## dots.csv

          
            name
            lat
            lng

            
              Yellowstone National Park, WY, USA
              44.427895
              -110.588379

            
              Rothrock State Forest, State College, PA, USA
              40.720585
              -77.826965

            
              Zion National Park, Utah, USA
              37.317207
              -113.022537

            
              Yosemite National Park, California, USA
              37.865101
              -119.53833

            
              Yellowstone National Park, Wyoming, USA
              44.429764
              -110.584663

            
              Stanislaus National Forest, Camp Connell, CA, USA
              38.235195
              -120.066483

            
              Haleakala National Park, Hawaii, USA
              20.701283
              -156.173325

            
              Malibu Creek State Park, Calabasas, CA, USA
              34.105156
              -118.731316

            
              Manti-La Sal National Forest, Price, UT, USA
              39.18705
              -111.37989

            
              Cherry Creek State Park, Aurora, CO, USA
              39.639973
              -104.831863

            
              Kissimmee Prairie Preserve State Park, Okeechobee, FL, USA
              27.612417
              -81.053383

            
              Garden of Gods, Colorado Springs, CO, USA
              38.87384
              -104.886665

            
              Petrified Forest National Park
              34.909988
              -109.806793

            
              Chattahoochee National Forest, Suches, GA, USA
              34.765972
              -84.143517

            
              Fort Berthold Indian Reservation, ND, USA
              47.68388
              -102.354126

            
              Chattahoochee National Forest, Suches, GA, USA
              34.765972
              -84.143517

            
              Little Sandy National Wildlife Refuge, Lindale, TX, USA
              32.590797
              -95.273666

            
              Siuslaw National Forest, Tidewater, OR, USA
              44.358715
              -123.829994

            
              Kings Canyon National Park, California, USA
              36.887856
              -118.555145

            
              Ruffner Mountain Nature Center, Birmingham, AL, USA
              33.55899
              -86.707016

            
              Yellowstone National Park, WY, USA
              44.427284
              -110.584389

            
              Kings Mountain State Park, Blacksburg, SC, USA
              35.130459
              -81.345444

            
              North Maine Woods, ME, USA
              46.867702
              -69.480286

            
              Honolulu Watershed Forest Preserve, Honolulu, HI, USA
              21.363251
              -157.781265

            
              Oleta River State Park, North Miami, FL, USA
              25.921614
              -80.144402

            
              Grant Park, Chicago, IL, USA
              41.876465
              -87.621887

            
              Wisconsin Interstate State Park
              45.398449
              -92.645126

            
              Bridge Creek Wildlife Area, Ukiah, OR, USA
              45.043449
              -118.949318

            
              Willamette National Forest, Blue River, OR, USA
              44.060471
              -122.091736

            
              Golden Gate Canyon State Park, CA, USA
              39.814339
              -105.395622

            
              William F Hayden Green Mountain Park, Lakewood, CO, USA
              39.702827
              -105.175636

            
              Cades Cove, Great Smoky Mountains National Park, Tennessee, USA
              35.59367
              -83.824997

            
              Lantz Farm and Nature Preserve, WV, USA
              39.516754
              -80.649948

            
              Myakka State Forest, Englewood, FL, USA
              26.988386
              -82.286552

            
              Lake Eola Park, Orlando, FL, USA
              28.545021
              -81.372856

            
              Gulf State Park, Gulf Shores, AL, USA
              30.262793
              -87.636337

            
              Egypt Valley Wildlife Area, PIEDMONT, OH
              40.115486
              -81.11409

            
              Kennesaw Mountain National Battlefield Park, Cobb County, Georgia, USA
              33.976376
              -84.579163

            
              Shenandoah National Park, Shenandoah, VA, USA
              38.700516
              -78.292694

            
              Ricketts Glen State Park, PA, USA
              41.339184
              -76.290436

            
              El Dorado State Park, Kansas, USA
              37.866047
              -96.756935

            
              Polihale State Park, Waimea, HI, USA
              22.079357
              -159.761642

            
              Lake Wateree State Recreation Area, NC, USA
              34.375179
              -80.863495

            
              Kekaha Kai State Park, Kona, HI, USA
              19.788027
              -156.023453

            
              National Bison Range, Montana, USA
              47.342545
              -114.209747

            
              Castlewood Canyon State Park
              39.319424
              -104.730606

            
              Hillman State Park, Burgettstown, PA, USA
              40.453739
              -80.400864

            
              Little Big Econ State Forest, FL, the US
              28.673721
              -81.104507

            
              Eagle Bluffs Conservation Area, Columbia, USA
              38.848934
              -92.431839

            
              Mount Mitchell State Park, NC, the US
              35.768803
              -82.306137

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.css' rel='stylesheet' />

  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map {
      position:absolute;
      width: 100%;
      height: 100%;
    }
    svg {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>

    mapboxgl.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiJjaWhtdmxhNTIwb25zdHBsejk0NGdhODJhIn0.2-F2hS_oTZenAWc0BMf_uw'

    //Setup mapbox-gl map
    var map = new mapboxgl.Map({
      container: 'map', // container id
      style: 'mapbox://styles/enjalot/cihmvv7kg004v91kn22zjptsc',
      center: [-96,39],
      zoom: 3.5,

    })
    map.scrollZoom.disable()
    map.addControl(new mapboxgl.Navigation());

    // Setup our svg layer that we can manipulate with d3
    var container = map.getCanvasContainer()
    var svg = d3.select(container).append("svg")


    function project(d) {
      return map.project(getLL(d));
    }
    function getLL(d) {
      return new mapboxgl.LngLat(+d.lng, +d.lat)
    }

    d3.csv("dots.csv", function(err, data) {
      //console.log(data[0], getLL(data[0]), project(data[0]))
      var dots = svg.selectAll("circle.dot")
        .data(data)

      dots.enter().append("circle").classed("dot", true)
      .attr("r", 1)
      .style({
        fill: "#0082a3",
        "fill-opacity": 0.6,
        stroke: "#004d60",
        "stroke-width": 1
      })
      .transition().duration(1000)
      .attr("r", 6)

      function render() {
        dots
        .attr({
          cx: function(d) {
            var x = project(d).x;
            return x
          },
          cy: function(d) {
            var y = project(d).y;
            return y
          },
        })
      }

      // re-render our visualization whenever the view changes
      map.on("viewreset", function() {
        render()
      })
      map.on("move", function() {
        render()
      })

      // render our initial visualization
      render()
    })


  </script>
</body>
name	lat	lng
Yellowstone National Park, WY, USA	44.427895	-110.588379
Rothrock State Forest, State College, PA, USA	40.720585	-77.826965
Zion National Park, Utah, USA	37.317207	-113.022537
Yosemite National Park, California, USA	37.865101	-119.53833
Yellowstone National Park, Wyoming, USA	44.429764	-110.584663
Stanislaus National Forest, Camp Connell, CA, USA	38.235195	-120.066483
Haleakala National Park, Hawaii, USA	20.701283	-156.173325
Malibu Creek State Park, Calabasas, CA, USA	34.105156	-118.731316
Manti-La Sal National Forest, Price, UT, USA	39.18705	-111.37989
Cherry Creek State Park, Aurora, CO, USA	39.639973	-104.831863
Kissimmee Prairie Preserve State Park, Okeechobee, FL, USA	27.612417	-81.053383
Garden of Gods, Colorado Springs, CO, USA	38.87384	-104.886665
Petrified Forest National Park	34.909988	-109.806793
Chattahoochee National Forest, Suches, GA, USA	34.765972	-84.143517
Fort Berthold Indian Reservation, ND, USA	47.68388	-102.354126
Chattahoochee National Forest, Suches, GA, USA	34.765972	-84.143517
Little Sandy National Wildlife Refuge, Lindale, TX, USA	32.590797	-95.273666
Siuslaw National Forest, Tidewater, OR, USA	44.358715	-123.829994
Kings Canyon National Park, California, USA	36.887856	-118.555145
Ruffner Mountain Nature Center, Birmingham, AL, USA	33.55899	-86.707016
Yellowstone National Park, WY, USA	44.427284	-110.584389
Kings Mountain State Park, Blacksburg, SC, USA	35.130459	-81.345444
North Maine Woods, ME, USA	46.867702	-69.480286
Honolulu Watershed Forest Preserve, Honolulu, HI, USA	21.363251	-157.781265
Oleta River State Park, North Miami, FL, USA	25.921614	-80.144402
Grant Park, Chicago, IL, USA	41.876465	-87.621887
Wisconsin Interstate State Park	45.398449	-92.645126
Bridge Creek Wildlife Area, Ukiah, OR, USA	45.043449	-118.949318
Willamette National Forest, Blue River, OR, USA	44.060471	-122.091736
Golden Gate Canyon State Park, CA, USA	39.814339	-105.395622
William F Hayden Green Mountain Park, Lakewood, CO, USA	39.702827	-105.175636
Cades Cove, Great Smoky Mountains National Park, Tennessee, USA	35.59367	-83.824997
Lantz Farm and Nature Preserve, WV, USA	39.516754	-80.649948
Myakka State Forest, Englewood, FL, USA	26.988386	-82.286552
Lake Eola Park, Orlando, FL, USA	28.545021	-81.372856
Gulf State Park, Gulf Shores, AL, USA	30.262793	-87.636337
Egypt Valley Wildlife Area, PIEDMONT, OH	40.115486	-81.11409
Kennesaw Mountain National Battlefield Park, Cobb County, Georgia, USA	33.976376	-84.579163
Shenandoah National Park, Shenandoah, VA, USA	38.700516	-78.292694
Ricketts Glen State Park, PA, USA	41.339184	-76.290436
El Dorado State Park, Kansas, USA	37.866047	-96.756935
Polihale State Park, Waimea, HI, USA	22.079357	-159.761642
Lake Wateree State Recreation Area, NC, USA	34.375179	-80.863495
Kekaha Kai State Park, Kona, HI, USA	19.788027	-156.023453
National Bison Range, Montana, USA	47.342545	-114.209747
Castlewood Canyon State Park	39.319424	-104.730606
Hillman State Park, Burgettstown, PA, USA	40.453739	-80.400864
Little Big Econ State Forest, FL, the US	28.673721	-81.104507
Eagle Bluffs Conservation Area, Columbia, USA	38.848934	-92.431839
Mount Mitchell State Park, NC, the US	35.768803	-82.306137
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.css' rel='stylesheet' />

	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	#map {
	position:absolute;
	width: 100%;
	height: 100%;
	}
	svg {
	position: absolute;
	width: 100%;
	height: 100%;
	}
	</style>
	</head>

	<body>
	<div id="map"></div>
	<script>

	mapboxgl.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiJjaWhtdmxhNTIwb25zdHBsejk0NGdhODJhIn0.2-F2hS_oTZenAWc0BMf_uw'

	//Setup mapbox-gl map
	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/enjalot/cihmvv7kg004v91kn22zjptsc',
	center: [-96,39],
	zoom: 3.5,

	})
	map.scrollZoom.disable()
	map.addControl(new mapboxgl.Navigation());

	// Setup our svg layer that we can manipulate with d3
	var container = map.getCanvasContainer()
	var svg = d3.select(container).append("svg")


	function project(d) {
	return map.project(getLL(d));
	}
	function getLL(d) {
	return new mapboxgl.LngLat(+d.lng, +d.lat)
	}

	d3.csv("dots.csv", function(err, data) {
	//console.log(data[0], getLL(data[0]), project(data[0]))
	var dots = svg.selectAll("circle.dot")
	.data(data)

	dots.enter().append("circle").classed("dot", true)
	.attr("r", 1)
	.style({
	fill: "#0082a3",
	"fill-opacity": 0.6,
	stroke: "#004d60",
	"stroke-width": 1
	})
	.transition().duration(1000)
	.attr("r", 6)

	function render() {
	dots
	.attr({
	cx: function(d) {
	var x = project(d).x;
	return x
	},
	cy: function(d) {
	var y = project(d).y;
	return y
	},
	})
	}

	// re-render our visualization whenever the view changes
	map.on("viewreset", function() {
	render()
	})
	map.on("move", function() {
	render()
	})

	// render our initial visualization
	render()
	})


	</script>
	</body>