Skip to content

Instantly share code, notes, and snippets.

<iframe width='100%' height='500px' frameBorder='0' src='http://a.tiles.mapbox.com/v3/saman.h3cckgcd/mm/zoompan,zoomwheel,geocoder,share.html'></iframe>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
<script src='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<style>
#map { position:absolute; top:0; bottom:0; width:100%; }
.mapbox-maplogo {
position:absolute;
<!-- works -->
{% if page.category == 'author' %}
<div class='introduction col12'>
{% include landingheader.html %}
</div>
{% endif %}
<!-- doesn't work -->
{% if page.category == 'author' %}
{% include landingheader.html %}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

Notice an error on the foursquare map?

You can fix it! The maps you see on foursquare are powered by OpenStreetMap, a free map that anyone can edit. Thousands of websites and apps rely on OpenStreetMap to provide the underlying data for their maps. By improving the map, you'll be contributing to a project with far-reaching influence.

Two important things you should know before editing:

  1. foursquare uses a custom style of OpenStreetMap provided by MapBox that selectively hides and shows map features - so not every feature in OpenStreetMap will be visible on our maps. A perceived error on the map may be due to our style rather than missing data in OpenStreetMap.

  2. The blue venue markers that are overlaid on top of the base map are completely disconnected from OpenStreetMap. Foursquare venue errors should be dealt with…(??).

>> User.find_by_display_name('samanbb')
User Load (2.2ms) SELECT "users".* FROM "users" WHERE "users"."display_name" = 'samanbb' LIMIT 1
=> nil
>> User.find_by_display_name('saman')
User Load (3.1ms) SELECT "users".* FROM "users" WHERE "users"."display_name" = 'saman' LIMIT 1
=> #<User email: "samanpwbb@gmail.com", id: 1, pass_crypt: "c3d0633a5ea55ac9f3d4043c94d2b005", creation_time: "2012-10-19 21:26:09", display_name: "saman", data_public: true, description: "", home_lat: nil, home_lon: nil, home_zoom: 3, nearby: 50, pass_salt: "FjTRXGXE", image_file_name: nil, email_valid: false, new_email: nil, creation_ip: "127.0.0.1", languages: "en-US,en", status: "pending", terms_agreed: "2012-10-19 21:26:09", consider_pd: true, openid_url: nil, preferred_editor: nil, terms_seen: true, description_format: "markdown", image_fingerprint: nil, changesets_count: 0, traces_count: 0, diary_entries_count: 0, image_use_gravatar: true>
>> u = User.find_by_display_name('saman')
User Load (3.7ms) SELECT "users".* FROM "

this is about 8 months old

I took a first shot at wireframes for the OSM website. Right now they're incomplete but the major concepts are there, so I wanted to take some time to outline my intentions and open things up for feedback.

Basically, I am introducing two new concepts: a revised information architecture, and a new, combined activity feed.

Information Architecture

I scrapped the old navigation. No more tabs, and no more persistent sidebar. I wrote down all the components of the OSM web app, and thought about how best to categorize them. I ended up with 5 basic uses of the site, and buit the UI around those functions. Rather than tabs, these sections are more like overlays, with a more-or-less persistent map underlying everything.

Outline for osm.org talk

Plan is to define a number of fundamental problems with osm.org and present concrete, solutions, in the form of visual mock-ups, that address these flaws.

Problem 1: The site information architecture doesn't properly represent the project.

Rethink the information architecture and visual design of the website to better represent the project and meet real user needs. OpenStreetMap is four interconnected things:

  1. openstreetmap.org is a map in the way Wikipedia is an encyclopedia. Users use it for navigation and exploration. It needs to look like a map and function like a map.
  2. openstreetmap.org is an app designed for editing and maintaining the map. Users use it to inspect data and directly access editing tools.
#!/bin/bash
# Originally written by Young Hahn
# Expects a batch export from Inkscape of tiles in the current directory.
echo "
CREATE TABLE images (
tile_data blob,
tile_id text
);
CREATE TABLE map (
.tour .map-legends {
display: none;
}
.tour .leaflet-bar,
.tour .leaflet-touch .leaflet-bar,
.tour .leaflet-touch .leaflet-control-zoom {
border: none;
}