lewis500/.block

## .block
license: mit

## code.js
var center = [-0.118, 51.511];
var accessToken = 'pk.eyJ1IjoibGV3aXM1MDAiLCJhIjoiY2l0Z2V3ZWRhMDBsbjJvbWs4cHVvNzdrdSJ9.7d92mc2FzeKfYeraoLIljg';

//=====CREATE FAKE DATA=====

let features = (function() {

  function randomer(x, scale) {
    return x + (Math.random() - 0.5) * scale
  }

  let n = 10000;
  let features = Array(n);
  for (let i = 0; i < n; i++) {
    features[i] = {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [randomer(center[0], 0.5), randomer(center[1], 0.4)]
      },
      properties: {
        hello: 'hello'
      }
    };
  }
  return features;
})();


//this is my geojson!
let geojson = {
  type: 'FeatureCollection',
  features: features
};

//create mapbox-gl map
function setupMapBox() {

  mapboxgl.accessToken = accessToken;


  var map = new mapboxgl.Map({
    style: 'mapbox://styles/lewis500/civ00jva200m82irrxrhqyqiv',
    center: center,
    zoom: 13,
    interactive: true,
    container: 'mapbox'
  });

  map.on("load", () => {

    map.addSource('data', {
      type: 'geojson',
      data: geojson
    });

    map.addLayer({
      id: 'points',
      source: 'data',
      type: 'circle',
      paint: {
        'circle-radius': 3,
        'circle-color': '#03A9F4'
      }
    })

  });

  // Create a popup, but don't add it to the map yet.
  var popup = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false
  });

  map.on('mousemove', e => {
    var features = map.queryRenderedFeatures(e.point, {
      layers: ['points']
    });
    // Change the cursor style as a UI indicator.
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

    if (!features.length) {
      popup.remove();
      return;
    }

    var feature = features[0];

    // Populate the popup and set its coordinates
    // based on the feature found.
    popup.setLngLat(feature.geometry.coordinates)
      .setHTML(feature.properties.hello)
      .addTo(map);
  });

}

setupMapBox();

//create leaflet map
function setupLeaflet() {
  var map = L.map('leaflet')
    .setView(center.reverse(), 13);

  https: //api.mapbox.com/styles/v1/lewis500/civ00jva200m82irrxrhqyqiv/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibGV3aXM1MDAiLCJhIjoiY2l0Z2V3ZWRhMDBsbjJvbWs4cHVvNzdrdSJ9.7d92mc2FzeKfYeraoLIljg

    L.tileLayer('https://api.mapbox.com/styles/v1/lewis500/civ00jva200m82irrxrhqyqiv/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibGV3aXM1MDAiLCJhIjoiY2l0Z2V3ZWRhMDBsbjJvbWs4cHVvNzdrdSJ9.7d92mc2FzeKfYeraoLIljg', {
      markerZoomAnimation: false
    }).addTo(map);

  var geojsonMarkerOptions = {
    radius: 3,
    fillColor: "#03A9F4",
    // color: "#fff",
    weight: 0,
    opacity: 1,
    fillOpacity: 0.8
  };


  L.geoJSON(geojson, {
    pointToLayer: (feature, latlng) => {
      var marker = L.circleMarker(latlng, geojsonMarkerOptions);
      marker.bindPopup(feature.properties.hello);
      marker.on('mouseover', function(e) {
        this.openPopup();
      });
      marker.on('mouseout', function(e) {
        this.closePopup();
      });
      return marker;
    }
  }).addTo(map);

}

setupLeaflet();

## index.html
<!doctype html>
<html>

<head>
    <title>mapbox example</title>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css' rel='stylesheet' />
    <link href="style.css" rel='stylesheet'/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

</head>

<body>
		<div id='main'>
	    <div class='col mapbox'>
	    	<div id='mapbox'></div>
	    	<div class='title'>Mapbox</div>
	    </div>
	    <div class='col leaflet'>
				<div id='leaflet'></div>
	    	<div class='title'>Leaflet</div>
			</div>

		</div>
    <script src="code.js"></script>
</body>

</html>

## style.css
#main{
	font-family: Arial;
	display: flex;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left:0;
}

.col{
	width: 50%;
	height: 100%;
	position: relative;
}

#mapbox{
	width: 100%;
	height: 100%;
	z-index: 1;
}

.leaflet{
	border-left: 3px solid white;
}

#leaflet{
	width: 100%;
	height: 100%;
	z-index: 1;
}

.title{
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 10px;
	z-index: 5;
	color: black;
	font-size: 36px;
	background-color: rgba(255,255,255,.65) ;
}

