LogoLogo
Siteglide.comAdminRoadmap
  • 👋Welcome
  • Get Started
    • 🚀Quickstart Guides
    • ❔Support & FAQs
      • ℹ️Siteglide Support Policy
      • ℹ️Siteglide Technology Stack
      • ℹ️External Resources
      • ℹ️Front-end Browser Support
  • Portal
    • Account
    • Sites
      • 🚀Quickstart: Create a Site
      • ℹ️Site Details
      • ℹ️Site Users
      • 📋Install & Manage Modules
      • 💳Go Live
      • 💳Subscription
      • 🌍Domains
        • 📋Add a Fully Delegated Domain
        • 📋Add an External Domain
        • 💻Subdomain on a separate instance
        • 📋How to setup a multi domain start page
      • ☁️Site Backups and Disaster Recovery
    • Users
      • 📋User Roles
      • 📋Invite & Manage Users
    • Billing
      • 💳Billing Setup
      • 💳Subscriptions and Changes
      • 💳Automatic Site Upgrades
      • 💳Invoices
    • Tickets
    • Marketplace
    • Agencies
      • 👩‍💻Agency Account
      • 👩‍💻Clients
      • 👩‍💻Site Copies
      • 👩‍💻Agency Whitelabelling
  • Developer Tools
    • CLI
      • 🚀Quickstart: CLI
      • ℹ️About
      • 📋Site Setup
      • ❔Troubleshooting
      • 💻Reference
      • 🛳️CLI Changelog
      • 🧙‍♂️Go Further: CLI
        • Creating WebApps via CLI
    • Liquid
      • ℹ️About
      • 💻Reference
      • Accessing Data in Liquid Variables - Tutorial 1 - Using Dot Notation
      • Accessing Data in Liquid Variables - Tutorial 2 - Iterating over Arrays and Objects
      • Using Collections with WebApps and Modules
      • Accessing Data from the Global Context Variable
      • Truthiness - Using Liquid to determine if a field is empty or blank
      • 📋Alternatives to Storing and Executing Liquid from Database Items
    • GraphQL
      • ℹ️About GraphQL
      • 📋Tutorials
        • Tutorial 1 - Your First Query
        • Tutorial 2 - Pagination
        • Tutorial 3 - Filtering the Results
        • Tutorial 3 - (Answers)
        • Tutorial 4 - Advanced Filtering
        • Tutorial 4 - (Answers)
        • Tutorial 5 - Using Liquid to run GraphQL queries on your Site
        • Tutorial 6 - Variables
        • Tutorial 6 - (Answers)
        • Tutorial 7 - Sorting
        • Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
        • Tutorial 9 - Using Mutations to Create New Records
        • Tutorial 10 - Using Mutations to Edit a Record
        • Tutorial 11 - Using Mutations to Delete an Item
        • Tutorial 12 - Related Records and Datasources
    • Configuration
      • ℹ️Field Types
      • ℹ️Custom Field IDs
    • Zapier Integration
      • ℹ️Formatting arrays correctly
    • Developer Marketplace
      • ℹ️About Building Modules
      • ℹ️Module Setup
      • ℹ️Site Template Modules - and How to Make Your Own
      • ℹ️Create Folder Structure
      • ℹ️Updating Modules
      • ℹ️Submit Module for Approval
      • ℹ️Adding Payment to a Module
      • ℹ️Theme Module Example
      • ℹ️Data & UI Module Example
      • 💻Reference
      • 🌳File Structure
    • Release Notes
      • 🛳️Siteglide Admin/API - Changelog
      • 🛳️Module - System Files - Changelog
      • 🛳️Module - eCommerce - Changelog
      • 🛳️Module - Menu - Changelog
      • 🛳️Module - Slider - Changelog
      • 🛳️Module - Secure Zones - Changelog
      • 🛳️Module - FAQ - Changelog
      • 🛳️Module - Events - Changelog
      • 🛳️Module - Blog - Changelog
  • SiteBuilder
    • Build Sites Faster
      • 🚀Quickstart: SiteBuilder
      • About
      • Site Setup
        • 🏗️Marketplace Themes & Templates
        • 🏗️Create Site From Template
        • 🏗️Install SiteBuilder Module
        • 🏗️Create a Page Template
        • 🏗️Set Up Tailwind CSS with the recommended CLI method
      • Styling
        • 🏗️Editing Tailwind CSS using the recommended CLI method
        • 🏗️Tailwind CSS Themes - Choosing a Build Method
        • 🏗️Tailwind CSS - Preview Mode
        • 🏗️Tailwind's JIT Compiler Via CDN (deprecated)
        • 🏗️Theme Presets
        • 🏗️Example Tailwind Project Setup
      • Layouts
        • 🏗️Insert Static Layouts
        • 🏗️Installing Dynamic Layouts
        • 🏗️Editing Dynamic Layouts
        • About Layouts
          • 🏗️Dynamic Layouts
          • 🏗️Static and Dynamic Form Layouts
          • 🏗️Sliders
      • 💻Reference
    • Advanced Features
      • 🧞SiteBuilder Live Updates API
        • 👀Live Updates Reference
        • 🔹Live Updates Markup Example
        • 📋Steps to Setting Up Live Updates API in a Module/WebApp Layout
        • 🔹Live Updates Example - Enforcing Filters
        • 📋Steps to Use Live Updates Methods
        • 📋Steps to Initialise Live Updates with JS
        • 🗓️Live Updates Changelog
      • ℹ️SiteBuilder JavaScript
        • ℹ️Forms JS
        • ℹ️Social Sharing JS
        • ℹ️Sliders JS
        • ℹ️Dark Mode JS
        • ℹ️Cookie Settings JS
      • ℹ️SiteBuilder Liquid Includes
        • ℹ️Pagination
      • ℹ️SiteBuilder Liquid Functions
        • ℹ️Detail Page Valid
        • ℹ️Field Mapping
        • ℹ️Get Table Config
        • ℹ️Case From Order ID
      • 🗓️SiteBuilder Changelog
    • Extend SiteBuilder
      • ℹ️Create SiteBuilder Themes
      • ℹ️Create Marketplace Modules
      • ℹ️Adding Dynamic Layouts to Themes & Modules
      • ℹ️Adding Static Layouts to your Theme
      • 💻Reference
  • CMS
    • Dashboard
    • Pages
      • 🚀Quickstart: Pages
      • ℹ️Studio
      • ℹ️Code View & Toolbox
      • ℹ️About Pages
        • ℹ️Page Settings
        • ℹ️Custom Fields in Pages
        • ℹ️Pages with Siteglide CLI
      • ℹ️About Page Templates
        • ℹ️Page Templates with Siteglide CLI
        • Preventing Duplicate Content
      • ℹ️System Pages
      • 💻Reference
      • 🌳File Structure
    • Content Sections
    • File Manager
      • 🔹About Assets
      • 🔹Linking to Assets Explained
      • 🔧Assets Troubleshooting
      • 🔹Siteglide Scripts Explained
      • 💻Assets with CLI
      • 🔼Migrating Assets
      • 📋Steps to Optimise Images on the Fly with Cloudinary
      • 🔹siteglide_head_scripts and siteglide_footer_scripts Explained
      • 🌳Assets File Structure
      • 👀Tags for Assets
    • Forms
      • Quickstart: Forms
      • ℹ️About Forms
      • 📋Guides: Forms
        • 📋Steps to Using Separate Fields for First Name and Surname in a Form
        • 📋Steps to Programmatically Redirecting after a Form Submission
        • 📋Steps to Adding Form Confirmation Pages
        • 📋Steps to Adding a Progress Bar
        • 📋Steps to Changing Form Styling on Submission Using CSS
        • 📋Steps to Using Custom Field Set fields in a Form's Custom Layout
      • 🧙‍♂️Go Further: Forms
        • ℹ️Migrating Forms
        • ℹ️Explained - Preventing Spam Form Submissions and Captchas
        • ℹ️Explained - Show Clearly When a User is Already Logged in When Submitting a Form
        • ℹ️Forms Error Callback and Validation
        • ℹ️Forms Success Callback
        • ℹ️File Upload Previews
      • 🌳Forms File Structure
      • 💻Reference
      • ❔Troubleshooting
    • Automations
      • 🚀Quickstart: Automations
      • ℹ️About
        • ℹ️Email Templates
        • ℹ️Email Automations and Email Templates with Siteglide CLI
      • 📋Guides
        • ℹ️Integration Automations
        • ℹ️A Transactional Email Example
        • ℹ️An API Call Action Example
        • ℹ️A Custom Liquid Action Example
        • 📋Steps to Testing Emails on a Staging Site
        • 📋Steps to Authenticating Sendgrid Emails on Live Sites
      • 🧙‍♂️Go Further
      • 💻Reference
      • 🌳File Structure
    • Categories
      • 🚀Quickstart: Categories
      • ℹ️About
        • ℹ️Outputting Categories on WebApp / Module / eCommerce Layouts
        • ℹ️Filtering WebApps and Modules by Categories Using Liquid Parameters
      • 🌳File Structure
      • 💻Reference
    • Company Information
      • ℹ️About
      • 💻Reference
      • ❔Troubleshooting
    • URL Redirects
  • Modules
    • Core Modules
      • MenuBuilder
        • 🚀Quickstart: Menu Builder
        • ℹ️About
      • Secure Zones
        • 🚀Quickstart: Secure Zones
        • ℹ️About
          • 📋Dynamically Assign a Secure Zone during Form Submission
        • 🧙‍♂️Go Further
          • ℹ️Secure Zones with Siteglide CLI
          • ℹ️Using the context.current_user object
      • Media Downloads
        • 🚀Quickstart: Media Downloads
        • ℹ️Layouts
        • 💻Reference
      • Blog & Authors
        • 🚀Quickstart: Blog & Authors
        • 🔹Blog Archive & Date Filtering
        • 🔹Blog Search
        • 🔹Blog Filter by Category
        • 🔹Blog Filter by Author
        • 🌳File Structure
        • 💻Reference
      • Events
        • 🚀Quickstart: Events
        • ℹ️Standard List View
        • ℹ️Getting Started with Event Filtering & Searching
        • ℹ️Filter by Category
        • ℹ️Filter By Host (Author)
        • ℹ️Filter by Event Dates
        • ℹ️Datasourcing the Event Host
        • ℹ️Search
        • ℹ️Map List View
        • ℹ️Calendar List View
      • FAQ
        • 🚀Quickstart: FAQ
        • 💻Reference
      • Testimonials
        • 🚀Quickstart: Testimonials
        • 💻Reference
      • Slider
        • 🚀Quickstart: Slider
        • 💻Reference: Slider
    • Community Modules
      • 🏗️SiteBuilder
      • 🚀CRM Sync
        • ℹ️About CRM Sync Module
        • 📋Steps to Set Up CRM Sync on an Automation
        • 🗓️CRM Sync Changelog
    • Go Further: Modules
      • ℹ️Front-end Submit Modules
  • WebApps
    • 🚀Quickstart: WebApps
    • WebApp Items
      • 📋Create WebApp Items
      • 📋Importing and Exporting
    • Layouts
      • ℹ️WebApp List Layout
      • ℹ️WebApp Detail Layouts
    • Go Further: WebApps
      • 📋Searching by Location
      • 📋Searching - Advanced Filtering
      • 📋Searching - By Keyword
      • 📋Front End Create Forms
      • 📋Front End Update Forms
      • 📋Front End Delete
  • WebApp Troubleshooting
  • eCommerce
    • 🚀Quickstart: eCommerce
    • Get Started
      • 💡About the eCommerce Module
      • Settings
      • 📂Cart, Checkout and Quotes
        • 💡About Cart, Checkout and Quotes
        • 📋Steps to Implement a Guest Checkout Flow
        • 📂Product Views
          • 🔹Product Layouts
          • 🔹Product List Layout
          • 🔹Product Detail Layout
          • 🔹Add to Cart Button
          • 📋Steps to Datasource and Display Related Products
          • 🔹Dynamic Product Layouts based on Categories
          • 📂Attribute Selection
            • 🔹Attribute Layout - Presenting the Choice to the Customer
            • 🔹Attributes - Changing Product Price after Change
          • 📂Discount Selection
            • Discount Codes Layout
            • Minimum Payments
          • 📂Shipping Selection
            • Shipping Options Layout
        • Managing Products
          • Creating and Editing
          • Securing Products
          • Location
          • Custom Fields
          • Edit Module Structure
          • Product Custom Field Sets
          • Inventory
          • Managing Attributes
          • Pricing
          • Product Categories
          • Open Graph Fields
          • SEO Fields
          • Standard Fields
          • Product Import and Export
          • Discounts
        • 📂Cart
          • 🔹Cart Layouts
          • Checking Inventory in Cart
          • Updating Quantity in Cart
          • Updating Displayed Cart Quantity
        • 📋How to Set Up a Shopping Cart and Guest Checkout - Tutorial
        • 📂Checkout Forms
          • 🔹Checkout Form Layouts
          • 🔹Checkout Forms with PayPal
        • 📂Orders
          • Order Confirmation
          • Re-Ordering
          • 🔹Orders Layouts
        • 📋Steps to Add Secure Zones and User Orders View to your Checkout Flow
        • Quotes
        • Selling Digital Products
        • 🔹Volume Pricing
        • 📋Steps - Alternatives to Product Grouping
      • 📂Basic Payment Forms
        • 💡About Basic Payment Forms
        • 📋Steps to Set up a Basic Payment Form (with a Fixed Payment Amount)
        • 📋Authorize.net Basic Payment Forms
        • 📋PayPal Basic Payment Forms
        • 📋Steps to Allow User to Decide Amount they Will Pay
        • 📋Step-by-step Basic Payment Confirmations
        • 👀Basic Payment Forms Reference
        • ℹ️ecommerce/basic_payment
      • 📂Payment Gateways
        • 💻Building a Custom Payment Gateway
          • 📋Steps to Support Basic Payment Forms with your Custom Payment Gateway
          • 📋Steps to Support Checkout with your Custom Payment Gateway
        • 🔹Paypal Custom Parameters
        • 🔹Styling Stripe Card Elements
        • 💡About Payment Gateways
        • 📋Steps to Switching Payment Gateway
        • 🔹Test Cards
      • 📂Currency and Tax
        • 💡About Tax Codes
        • Currency Changer
        • Tax Code Changer
        • Formatting Currency
      • 📂Subscriptions
        • 💡About Subscriptions
        • Managing Subscriptions
          • Creating Subscription Products
          • Changing Price and Billing Interval
          • Creating a Form for Signing Up and Changing Payment Details
          • Subscription Order Status Explained
          • Terms and Conditions (Good Practice)
        • 📋Subscriptions Payment Gateway Setup
        • Subscriptions List Layout
        • Subscriptions Detail Layout
        • User's Active Subscriptions
        • Subscription Action Required
        • Cancelling Subscriptions
      • 🌳Basic Payment Forms Folder Structure
      • 🌳Cart and Checkout Folder Structure
  • CRM
    • 🚀Quickstart: CRM
    • Users
      • User Details
      • User Secure Zones
      • How Users Edit their Email and Password Front End
      • Custom Field Sets & CRM Custom Fields
      • Storing User's Favourite WebApp / Module Items
    • Companies
    • Cases
      • User's Form Submissions (Cases)
  • Site Manager
    • Code Editor
    • Templates (Pages & Email)
    • Headers & Footers
    • Code Snippets (Includes)
      • 🔧Includes Troubleshooting
      • 👀constants_json
      • 👀constants
      • 🌳Includes File Structure
      • 💻Includes with Siteglide CLI
      • 🔧Tags for Includes
    • System Pages
      • Automatic Site Maps
    • System Emails
    • Data Management
    • Admin Menu Editor
    • Integrations
  • Reporting
    • 🚀Quickstart: Reports
  • Miscellaneous
    • System Features
      • Pagination on Liquid Tags
      • Custom Pagination Layouts
      • Timezones in the Siteglide Admin and on the front-end of your Site
      • Module/WebApp Caching
      • Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
      • Translating Dates
      • Site Search
      • About Site Search
      • AI Tools for the Rich Text Editor
      • Cookies on Siteglide Sites
    • Front-End Performance
      • Video Embeds
      • Forms Above the Fold
