DEV Community

Aaron K Saunders
Aaron K Saunders

Posted on • Edited on

4

Intro To MongoDB Realm with VueJS Ionic Framework And ViteJS Integrating Geospatial Queries In Google Maps

In this video, we add a new collection to the database that contains the various locations of Tesla Superchargers I have used in DC region. We then show how to do location-based MongoDB geospatial queries to find the data and render it to a Google Map integrated into the VueJS Application us the Google Maps Javascript API.

We do a simple proximity-based query looking for locations near a specific point; we get the point from the users location. We also do a more advanced query where we get the region/bounds displayed on the map and then find all locations that are within the region. We are implementing the "Find In Area" you find often in map based applications.

A lot of the video is centered around a Google Maps Component for VueJS applications that I built in a previous video series, here is the link to that series Google Maps With VueJS & Ionic Framework

Helpful Links

  • Intro To MongoDB Realm with VueJS Ionic Framework Video Series - Link
  • Google Maps With VueJS & Ionic Video Series - Link
  • Google Maps Javascript API - Link
  • MongoDb Geospatial Queries - Link

ko-fi

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more