harllos’s gists

harllos / map1.html

Last active March 14, 2019 23:55

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Eleitores do RJ 2018</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
	<script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/supercluster.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>

harllos / map2.html

Created March 15, 2019 00:00

	<body>
	<div class='viewport-full relative clip'>
	<div class='viewport-twothirds viewport-full-ml relative'>
	<div id='map' class='absolute top left right bottom'></div>
	<div class='absolute top-ml left z1 w-full w300-ml px12 py12'>
	<div class='viewport-third h-auto-ml hmax-full bg-gray-dark round-ml shadow-darken5 scroll-auto'>
	<div class='p24 my12 mx12 scroll-auto color-white'>
	<h3 class='txt-l txt-bold my6 mx6'>Eleitores RJ 2018</h3>
	<h5 class='txt-m txt-bold px12'>Agregar Eleitores:</h5>
	<div class='select-container py12' id="select-container">

harllos / map3.html

Created March 15, 2019 00:02

	<body>
	<div class='viewport-full relative clip'>
	<div class='viewport-twothirds viewport-full-ml relative'>
	<div id='map' class='absolute top left right bottom'></div>
	<div class='absolute top-ml left z1 w-full w300-ml px12 py12'>
	<div class='viewport-third h-auto-ml hmax-full bg-gray-dark round-ml shadow-darken5 scroll-auto'>
	<div class='p24 my12 mx12 scroll-auto color-white'>
	<h3 class='txt-l txt-bold my6 mx6'>Eleitores RJ 2018</h3>
	<h5 class='txt-m txt-bold px12'>Agregar Eleitores:</h5>
	<div class='select-container py12' id="select-container">

harllos / map4.html

Created March 15, 2019 00:03

	<script>
	var select_el = document.getElementById('select-option')
	var select_value = select_el.value
	var clusterRadius = 40;
	var clusterMaxZoom = 20;
	//Propriedade a ser utilizada para gerar os pontos a serem clusterizados em nosso aquivo GeoJSON. Precisa ser uma variável do tipo NUMÉRICO.
	var propertyToAggregate = "total_aptos"
	//este é o link onde armazenei nosso GeoJSON
	let data_url = "https://gist.githubusercontent.com/harllos/022379b54666103b8f842a18f71bb88a/raw/7442f4648c9f8f9371f21a79593265f9503279a6/locais_2018_mp_clean.geojson";
	var mydata;

harllos / map5.js

Created March 15, 2019 00:04

	function getFeatureDomain(geojson_data, myproperty) {
	let data_domain = []
	turf.propEach(geojson_data, function(currentProperties, featureIndex) {
	data_domain.push(Math.round(Number(currentProperties[myproperty]) * 100 / 100))
	})
	return data_domain
	}
	function createColorStops(stops_domain, scale) {
	let stops = []
	stops_domain.forEach(function(d) {

harllos / map6.js

Created March 15, 2019 00:06

	//Supercluster with property aggregation
	var cluster = supercluster({
	radius: clusterRadius,
	maxZoom: clusterMaxZoom,
	initial: function() {
	return {
	count: 0,
	sum: 0,
	min: Infinity,
	max: -Infinity

harllos / map7.js

Created March 15, 2019 00:07

	mapboxgl.accessToken = 'seu token vai aqui';
	var map = new mapboxgl.Map({
	container: 'map',
	style: "seu map style vai aqui. você poderá criar um estilizado ou utilizar um padrão do Mapbox.
	Também é possível utilizar uma solução do OpenStreet Map ou similares, que não é o escopo deste tutorial.",
	center: [-43.01,-22.495], #escolha uma latitude/longitude inicial para seu mapa
	zoom: 8, #escolha um zoom inicial
	hash: true
	});

harllos / map8.js

Created March 15, 2019 00:08

	map.on('style.load', function() {
	fetch(data_url)
	.then(res => res.json())
	.then((out) => {
	mydata = out;
	// Usando a Supercluster!
	cluster.load(mydata.features);
	// Criando o mapa
	initmap();
	})

harllos / map9.js

Created March 15, 2019 00:09

	var colorStops, radiusStops;
	function updateClusters(repaint) {
	currentZoom = map.getZoom();
	clusterData = turf.featureCollection(cluster.getClusters(worldBounds, Math.floor(currentZoom)))
	let stops_domain = chroma.limits(getFeatureDomain(clusterData, select_value), 'e', 8)
	//coloração original era definida pela linha abaixo. copiei, colei e utilizei escala logarítimica que tirei daqui: https://github.com/gka/chroma.js/
	var scale = chroma.scale(color).domain(stops_domain).mode('lab')
	colorStops = createColorStops(stops_domain, scale)
	radiusStops = createRadiusStops(stops_domain, 20, 50);
	if (repaint) {

harllos / map10.js

Created March 15, 2019 00:11

	function initmap() {
	updateClusters(false);
	select_el.addEventListener('change', function(e) {
	// Update selected aggregation on dropdown
	select_value = select_el.value
	updateClusters(true);
	})
	map.addSource("locais-2018-mp-clean", {
	type: "geojson",
	data: clusterData,

Harllos Arthur harllos