Powered by GitBook
On this page
  • Installation
  • Editing the WebApp item
  • Querying the data
  • Example
  • Introduction
  • 1 - Add an HTML Form and JavaScript to take User input to decide starting position and search radius
  • 2 - Output the results on the Page in a simple list
  • 3 - Output the results on a map
  • Full example

Was this helpful?

Export as PDF
  1. WebApps
  2. Go Further: WebApps

Searching by Location

Installation

Our GeoJSON update for WebApps will work with both newly created WebApps, and WebApps that have been updated after the release of this update.

To apply the update to an existing WebApp, simply go to the WebApp Builder view, and click 'Save'.


Editing the WebApp item

Webapp items have 2 new fields by default:

  • location - GeoJSON - Stores the location value of your item as coordinates - [long, lat]

  • address - Text - Stores the human-readable address value of your item

To set these values in Siteglide you will see the new 'Location' tab on the WebApp item edit view. Here you have 2 choices:

  1. Search for an address and then select it from the results dropdown - Recommended

  2. Manually enter the Address and Longitude/Latitude values for your item


Querying the data

Our new Location Search feature relies on 2 URL parameters to work:

  1. longlat - LongLat - The coordinate value of the center point for the search - long,lat

  2. distance - Int - The number of kilometres from the center point

Example - /map?longlat=-1.2660643,51.3926564&distance=18

