WEBAPPS
Search and Filtering
Searching by location - Full example
10 min
example code to search a webapp by location, and output the results on a map or in a list prerequisites you have read the doc webapps searching by location you have webapp items prepared with location data 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 step by step 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 search for stores within your area current location change search distance (km) find stores near me \<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 %} 	 	 	 	 {% include 'webapp' id '1' use location search 'true' type 'list' %} {% 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 '\© \<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 '\© \<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 %}
Updated 11 Apr 2023
Did this page help you?