Geolocation: Hello World

Get all geolocation data fields and display them in HTML.

If you want to get started quickly, click on the button below.

This creates a repository in your GitHub account and deploys the application to Cloudflare Workers.

export default {
  async fetch(request) {
    let html_content = "";
    let html_style =
      "body{padding:6em; font-family: sans-serif;} h1{color:#f6821f;}";

    html_content += "<p> Colo: " + request.cf.colo + "</p>";
    html_content += "<p> Country: " + request.cf.country + "</p>";
    html_content += "<p> City: " + request.cf.city + "</p>";
    html_content += "<p> Continent: " + request.cf.continent + "</p>";
    html_content += "<p> Latitude: " + request.cf.latitude + "</p>";
    html_content += "<p> Longitude: " + request.cf.longitude + "</p>";
    html_content += "<p> PostalCode: " + request.cf.postalCode + "</p>";
    html_content += "<p> MetroCode: " + request.cf.metroCode + "</p>";
    html_content += "<p> Region: " + request.cf.region + "</p>";
    html_content += "<p> RegionCode: " + request.cf.regionCode + "</p>";
    html_content += "<p> Timezone: " + request.cf.timezone + "</p>";

    let html = `<!DOCTYPE html>
      <head>
        <title> Geolocation: Hello World </title>
        <style> ${html_style} </style>
      </head>
      <body>
        <h1>Geolocation: Hello World!</h1>
        <p>You now have access to geolocation data about where your user is visiting from.</p>
        ${html_content}
      </body>`;

    return new Response(html, {
      headers: {
        "content-type": "text/html;charset=UTF-8",
      },
    });
  },
};

export default {
  async fetch(request): Promise<Response> {
    let html_content = "";
    let html_style =
      "body{padding:6em; font-family: sans-serif;} h1{color:#f6821f;}";

    html_content += "<p> Colo: " + request.cf.colo + "</p>";
    html_content += "<p> Country: " + request.cf.country + "</p>";
    html_content += "<p> City: " + request.cf.city + "</p>";
    html_content += "<p> Continent: " + request.cf.continent + "</p>";
    html_content += "<p> Latitude: " + request.cf.latitude + "</p>";
    html_content += "<p> Longitude: " + request.cf.longitude + "</p>";
    html_content += "<p> PostalCode: " + request.cf.postalCode + "</p>";
    html_content += "<p> MetroCode: " + request.cf.metroCode + "</p>";
    html_content += "<p> Region: " + request.cf.region + "</p>";
    html_content += "<p> RegionCode: " + request.cf.regionCode + "</p>";
    html_content += "<p> Timezone: " + request.cf.timezone + "</p>";

    let html = `<!DOCTYPE html>
      <head>
        <title> Geolocation: Hello World </title>
        <style> ${html_style} </style>
      </head>
      <body>
        <h1>Geolocation: Hello World!</h1>
        <p>You now have access to geolocation data about where your user is visiting from.</p>
        ${html_content}
      </body>`;

    return new Response(html, {
      headers: {
        "content-type": "text/html;charset=UTF-8",
      },
    });
  },
} satisfies ExportedHandler;

from workers import Response

async def on_fetch(request):
    html_content = ""
    html_style = "body{padding:6em font-family: sans-serif;} h1{color:#f6821f;}"

    html_content += "<p> Colo: " + request.cf.colo + "</p>"
    html_content += "<p> Country: " + request.cf.country + "</p>"
    html_content += "<p> City: " + request.cf.city + "</p>"
    html_content += "<p> Continent: " + request.cf.continent + "</p>"
    html_content += "<p> Latitude: " + request.cf.latitude + "</p>"
    html_content += "<p> Longitude: " + request.cf.longitude + "</p>"
    html_content += "<p> PostalCode: " + request.cf.postalCode + "</p>"
    html_content += "<p> Region: " + request.cf.region + "</p>"
    html_content += "<p> RegionCode: " + request.cf.regionCode + "</p>"
    html_content += "<p> Timezone: " + request.cf.timezone + "</p>"

    html = f"""
    <!DOCTYPE html>
      <head>
        <title> Geolocation: Hello World </title>
        <style> {html_style} </style>
      </head>
      <body>
        <h1>Geolocation: Hello World!</h1>
        <p>You now have access to geolocation data about where your user is visiting from.</p>
        {html_content}
      </body>
    """

    headers = {"content-type": "text/html;charset=UTF-8"}
    return Response(html, headers=headers)

import { Hono } from "hono";
import { html } from "hono/html";

// Define the RequestWithCf interface to add Cloudflare-specific properties
interface RequestWithCf extends Request {
  cf: {
    // Cloudflare-specific properties for geolocation
    colo: string;
    country: string;
    city: string;
    continent: string;
    latitude: string;
    longitude: string;
    postalCode: string;
    metroCode: string;
    region: string;
    regionCode: string;
    timezone: string;
    // Add other CF properties as needed
  };
}

const app = new Hono();

app.get("*", (c) => {
  // Cast the raw request to include Cloudflare-specific properties
  const request = c.req.raw;

  // Define styles
  const html_style =
    "body{padding:6em; font-family: sans-serif;} h1{color:#f6821f;}";

  // Create content with geolocation data
  let html_content = html` <p>Colo: ${request.cf.colo}</p>
    <p>Country: ${request.cf.country}</p>
    <p>City: ${request.cf.city}</p>
    <p>Continent: ${request.cf.continent}</p>
    <p>Latitude: ${request.cf.latitude}</p>
    <p>Longitude: ${request.cf.longitude}</p>
    <p>PostalCode: ${request.cf.postalCode}</p>
    <p>MetroCode: ${request.cf.metroCode}</p>
    <p>Region: ${request.cf.region}</p>
    <p>RegionCode: ${request.cf.regionCode}</p>
    <p>Timezone: ${request.cf.timezone}</p>`;

  // Compose the full HTML
  const htmlContent = html`<!DOCTYPE html>
    <head>
      <title>Geolocation: Hello World</title>
      <style>
        ${html_style}
      </style>
    </head>
    <body>
      <h1>Geolocation: Hello World!</h1>
      <p>
        You now have access to geolocation data about where your user is
        visiting from.
      </p>
      ${html_content}
    </body> `;

  // Return the HTML response
  return c.html(htmlContent);
});

export default app;

Was this helpful?

Community
X
Discord
YouTube
GitHub