ferblape/index.html

## index.html
<html>
  <head>
    <title>Secciones Censales Getafe</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <style>
      #map { height: 100%; width: 100%; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">
// Global!
var geojson;

function style(feature) {
  return {
    fillColor: '#E31A1C',
    weight: 2,
    opacity: 1,
    color: 'white',
    dashArray: '3',
    fillOpacity: 0.7
  };
}

function highlightFeature(e) {
  var layer = e.target;

  layer.setStyle({
    weight: 5,
    color: '#666',
    dashArray: '',
    fillOpacity: 0.7
  });

  if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
    layer.bringToFront();
  }
}

function resetHighlight(e) {
  geojson.resetStyle(e.target);
}

function onEachFeature(feature, layer) {
  layer.on({
    mouseover: highlightFeature,
    mouseout: resetHighlight
  });
}

function map() {
  var mapboxAccessToken = "pk.eyJ1IjoiZmVyYmxhcGUiLCJhIjoiY2pqMzNnZjcxMTY1NjNyczI2ZXQ0dm1rYiJ9.yUynmgYKzaH4ALljowiFHw";
  var map = L.map('map').setView([40.304665, -3.723679], 13);

  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=' + mapboxAccessToken, {
    id: 'mapbox/light-v9',
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    tileSize: 512,
    zoomOffset: -1
  }).addTo(map);

  var request = new XMLHttpRequest();
  request.open('GET', "https://demo-datos.gobify.net/api/v1/data/data?sql=select%20geometry%20from%20secciones_censales%20where%20cumun=28065", true);

  request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
      var data = JSON.parse(request.responseText);

      var sections = {
        "type": "FeatureCollection",
        "features": data.data.map(i => JSON.parse(i.geometry))
      }
      console.log(sections)

      geojson = L.geoJson(sections, {
        style: style,
        onEachFeature: onEachFeature
      }).addTo(map);
    } else {
      console.log("ERROR! in the request")
    }
  };

  request.onerror = function() {
    // There was a connection error of some sort
  };

  request.send();
}

document.addEventListener("DOMContentLoaded", map);
    </script>
  </body>
</html>
	<html>
	<head>
	<title>Secciones Censales Getafe</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
	<style>
	#map { height: 100%; width: 100%; }
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script type="text/javascript">
	// Global!
	var geojson;

	function style(feature) {
	return {
	fillColor: '#E31A1C',
	weight: 2,
	opacity: 1,
	color: 'white',
	dashArray: '3',
	fillOpacity: 0.7
	};
	}

	function highlightFeature(e) {
	var layer = e.target;

	layer.setStyle({
	weight: 5,
	color: '#666',
	dashArray: '',
	fillOpacity: 0.7
	});

	if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
	layer.bringToFront();
	}
	}

	function resetHighlight(e) {
	geojson.resetStyle(e.target);
	}

	function onEachFeature(feature, layer) {
	layer.on({
	mouseover: highlightFeature,
	mouseout: resetHighlight
	});
	}

	function map() {
	var mapboxAccessToken = "pk.eyJ1IjoiZmVyYmxhcGUiLCJhIjoiY2pqMzNnZjcxMTY1NjNyczI2ZXQ0dm1rYiJ9.yUynmgYKzaH4ALljowiFHw";
	var map = L.map('map').setView([40.304665, -3.723679], 13);

	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=' + mapboxAccessToken, {
	id: 'mapbox/light-v9',
	attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	tileSize: 512,
	zoomOffset: -1
	}).addTo(map);

	var request = new XMLHttpRequest();
	request.open('GET', "https://demo-datos.gobify.net/api/v1/data/data?sql=select%20geometry%20from%20secciones_censales%20where%20cumun=28065", true);

	request.onload = function() {
	if (request.status >= 200 && request.status < 400) {
	var data = JSON.parse(request.responseText);

	var sections = {
	"type": "FeatureCollection",
	"features": data.data.map(i => JSON.parse(i.geometry))
	}
	console.log(sections)

	geojson = L.geoJson(sections, {
	style: style,
	onEachFeature: onEachFeature
	}).addTo(map);
	} else {
	console.log("ERROR! in the request")
	}
	};

	request.onerror = function() {
	// There was a connection error of some sort
	};

	request.send();
	}

	document.addEventListener("DOMContentLoaded", map);
	</script>
	</body>
	</html>