.leaflet-pane{
	z-index: 1;

}
	var center = [-0.118, 51.511];
	var accessToken = 'pk.eyJ1IjoibGV3aXM1MDAiLCJhIjoiY2l0Z2V3ZWRhMDBsbjJvbWs4cHVvNzdrdSJ9.7d92mc2FzeKfYeraoLIljg';

	//=====CREATE FAKE DATA=====

	let features = (function() {

	function randomer(x, scale) {
	return x + (Math.random() - 0.5) * scale
	}

	let n = 10000;
	let features = Array(n);
	for (let i = 0; i < n; i++) {
	features[i] = {
	type: "Feature",
	geometry: {
	type: "Point",
	coordinates: [randomer(center[0], 0.5), randomer(center[1], 0.4)]
	},
	properties: {
	hello: 'hello'
	}
	};
	}
	return features;
	})();


	//this is my geojson!
	let geojson = {
	type: 'FeatureCollection',
	features: features
	};

	//create mapbox-gl map
	function setupMapBox() {

	mapboxgl.accessToken = accessToken;


	var map = new mapboxgl.Map({
	style: 'mapbox://styles/lewis500/civ00jva200m82irrxrhqyqiv',
	center: center,
	zoom: 13,
	interactive: true,
	container: 'mapbox'
	});

	map.on("load", () => {

	map.addSource('data', {
	type: 'geojson',
	data: geojson
	});

	map.addLayer({
	id: 'points',
	source: 'data',
	type: 'circle',
	paint: {
	'circle-radius': 3,
	'circle-color': '#03A9F4'
	}
	})

	});

	// Create a popup, but don't add it to the map yet.
	var popup = new mapboxgl.Popup({
	closeButton: false,
	closeOnClick: false
	});

	map.on('mousemove', e => {
	var features = map.queryRenderedFeatures(e.point, {
	layers: ['points']
	});
	// Change the cursor style as a UI indicator.
	map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

	if (!features.length) {
	popup.remove();
	return;
	}

	var feature = features[0];

	// Populate the popup and set its coordinates
	// based on the feature found.
	popup.setLngLat(feature.geometry.coordinates)
	.setHTML(feature.properties.hello)
	.addTo(map);
	});

	}

	setupMapBox();

	//create leaflet map
	function setupLeaflet() {
	var map = L.map('leaflet')
	.setView(center.reverse(), 13);

	https: //api.mapbox.com/styles/v1/lewis500/civ00jva200m82irrxrhqyqiv/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibGV3aXM1MDAiLCJhIjoiY2l0Z2V3ZWRhMDBsbjJvbWs4cHVvNzdrdSJ9.7d92mc2FzeKfYeraoLIljg

	L.tileLayer('https://api.mapbox.com/styles/v1/lewis500/civ00jva200m82irrxrhqyqiv/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibGV3aXM1MDAiLCJhIjoiY2l0Z2V3ZWRhMDBsbjJvbWs4cHVvNzdrdSJ9.7d92mc2FzeKfYeraoLIljg', {
	markerZoomAnimation: false
	}).addTo(map);

	var geojsonMarkerOptions = {
	radius: 3,
	fillColor: "#03A9F4",
	// color: "#fff",
	weight: 0,
	opacity: 1,
	fillOpacity: 0.8
	};


	L.geoJSON(geojson, {
	pointToLayer: (feature, latlng) => {
	var marker = L.circleMarker(latlng, geojsonMarkerOptions);
	marker.bindPopup(feature.properties.hello);
	marker.on('mouseover', function(e) {
	this.openPopup();
	});
	marker.on('mouseout', function(e) {
	this.closePopup();
	});
	return marker;
	}
	}).addTo(map);

	}

	setupLeaflet();
	<!doctype html>
	<html>

	<head>
	<title>mapbox example</title>
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css' rel='stylesheet' />
	<link href="style.css" rel='stylesheet'/>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

	</head>

	<body>
	<div id='main'>
	<div class='col mapbox'>
	<div id='mapbox'></div>
	<div class='title'>Mapbox</div>
	</div>
	<div class='col leaflet'>
	<div id='leaflet'></div>
	<div class='title'>Leaflet</div>
	</div>

	</div>
	<script src="code.js"></script>
	</body>

	</html>
	#main{
	font-family: Arial;
	display: flex;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left:0;
	}

	.col{
	width: 50%;
	height: 100%;
	position: relative;
	}

	#mapbox{
	width: 100%;
	height: 100%;
	z-index: 1;
	}

	.leaflet{
	border-left: 3px solid white;
	}

	#leaflet{
	width: 100%;
	height: 100%;
	z-index: 1;
	}

	.title{
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 10px;
	z-index: 5;
	color: black;
	font-size: 36px;
	background-color: rgba(255,255,255,.65) ;
	}

	.leaflet-pane{
	z-index: 1;

	}