Edge Developer Platform
  • Edge Functions
    • Overview
    • Getting Started
    • Operation Guide
      • Function Management
      • Web Debugging
      • Function Trigger
      • Environment Variable
    • Runtime APIs
      • addEventListener
      • Cache
      • Cookies
      • Encoding
      • Fetch
      • FetchEvent
      • Headers
      • Request
      • Response
      • Streams
        • ReadableStream
        • ReadableStreamBYOBReader
        • ReadableStreamDefaultReader
        • TransformStream
        • WritableStream
        • WritableStreamDefaultWriter
      • Web Crypto
      • Web standards
      • Images
        • ImageProperties
    • Sample Functions
      • Example Overview
      • 301 Redirect
      • Obtaining Client URL Information
      • Customization Based on Client Geo Location
      • Obtaining Client Geo Location Information
      • Batch Redirect
      • Returning an HTML Page
      • Returning a JSON Object
      • Fetch Remote Resources
      • Authenticating a Request Header
      • Modifying a Response Header
      • Performing an A/B Test
      • Setting Cookies
      • Performing Redirect Based on the Request Location
      • Using the Cache API
      • Caching POST Requests
      • Responding in Streaming Mode
      • Merging Resources and Responding in Streaming Mode
      • Protecting Data from Tampering
      • Rewriting a m3u8 File and Configuring Authentication
      • Adaptive Image Resize
      • Image Adaptive WebP
      • Customize Referer restriction rules
      • Remote Authentication
      • HMAC Digital Signature
      • Naming a Downloaded File
      • Obtaining Client IP Address
    • Best Practices
      • Adaptive Image Format Conversion via Edge Functions
Docs Overview/
Edge Developer Platform/
Edge Functions/
Sample Functions/
Obtaining Client Geo Location Information/

Obtaining Client Geo Location Information

This example captures HTTP requests and responds with the user's geo location information, to generate an HTML page containing the autonomous system number (ASN), country, region, city, longitude and latitude information. It can be used for debugging or displaying the geo location information.

Sample Code

// Add a fetch event listener, which is triggered when a request is incoming. It uses the handleRequest function to handle requests and return responses.
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request));
  });
  
  // Define an async function handleRequest, which is used to handle the incoming requests.
  async function handleRequest(request) {
    // Initialize an empty string to store the HTML content.
    let html_content = "";
    // Define the HTML style.
    let html_style = "body{padding:6em; font-family: sans-serif;} h1{color:#0000ff;}";
  
    // Get the user's geo location information.
    html_content += "<p> asn: " + request.eo.geo.asn + "</p>"; // ASN
    html_content += "<p> countryName: " + request.eo.geo.countryName + "</p>"; // Country name
    html_content += "<p> countryCodeAlpha2: " + request.eo.geo.countryCodeAlpha2 + "</p>"; // Alpha-2 country code
    html_content += "<p> countryCodeAlpha3: " + request.eo.geo.countryCodeAlpha3 + "</p>"; // Alpha-3 country code
    html_content += "<p> countryCodeNumeric: " + request.eo.geo.countryCodeNumeric + "</p>"; // Numeric country code
    html_content += "<p> regionName: " + request.eo.geo.regionName + "</p>"; // Region name
    html_content += "<p> regionCode: " + request.eo.geo.regionCode + "</p>"; // Region code
    html_content += "<p> cityName: " + request.eo.geo.cityName + "</p>"; // City name
    html_content += "<p> Latitude: " + request.eo.geo.latitude + "</p>"; // Latitude
    html_content += "<p> Longitude: " + request.eo.geo.longitude + "</p>"; // Longitude
  
    // Construct the HTML response content.
    let html = `<!DOCTYPE html>
      <head>
        <title> Geolocation: Hello World By Edge Functions.</title>
        <style> ${html_style} </style>
      </head>
      <body>
        <h1>Geolocation: Hello World By Edge Functions.</h1>
        <p> Welcome to try out the geolocation feature of Edge Functions.</p>
        ${html_content}
      </body>`;
  
    // Return a new Response object, including the HTML content and corresponding headers.
    return new Response(html, {
      headers: {
        "content-type": "text/html;charset=UTF-8", // Set the Content-Type header of the response, specifying the returned content as HTML.
      },
    });
  }

Sample Preview

In the address bar of the browser, enter a URL that matches a triggering rule of the edge function to preview the effect of the sample code.


Related References

Runtime APIs: addEventListener
Runtime APIs: Request
Runtime APIs: Response