This map was custom built for the Sierra Club San Diego. The North County Group is highlighting their 50 Hike Challenge.

Video: Demo of 50 Hike Challenge map

Demo of 50 Hike Challenge map made for the North County San Diego group of the Sierra Club.


Architecture & Design Choices

The map is based on Apple Maps, interactive maps on the Web, which offers standard and satellite maps types. While Apple Maps will work on most browsers for desktop and mobile, the customer may want to view the landmark in their favorite map app on their mobile phone.

The landmark callouts were designed with a mobile first experience in mind.

Tapping on a hike location image brings up the landmark callout. From there the customer can choose a link to open a map app that offers features they expect: directions, map printing, saving & sharing of landmarks via text or social media, or possibly offline map downloads. Customers viewing this map on Mac, iPhone or Android can enjoy the proper map app for their system. Making a map also should take into consideration a customers privacy1.

Landmark callout with hike details, and links to Apple or Google Maps.

Embedded interactive Apple maps for the web offer standard and satellite maps types.

1Apple states that “Maps helps you find your way without compromising your privacy”.


  • The landmark callout include the distance, elevation and comments as provided by the Sierra Club.
    • The layout of the landmark callout is handled by Apple Maps, with customization of HTML elements such as headers and links.
  • The font for the landmark callouts is Montserrat which is also one of the 50 hikes (Monserate Mountain Trail).
  • The color palette for the landmark callouts also comes from the North County Group
    • 0x00bfff #00bfff, RGB = (0, 191, 255), DeepSkyBlue
    • 0x f4a460 #f4a460, RGB = (244, 164, 96), SandyBrown

Square images ready for social media

Inaja Trail and Santa Ysabel Open Space Preserve East & West.

Observatory Trail Overlook and Lower Doan Valley & French Valley

Apple Guides

Apple Guides was announced in June 2020 as a new product for their Maps app.

Explore new places with Guides in Maps on iPhone. Guides from trusted brands and partners are available in the Maps app. In the Maps app , you can organize places into your own guides. Add a place to your Guides on your iPhone: Tap “Save to,” then choose one of your guides.

  • Apple Guides for the 50 Hike Challenge
    • Errata: Apple Guides shows that there are only 42/50 landmarks when clicking on the link. But all 50 landmarks are there. So use with caution.



The raw data can be found at wbc50.csv. You can view the data in the browser or download the raw data.

Include the map on your site

iframe for use in other websites

<iframe allowfullscreen="true"
  mozallowfullscreen="true" webkitallowfullscreen="true"
  style="height: 85vh; width: 95vw;"  
  <p>Your browser does not support iframes.</p>

List of Hikes

Click here for the list of hikes in HTML format. With links to Apple Maps & Google Maps. 👉



App icons in the landmark callouts are sourced from Wikipedia.

  • Apple Maps logo
    • Attribution: Apple Inc.SVG by CMetalCore, Public domain, via Wikimedia Commons
    • This map is an independent publication and has not been authorized, sponsored, or otherwise approved by Apple Inc. Apple is a trademark of Apple Inc., registered in the U.S. and other countries and regions.
  • Google Maps logo
    • Attribution: Google Inc.SVG by Premeditated, Public domain, via Wikimedia Commons
    • The “Google Maps™” name and other trademarks are property of Google LLC
  • NOAA log
    • Attribution: Badseed, Public domain, via Wikimedia Commons
    • This map is an independent publication and has not been authorized, sponsored, or otherwise approved by National Oceanic and Atmospheric Administration nor the United States Government.

Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)