russbiggs/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
</head>
<body>
    <div id='map' style='width: 800px; height: 600px;'></div>
<script>

    const style = {
        "version": 8,
          "sources": {
          "osm": {
                  "type": "raster",
                  "tiles": ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
                  "tileSize": 256,
            "attribution": "&copy; OpenStreetMap Contributors",
            "maxzoom": 19
          }
        },
        "layers": [
          {
            "id": "osm",
            "type": "raster",
            "source": "osm"
          }
        ]
      };

    var map = new maplibregl.Map({
    container: 'map',
    style: style,
    center: [0, 0],
    zoom: 1
    });
    map.on('load', function () {
        map.addSource('locations', {
            type: 'vector',
            tiles: ['https://api.openaq.org/v3/locations/tiles/{z}/{x}/{y}.pbf?parameters_id=2&active=true']
        });
        map.addLayer({
            'id': 'locations',
            'type': 'circle',
            'source': 'locations',
            'source-layer': 'default',
            'paint': {
                'circle-radius': {
                    'base': 1.75,
                    'stops': [
                        [1,2],
                    [5, 5],
                    [16, 90]
                    ]
                },
                'circle-color': ["step",
                ['get', 'value'],
                '#00FF00',
                50,
                '#FFFF00',
                100,
                '#FFA500',
                150,
                '#FF0000',
                200,
                '#A020F0',
                300,
                '#800000'
                ]
            }
        });

        map.on('click', 'locations', function (e) {
            const features = e.target.queryRenderedFeatures(e.point);
            const locationsId = features[0].properties.sensor_nodes_id;
            console.log(locationsId);
            // fetch the location via openaq api using the locations_id and navigate to page or show popup etc.
        });
    });
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
	<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
	</head>
	<body>
	<div id='map' style='width: 800px; height: 600px;'></div>
	<script>

	const style = {
	"version": 8,
	"sources": {
	"osm": {
	"type": "raster",
	"tiles": ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
	"tileSize": 256,
	"attribution": "© OpenStreetMap Contributors",
	"maxzoom": 19
	}
	},
	"layers": [
	{
	"id": "osm",
	"type": "raster",
	"source": "osm"
	}
	]
	};

	var map = new maplibregl.Map({
	container: 'map',
	style: style,
	center: [0, 0],
	zoom: 1
	});
	map.on('load', function () {
	map.addSource('locations', {
	type: 'vector',
	tiles: ['https://api.openaq.org/v3/locations/tiles/{z}/{x}/{y}.pbf?parameters_id=2&active=true']
	});
	map.addLayer({
	'id': 'locations',
	'type': 'circle',
	'source': 'locations',
	'source-layer': 'default',
	'paint': {
	'circle-radius': {
	'base': 1.75,
	'stops': [
	[1,2],
	[5, 5],
	[16, 90]
	]
	},
	'circle-color': ["step",
	['get', 'value'],
	'#00FF00',
	50,
	'#FFFF00',
	100,
	'#FFA500',
	150,
	'#FF0000',
	200,
	'#A020F0',
	300,
	'#800000'
	]
	}
	});

	map.on('click', 'locations', function (e) {
	const features = e.target.queryRenderedFeatures(e.point);
	const locationsId = features[0].properties.sensor_nodes_id;
	console.log(locationsId);
	// fetch the location via openaq api using the locations_id and navigate to page or show popup etc.
	});
	});
	</script>
	</body>
	</html>