DEV Community

Cover image for Project Fourteen: Map
Valeria
Valeria

Posted on

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

Top comments (0)