To display results from these parameters you will need the new use_location_search parameter on your WebApp include:

use_location_search - 'true' or 'false' - default: 'false'

Example -

{%- include 'webapp', id: '1', use_location_search: 'true' -%}

_Note - Location Search `(use_location_search) and Text Search(use_search`) will not work together at the same time_

Example

Example code to search a WebApp by location, and output the results on a map or in a list.

Introduction

In this example we'll show you how to add a location search to a Page, and then output the results of that search both in a list and on a map. Items will display in the result set when they are within the radius of a chosen location. One example of how you can use this is as a Store Locator for a franchise of Shops.

1 - Add an HTML Form and JavaScript to take User input to decide starting position and search radius

Two different options are provided in this example:

Current location (using browser default functionality) and desired search radius

Add HTML and JavaScript

:::codeblocktabs

<div class="container text-center">
  <h1 class="mb-3 h2 sg-h2">Search for Stores within your area</h1>
  <div class="row">
    <div class="col-12">
      <form class="sg-form">
        <i class="fas fa-crosshairs fa-2x mb-2"></i>
        <h3 style="margin-bottom: 5rem;">Current Location</h3>
        <div class="text-start form-group sg-form-group">
          <label for="current_locations_distance">Change search distance (km)</label>
          <input class="form-control sg-form-control mb-3" type="number" id="current_locations_distance" value="{{context.params.distance | default: 20}}" />
        </div>
        <div class="row">
          <div class="col-12 d-flex justify-content-end">
            <button class="btn btn-primary sg-btn sg-btn-primary btn-lg sg-btn-lg" onclick="getMyLocation()">Find stores near me <i class="fas fa-arrow-right"></i></button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
	function getMyLocation() {
		event.preventDefault();
		if(navigator.geolocation){
			navigator.geolocation.getCurrentPosition(showMyPosition);
		}else{
			alert("Geolocation is not supported by this browser.");
		}
		function showMyPosition(position){
			var distance = document.querySelector('#current_locations_distance').value ? document.querySelector('#current_locations_distance').value : 10;
			window.location.replace(window.location.origin+"/store-locations?longlat="+position.coords.longitude+","+position.coords.latitude+"&distance="+distance);
		}
	}
