It is my pleasure to share with you a Proof of Concept I developed at Code Enhancement Studio that integrates maps and geo-queries within the Wix platform effectively creating a geo-query function. The Challenge The client is a wholesale supplier of food products.  They want users to be able to look up a specific product supplied by them and then identify disparate grocery companies’ and those company’s retail locations within a user-specified radius (in miles) from a location of the users choice/their choice. Our initial plan was to use the Wix “address” input, retrieving the (latitude and longitude) geo-coordinate of any retail store location by means of Google’s Place API & Google’s Autocomplete API but unfortunately Wix databases do not support geo-queries. The Solutions Completing our research on the Velo Forum & Resources, it appeared that the solution most recommended is to save the records on an online service database that supports geo queries such as MongoDB, Firebase or ElasticSearch. But this solution required that I build my own query system allowing me to save the locations and query them, which would render the Wix Data API useless  (at least for the locations collection). While this solution is technically possible, it necessitates giving up on the Wix built-in features such as Member Permission(s), dataset binding, and content manager. Therefore, I elected to build my own geo-query system on Wix using . Without going to far in depth as to how Geohash works, the general concept is: the Geohashes The world is divided into several geographic regions.  Each region is given a unique identifier. These regions are again divided into several sub-regions, each with its own unique identifier. By combining identifiers, I can localize a given location on earth. The longer the identifier the smaller and more accurate the area. By subdividing regions enough times and combining identifiers, they can represent an area of only a few cm anywhere on earth. Since each geohash is unique and sortable I can translate any latitude/longitude into a geohash and index any location with geohashes. Proof of Concept (PoC) Once the idea was planned out (on paper), I built a simple prototype to test the concept: . This small Wix app lists all of the U.S. Starbuck locations (+6000) on a map and locates the ones nearest to a Wix Office. Wix Starbuck finder I used a dropdown input element with our prototype, but the concept will work equally with an address Input component. Because Wix does not provide maps with dynamic pins at the moment, I made use of an HTML Iframe housing Google maps in order to display the item(s).) : . BONUS you can also select the option “Point on the map” and query Starbuck nearby the clicked location How It’s Made As you can see from the code below, the feature is entirely based on the Wix platform, and extends the Wix Data API in order to support geo-queries. The PoC’s backend provides the following ` ` method: getStarbucksAroundPoint wixData ; {filterByArea} ; COLLECTION_NAME = ; { query = wixData.query(COLLECTION_NAME).limit( ); geoQuery = filterByArea(query, point, radius) geoQuery.find().then( result.items);
} import from 'wix-data' import from "backend/geoQueryService" const "Starbucks" export ( ) function getStarbucksAroundPoint point, radius const 1000 const return => result As you can see, it imports the function ` ` from the module ` `. filterByArea geoQueryService This function enhances a object by adding constraints to the field ` `, based on a point (latitude, longitude) and a radius (in km). WixDataQuery geohash {getQueryRangesFromRadius} ; { (!point) ( ) shiftedNeighborsRange = getQueryRangesFromRadius(point.latitude, point.longitude, radius); firstRange = shiftedNeighborsRange.shift(); finalQuery = baseQuery.between( , firstRange[ ], firstRange[ ]) shiftedNeighborsRange.reduce( { query.or(baseQuery.between( , range[ ], range[ ]))
   }, finalQuery);
} import from "./range" export ( ) function filterByArea baseQuery, point, radius if throw new Error "no point provided" const const let "geohash" 0 1 return ( ) => query, range return "geohash" 0 1 Given a point (latitude, longitude) and radius, the ` ` determines all of the regions that are included in the search area. It then adds the constraint on the base query to return the location with all of the geohashes within the bounds of matching regions. getQueryRangeFromRadius The enhanced query is then executed, and the result is returned to the frontend. The main benefit of this system is that I can use wixData API to build the query as I would for any other request (i.e. filter by field x, ordering, using references, limit, skip, etc.). In Practice Once I successfully built the PoC, I was able to use it to provide this geo-query function to multiple projects with varying applications.  The geo-queries are fast to execute and can quickly filter collections of up to 40,000 locations. While I haven’t yet had the need to query a greater number of items, I’m confident that, with indexing, I should be able to filter a much larger number of locations. thrives on such challenges, and is always looking to push the boundaries of Wix Velo.. Don’t hesitate to contact us with any other boundary-pushing challenge, or if you have any questions regarding geo-queries on Wix Velo. Code Enhancement Studio

Google

Starbucks

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Integrating Maps And Geo-Queries in Your Wix Website Using Velo

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

73 Stories To Learn About Velo

Accepting Payments With The Wix Payment API

Basic Guide to Creating a Page Using Velo by Wix

Building A Flutter Native App with Wix Velo for Local Covid Hospital and Oxygen Tracking

Building a Heritage Trees Registry with Velo

73 Stories To Learn About Velo

Accepting Payments With The Wix Payment API

Basic Guide to Creating a Page Using Velo by Wix

Building A Flutter Native App with Wix Velo for Local Covid Hospital and Oxygen Tracking

Building a Heritage Trees Registry with Velo

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps