JSFiddle

Geoapify's public fiddles

• Data Layer: Simple

  Sample code for Google Maps Platform JavaScript API author(s): Justin Poehnelt

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Using IP Geolocation and HTML Geolocation with MapLibre GL

  This code allows you to obtain a user's city-level location through IP geolocation with the Geoapify IP Geolocation API, and displays it on a Maplibre GL map.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• o1rkLwtx

  No-Library (pure JS), HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Draw isolines with MapLibreGL

  This code sample shows how to calculate an isoline and draw it with MapLibreGL

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Geocoding Service

  No-Library (pure JS), HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Collect customer's payment address on website and verify it

  This code sample shows how to create address collection forms. You can verify the entered address with the Geocoding API.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Form to collect shipping and payment addresses

  Here's a sample code that shows how to create an address collection form to get postcode, city, street, house number from a customer.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Shipping / Payment Address and Location Information

  Here is a code sample that shows how to collect address information and its location. This code sample uses @geoapify/geocoder-autocomplete and Reverse Geocoding API

• Private fiddle Extra
• Delete fiddle
Groups Extra
• [Internal] Exporting places

  This code sample shows how to get places of a chosen category for a city using Geoapify Location services

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Search OSM Places for cities using the Geoapify Places API.

  This code sample shows how to get places of a chosen category for a city using Geoapify Location services

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 124Loe7u

  No-Library (pure JS), HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• How to add a Leaflet map with address autocomplete field

  The code sample show how to add a map with address search to a website, including CMS websites like Wordpress

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Places API results on a MapLibre GL map

  Get places with API and show them on a MapLibre GL map as a GeoJSON layer

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Routing API + MapLibre GL

  Build a route and display results on MapLibre GL map

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Leaflet: draw GeoJSON polygon

  Get an isochrone and draw it with Leaflet

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Display a map

  Initialize a map in an HTML element with MapLibre GL JS. See the example: https://docs.mapbox.com//maplibre-gl-js-docs/example/simple-map/

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Route Elevation Profile with Chart.js

  This code sample shows you how to calculate a route with the Geoapify Routing API and visualize the elevation profile of that route with Chart.js.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Routing API + MapLibre GL

  Build a route and display results on MapLibre GL map

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Routing API + Leaflet

  Display a route on a Leaflet map

• Private fiddle Extra
• Delete fiddle
Groups Extra
• epb6w3z8

  No-Library (pure JS), HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra

• 1
• 2
• ▶︎
• 3