</script>

:::

2 - Output the results on the Page in a simple list

Use a Layout of your choice.

{%- include 'webapp', id: '1', use_location_search: 'true', layout: 'default' -%}

3 - Output the results on a map

This relies on there being a layout named 'json'. See the contents of 'json' in the 2nd block of code.

Add HTML + Liquid

The Liquid makes sure the map is only outputted after the Page has been refreshed by the JavaScript and the correct parameters are available in the URL for filtering the results.

{%- if context.params.distance and context.params.longlat -%}
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css" integrity="sha512-1xoFisiGdy9nvho8EgXuXvnpR5GAMSjFwp40gSRE3NwdUdIMIKuPa7bqoUhLD0O/5tPNhteAsE5XyyMi5reQVA==" crossorigin="anonymous" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.js" integrity="sha512-SeiQaaDh73yrb56sTW/RgVdi/mMqNeM2oBwubFHagc5BkixSpP1fvqF47mKzPGWYSSy4RwbBunrJBQ4Co8fRWA==" crossorigin="anonymous"></script>
	<div id="map" class="map" style="height:400px;width:100%"></div>
	<span id="map_content" style="display:none">
    {%- include 'webapp'
      id: '1'
      use_location_search: 'true'
      type: 'list'
    -%}
  </span>
{%- endif -%}

