Walk Score Amenity Map

Use the Amenity Map to market the walkability of a property and what's within walking distance.

Edit the fields below to customize the live preview.

Address:

Width: (in pixels)

Layout:
Auto (based on width) Vertical

Height:

Get the Amenity Map

To add the Amenity Map to your website, get a Walk Score ID (WSID):

Copy and Paste Code

Copy and paste the code below into your website to use the Amenity Map.
Make sure to replace "YOUR-WSID-HERE" with your WSID.

Problems? Read our troubleshooting guide.

Custom Branding

We offer custom branding of the Amenity Map that allows you to remove the Walk Score links and keep more visitors on your site. Find out more about Walk Score Professional.

Parameters

You can use the following parameters to customize the Amenity Map:

• Location:
• You can specify location using an address or using a latitude and longitude.
• ws_address — The address for the center of the map.
  Example:  var ws_address = "1501 Pike Place, Seattle, WA, 98101";
• ws_lat & ws_lon — A location specified by latitude and longitude.
  Example:  var ws_lat="42.360763";
                   var ws_lon="-71.0727024";
• Notes:
  • You may want to write the location parameters dynamically using a server-side script with an address from your database.
• Layout:
  • ws_width — The pixel width of the Amenity Map. Note: For widths less than 450, the Amenity Map will change to a single column layout.
    Example:  var ws_width = "600";
  • ws_height — The Amenity Map will automatically choose a default height for any given width, but the height can also be set explicitly. The range of possible heights for a given width and layout option is shown next to the height field in the preview controls above.
    Example:  var ws_height = "300";
  • ws_layout — The Amenity Map has two layout modes. By default, it will use a vertical, single-column layout for widths less than 450 pixels, and a horizontal 2-column layout for greater widths.
    Example:  var ws_layout = "vertical";
• Distance units:
  • ws_distance_units — Override the default units (km or mi):
    Example:  var ws_distance_units = "km";
    Note: When location is specified via ws_lat and ws_lon the Amenity Map defaults to miles. When ws_address is used, the Amenity Map defaults to the units of the country the address is in.
• Colors and Styling:
  • ws_background_color — A background color for the whole Amenity Map. Light colors recommended. (default: #fff).
    Example:  var ws_background_color = "#fff";
  • Note: To apply other styles to the whole Amenity Map, add css to your page that selects the Amenity Map's div using it's ID: ws-walkscore-tile.
    Example:  <style> #ws-walkscore-tile { border: 1px solid #999; } </style>
  • Colors:
    • ws_map_frame_color — Color for the double frame (default: #999).
      Example:  var ws_map_frame_color = "#999";
    • ws_address_box_frame_color — Color for the address field's border (default #aaa).
      Example:  var ws_address_box_frame_color = "#aaa";
    • ws_address_box_bg_color — Color for the address field's background (default #aaa).
      Example:  var ws_address_box_bg_color = "#aaa";
    • ws_address_box_text_color — Color for the address field's text (default #aaa).
      Example:  var ws_address_box_text_color = "#aaa";
    • ws_score_color — Color for the score and the footer (default: #000).
      Example:  var ws_score_color = "#000";
    • ws_secondary_color — Color for the progress text while loading (default: #333).
      Example:  var ws_secondary_color = "#333";
    • ws_link_color — Color for the bigger map link (default: #b14900).
      Example:  var ws_link_color = "#b14900";
    • ws_link_hover_color — Color for the bigger map link (default: #b14900).
      Example:  var ws_link_hover_color = "#777";
    • ws_category_color — Color for the category names (default: #777).
      Example:  var ws_category_color = "#777";
    • ws_result_color — Color for the names and distances of each destination (default #333).
      Example:  var ws_result_color = "#333";