Walk Score Real Estate Tile

Add the Walk Score Tile to your website to market the walkability and local amenities for any address. You can customize the Walk Score Tile using the fields below and we'll automatically generate HTML you can paste into your site. If you're interested in a deeper Walk Score integration, check out the Walk Score API.

Edit the fields below to customize the live preview.

Address:

Width: (in pixels)

Layout:
Auto (based on width) Horizontal Vertical

Height:

Get the Tile

To add the tile 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 tile.
Make sure to replace "YOUR-WSID-HERE" with your WSID.

Problems? Read our troubleshooting guide.

Custom Branding

We offer custom branding for the Walk Score Tile that allows you to remove the Walk Score links and keep more visitors on your site. Contact us for more information.

Street View

The tile now incorporates Google Street View when the map area is large enough to display it:

• Vertical layouts with width >= 250
• Horizontal layouts with height >= 275.

For these sizes, a Street View control will appear in the map when the tile finishes loading.

Parameters

You can use the following parameters to customize the tile:

• Required parameters:

  All required parameters are created automatically by the copy and paste code generator above.

  • ws_width — The pixel width of the tile. Note: For widths less than 450, the tile will change to a single column layout.
    Example:  var ws_width = "600";
  • ws_layout — The tile 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 wider tiles.
    Example:  var ws_layout = "vertical";
  • Location parameter:
    You can specify location using an address, OR using a latitude and longitude.
    Note: you may want to write these parameters dynamically using server-side scripting to populate it with an address from your database.
    
    • ws_address — The address the tile will center on.
      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";
    Note: If you specify both an address and a lat/lon pair, the tile will use the latitude and longitude to center the map, but may still use the address as part of the label text when scores are hidden using the ws_hide_scores_below parameter.
• Height:
  • ws_height — The tile 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";
• Don't show scores below a specified threshold:
  • ws_hide_scores_below — By default, the tile displays scores from 0 to 100. If you prefer not to show low scores, you can use this to define the cutoff.
    Example:  var ws_hide_scores_below = "50";
    (this will hide scores 0-49, and show scores 50-100)
• Colors and Styling:
  • ws_background_color — A background color for the whole tile. Light colors recommended. (default: #fff).
    Example:  var ws_background_color = "#fff";
  • Note: To apply other styles to the whole tile, add css to your page that selects the tile'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";