Add JavaScript

The following function is triggered by the script from step 1, only after it has finished loading- this occurs because the function's name is referenced in the URL parameter fetching the Script. The code must be placed above the <script> tag from step 1.

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css" integrity="sha512-1xoFisiGdy9nvho8EgXuXvnpR5GAMSjFwp40gSRE3NwdUdIMIKuPa7bqoUhLD0O/5tPNhteAsE5XyyMi5reQVA==" crossorigin="anonymous" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.js" integrity="sha512-SeiQaaDh73yrb56sTW/RgVdi/mMqNeM2oBwubFHagc5BkixSpP1fvqF47mKzPGWYSSy4RwbBunrJBQ4Co8fRWA==" crossorigin="anonymous"></script>
	<script>
  var distance = {{context.params.distance | default: 10 }};
  var center = "{{context.params.longlat}}".split(',');

  var map = L.map('map').setView([parseFloat(center[1]), parseFloat(center[0])], 8);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  L.circle([parseFloat(center[1]), parseFloat(center[0])], {radius: distance*1000}).addTo(map);

  var locations = "{"+document.querySelector('#map_content').innerText.trim().slice(0, -1)+"}";
  locations = JSON.parse(locations);
  Object.keys(locations).forEach(function(k){
    L.marker([locations[k].latlong.coordinates[1], locations[k].latlong.coordinates[0]]).addTo(map).bindPopup(locations[k].name);
  });
