This page shows an example of an annotated OpenStreetMap embedded in a page in Squarespace.

Things to note

The map above shows a typical Self-guided Field Trip map, using many of the point-of-interest pins available. The map is interactive; the user can scroll and zoom and tap on the pins. Each pin has text describing the point. The map is centered and zoomed to show all the pins in the writeup.

Guidelines

Show parking, restroom and trailhead locations with the specialized non-numbered pins for each (see icons below). If there are multiple parking areas, you can use the numbered parking pins (there are three available). If the parking area and restroom are very close together, you can use the combination parking & restroom pin.
Use numbered pins for points of interest along the hike/drive that are pointed out in the text. Refer to them by number in the text (e.g. “Check out the Ephemeral Pond, #2 on the interactive map”)
Use non-numbered pins as labels for interesting items on the map that may be secondary to the birding highlights (e.g. “The Winery Tasting Room is located near the restrooms”)

Pin Styles

You can use a variety of pins in your map. We have custom pins for parking lots, restrooms, wheelchairs, trailheads, forks, intersections, benches, picnic tables, bridges, lookouts, numbered pins from 1 through 20 and lettered pins from A through G that you can add to indicate interesting locations for the reader. Using increasing numbers on a map also gives an indication of direction.

Below are the pins available. See Notes for Website Developers below for more information on how to use them.

About OpenStreetMap

OpenStreetMap is a crowdsourced map that is easy to mark up and embed in Squarespace pages. Because it’s open source, we can actually fix problems ourselves on the maps and everyone gets the improvements. See the Emily Renzel Wetlands improvements below. Other examples: we recently added pond numbers to all the salt ponds in the bay. We also numbered the ponds at Oka Ponds and Ogier Ponds to match how they are referred to by Santa Clara County Parks and the Valley Water District. When a trail is found to be wrong, as was the case for Rancho San Vicente, we fix it.

Notes for Website developers

The interactive parts of the maps are based on an open source project called Leaflet which allows easy customization of OpenStreetMap maps. We also provide some additional javascript code and the artwork for all the pins in an open source github repository. Because the underpinning technology is all open source, anyone is free to create maps like these on their own website.

Below is what the source code looks like for the interactive map at the top of this page. You can start by copying the sample code block below (or the contents of the code block used on this page, same thing) and pasting it into a code block on a new web page (see postscript if you’re doing this on a website other than scvas.org).

Okay, let’s look at the code block a bit. There are comments and some setup code at the top. After that, there is a line for specifying the map height (400px here). A few lines lower is a mymap variable, where you specify the Latitude and Longitude for the center of your map ([37.293213, -122.089252] in this example) and the map Zoom (16 here). Lastly, there are a bunch of pins at the bottom of the code block.

Description: pin([latitude, longitude], "html styled text", "pin_type");

Example pin: pin([37.29465, -122.0913], "<b>Parking Lot</b>", "parking");

Pins have a latitude, longitude, some text in html format and an optional pin type. If you leave off the pin type, you’ll get a regular blue pin with a dot. Look at the pins in the sample code below for examples (note that the Winery leaves off the icon type). All of the pin names are derived from their filename in the github repository. For example, the filename for the parking pin is “scvas-pin-parking.png” so just remove “scvas-pin-” and “.png” and you have the name to use in your code: "parking".

Paste this code into a code block on a new web page to start:

<!-- Paste this text as the code block on your web page -->
<!-- Look at the bottom of this code block for the map pins -->
<!-- Leaflet's CSS needs to come before this code (it is hiding in Squarespace under Settings->Advanced->Code Injection->Header) -->

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<script src="https://wilmot.github.io/scvas_markers/code/map_pin_variables.js" type="text/javascript"></script>

<!-- Adjust the height of the map -->
<style type="text/css"> #mapid { height: 400px; } </style>
<div id="mapid"></div>

<script>

// Configure map coordinates [latitude, longitude] and zoom.  Larger numbers zoom in; smaller zoom out.
var mymap = setUpMap([37.293102, -122.088793], 16);
  
// If needed, adjust the zoom for desktop, mobile
// fineTuneMapZoom(mymap, 1, 1);
  
//
//  
// Paste all Map Pin Code Below -- between here and the ending script line
// example: pin([37.313167, -122.063596], "<b>McClellan Ranch Parking</b>", "parking")
//
//

pin([37.294655, -122.091367], "<b>Gravel Parking Lot</b>", "parking");
pin([37.293997, -122.089822], "<b>Restroom</b>", "restroom");
pin([37.294175, -122.090170], "<b>Winery Tasting Room</b>");
pin([37.294125, -122.091037], "<b>Zinfandel Trail Trailhead</b>", "trailhead");
pin([37.293826, -122.090460], "<b>Picnic Tables</b>", "picnic_table");
pin([37.292507, -122.088060], "<b>1. Old Orchard</b>", "1");
pin([37.291382, -122.086743], "<b>2. Ephemeral Pond</b><br>Fills in winter after significant rains", "2");
pin([37.292260, -122.086427], "<b>3. Hilltop overlook in an Oak grove</b>", "3");
pin([37.290132, -122.086089], "<b>Small Bridge</b>", "bridge");
  
</script>

Postscript. To get maps to work on a new Squarespace site, you’ll also need to add this cascading stylesheet (CSS) code in Home->Settings->Advanced->Code Injection->Header:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

Having trouble getting started? Send me an email at admin@scvas.org and I’ll see if I can help.