Public
Edited
Jun 9, 2024
viewof apiKey = Inputs.text({
label: "API Token",
submit: true
})
async function fetchEvents() {
const placeId = 5391959; // San Francisco
const today = dayjs().format("YYYY-MM-DD");
const nextWeek = dayjs().add(1, "week").format("YYYY-MM-DD");
// The example call below is retrieving events in the sports category (category=sports) and sorting by the highest rank first (sort=rank).
// Add or change categories to see different types of events.
// You may want to query for events within your timezone, use the tz parameter for that
// for example active.gt=2024-01-01&active.lte=2024-01-05&active.tz=America/New_York
// By default this retrieves the first 10 events, use pagination to retrieve more
const response = await fetch(
`https://api.predicthq.com/v1/events/?place.scope=${placeId}&active.gte=${today}&active.lte=${nextWeek}&category=sports&sort=rank`,
{
headers: {
Authorization: `Bearer ${apiKey}`,
Accept: "application/json"
}
}
);
const events = await response.json();
return events;
}
import * as L from "npm:leaflet";
{
const container = DOM.element("div", {
style: `width:${width}px;height:${width / 1.6}px`
});
// Leaflet uses the div's .offsetWidth and .offsetHeight to size the map.
// Yield early so Leafleat gets the correct size
yield container;
const map = L.map(container).setView([37.7749, -122.4194], 12); // San Francisco coordinates
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
// Fetch the events and then display them
if (apiKey) {
const events = await fetchEvents();
// Loop over the events and a marker for each
events.results.forEach((event) => {
// The geo field in the events API response contains the longitude and latitude for point-type events
if (event.geo.geometry.type == "Point") {
// We check if the events are of the type point. Point type events have 2 coordinates
// for the longitude and latitude, polygon and other types have more than 2 coordinates
const longitude = event.geo.geometry.coordinates[0];
const latitude = event.geo.geometry.coordinates[1];
L.marker([latitude, longitude])
.addTo(map)
.bindPopup(`${event.title} - ${event.start_local}`);
}
});
}
return container;
}
{
if (apiKey) {
// Fetch the events and then display them
const events = await fetchEvents();
// Create a container ul
const container = document.createElement("ul");
// Loop over the events and create a list item for each event
events.results.forEach((event) => {
const listItem = document.createElement("li");
const latitude = event.geo.geometry.coordinates[0];
const longitude = event.geo.geometry.coordinates[1];
listItem.textContent = `Title: ${event.title}, Start date: ${event.start_local}, Latitude: ${latitude}, Longitude: ${longitude}, Rank: ${event.rank}`;
container.appendChild(listItem);
});
return container;
}
}
dayjs = {
const dayjs = await require('dayjs')
return dayjs
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.