</script>

Layout 'json':

"{{this.id}}": {
  "name": "{{this.name}}",
  "latlong": {{this.location | json}}, 
  "address": "{{this.address}}"
},

Full example

<div class="container text-center">
  <h1 class="mb-3 h2 sg-h2">Search for Stores within your area</h1>
  <div class="row">
    <div class="col-12">
      <form class="sg-form">
        <i class="fas fa-crosshairs fa-2x mb-2"></i>
        <h3 style="margin-bottom: 5rem;">Current Location</h3>
        <div class="text-start form-group sg-form-group">
          <label for="current_locations_distance">Change search distance (km)</label>
          <input class="form-control sg-form-control mb-3" type="number" id="current_locations_distance" value="{{context.params.distance | default: 20}}" />
        </div>
        <div class="row">
          <div class="col-12 d-flex justify-content-end">
            <button class="btn btn-primary sg-btn sg-btn-primary btn-lg sg-btn-lg" onclick="getMyLocation()">Find stores near me <i class="fas fa-arrow-right"></i></button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
	function getMyLocation() {
		event.preventDefault();
		if(navigator.geolocation){
			navigator.geolocation.getCurrentPosition(showMyPosition);
		}else{
			alert("Geolocation is not supported by this browser.");
		}
		function showMyPosition(position){
			var distance = document.querySelector('#current_locations_distance').value ? document.querySelector('#current_locations_distance').value : 10;
			window.location.replace(window.location.origin+"/store-locations?longlat="+position.coords.longitude+","+position.coords.latitude+"&distance="+distance);
		}
	}
</script>

{%- if context.params.distance and context.params.longlat -%}
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css" integrity="sha512-1xoFisiGdy9nvho8EgXuXvnpR5GAMSjFwp40gSRE3NwdUdIMIKuPa7bqoUhLD0O/5tPNhteAsE5XyyMi5reQVA==" crossorigin="anonymous" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.js" integrity="sha512-SeiQaaDh73yrb56sTW/RgVdi/mMqNeM2oBwubFHagc5BkixSpP1fvqF47mKzPGWYSSy4RwbBunrJBQ4Co8fRWA==" crossorigin="anonymous"></script>
	<div id="map" class="map" style="height:400px;width:100%"></div>
	<span id="map_content" style="display:none">{%- include 'webapp', id: '1', use_location_search: 'true', type: 'list' -%}</span>
	<script>
		var distance = {{context.params.distance | default: 10 }};
		var center = "{{context.params.longlat}}".split(',');
		var map = L.map('map').setView([parseFloat(center[1]), parseFloat(center[0])], 8);
		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
		}).addTo(map);
		L.circle([parseFloat(center[1]), parseFloat(center[0])], {radius: distance*1000}).addTo(map);
		var locations = "{"+document.querySelector('#map_content').innerText.trim().slice(0, -1)+"}";
		locations = JSON.parse(locations);
		Object.keys(locations).forEach(function(k){
			L.marker([locations[k].latlong.coordinates[1], locations[k].latlong.coordinates[0]]).addTo(map).bindPopup(locations[k].name);
		});
	</script>
{%- endif -%}
PreviousGo Further: WebAppsNextSearching - Advanced Filtering

Last updated 5 months ago

Was this helpful?

📋