DEV Community

Cover image for Project Fourteen: Map
Valeria
Valeria

Posted on

3

Project Fourteen: Map

Ahoy! Any respectful adventurer needs a treasure map! And everyone else need a precise map to get from point A to point B. With GPS in every pocket we came to rely on digital maps in our day-to-day lives.

My very first professional project was a map that showed location of trucks in (almost) real-time - but maps aren't limited to logistics. From delivery services to augmented reality games - geo services come in handy.

As you've probably guessed, today I suggest you build a map.

Map: requirements and recipe

As a user I want to see location on the map, so that I can figure out where it is

Here's an example of a pin on a map:

Google Maps with a Pin around Mountain View CA

Except this pin is a bit boring - everyone has one just like it - how about something a bit more unique? Like a cross on a treasure map or your favourite icon? Go wild with styling as long as requirements are met.

Requirements

  1. User should be able to see the pin on every level of zoom
  2. User should be able to see address or other relevant information by clicking on the pin
  3. Pin should have sufficient contrast

Recipe

  1. Choose a spot you'd like to show and get coordinates for it
  2. Add a map and centre it on those coordinates
  3. Add a default pin
  4. Customize pin
  5. Create a function that would allow you to set both pin and centre to provided location
  6. Zoom, zoom, zoom and enjoy!

Hints

There are several map solutions out there including open source ones, but the easiest way is to use Google Maps API.

Depending on the shape of your pin you might want to adjust it's "pin" point - it might be the exact middle spot in some cases or something else: e.g. the usual pin has it in the middle of the bottom line of the image.

Hard Mode: Movement and Trail

To honour my humble upbringing I suggest you try and create a map that shows animated location of an object: a trail of your walk, run or, perhaps, something more seasonal, like ski?

With the help of Geolocation API and a bit of geometry you should be able to do that in no time!

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?

Buy Me A Coffee

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

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