The Wired Offices in Google Street View on iOS 6. Image: Screenshot/Webmonkey.

Disgruntled iPhone users pining for the good old days of Google Maps have one small thing to celebrate today — Google Street View is back.

No, Google hasn’t released a Google Maps app for iOS 6 users, but the company has added Street View for mobile browsers. Today’s update for Google’s web-based mobile maps includes a Flash-free version of Street View that works in mobile web browsers, including Mobile Safari, which gives iOS users an easy way to access Street View.

The performance of Street View in Mobile Safari is not quite up to par with the native Google Maps app that Apple sacked, but, provided you have a decent network connection (3G worked just find in our testing), it works well.

To use the new Street View, point your mobile browser to maps.google.com and search for a location. Then click the familiar “pegman” icon at the bottom right of the screen to bring up Street View.

It remains to be seen if this is just a nice new feature for the mobile version of Google Maps, or the first step in a long-term strategy for Google Maps on non-Android devices. Will Google build out its web-based offerings, which work in any browser, and skip the native app on platforms it doesn’t control?

Google Maps in mobile browsers still lacks voice over turn-by-turn directions, but the difference between web and native Google Maps apps is fast disappearing. Mobile bandwidth keeps increasing and mobile devices keep getting more powerful. Couple that with emerging HTML APIs like WebRTC, which gives browsers better access to your mobile device, and a platform-native Google Maps app feels less and less necessary.

Google Street View: Sunset over the Great Barrier Reef. Image: Screenshot/Webmonkey

Google Maps’ Street View feature long ago left the street, with “street views” of hiking trails, tours through famous museums and panoramas of the Amazon Basin. Now Google is going even further, diving into the world’s coral reefs to add underwater panoramic images to Google Maps.

To see the new underwater imagery head over to Google Maps and check out a sea turtle swimming among a school of fish or the Great Barrier Reef at sunset. There’s also a new Barrier Reef page on Google’s World Wonders Project which has some more interactive panoramas.

The reef imagery isn’t limited to just the Great Barrier Reef; you can also explore the Apo Island marine reserve in the Philippines or explore Oahu’s Hanauma Bay and Maui’s Molokini crater in Hawaii.

For the curious, no, Google didn’t actually drive its Street View cars and trikes onto fragile reefs around the world; the company is getting the new underwater images from the Catlin Seaview Survey, an ongoing scientific study of the world’s reefs.

Flickr’s new maps (right) are a considerable improvement over the old. Image: Flickr

Photo sharing website Flickr is showing off some nice-looking new maps with considerably more detail than previous versions.

The new look and additional map data for Flickr’s maps come from Nokia Maps, which, as part of a new partnership, is providing map styles and satellite images to Flickr.

If you’ve ever tried to geotag your Flickr photos anywhere even remotely off the beaten path, the updated maps are welcome news.

The new map data, combined with what Flickr already pulls from OpenStreetMap — which Flickr uses in areas where commercial maps lack coverage — means no more dropping your images into a vast sea of beige, guessing that somewhere in there is probably about where you took the photo. Now you’ll see road details, landmarks and even public transportation info like bus stops to help you figure out where you were when you tripped the shutter on that masterpiece.

Google Maps versus Apple's new custom maps on iOS.

The move comes after several big names — including FourSquare and Apple — publicly ditched Google Maps in favor of OpenStreetMap. While neither Apple nor FourSquare has explicitly cited the price increase as a factor in its decision, Google’s Geo Developer blog makes it clear that price was a factor for some users.

“We’ve been listening carefully to feedback,” reads the announcement, which goes on to add “some developers were worried about the potential costs.”

The vast majority of maps hackers and casual developers will probably never be affected by the coming Google Maps pricing structure since the Google Maps API will still be free for the first 25,000 views per day. According to Google only 0.35 percent of sites using the Maps API regularly exceed those limits.

Still, for developers who dream of creating a wildly successful site that does reach those traffic numbers, the Google Maps API will soon be another cost to factor into the plan. And that may be enough to dissuade some from using Google Maps. The price drops may help, but it’s going to be increasingly difficult for big services to justify even the lower price of the Google Maps API when OpenStreetMap is available for free.

Google Maps vs Apple's custom maps. Note the increased road/path detail from OpenStreetMap visible in the Apple version of this map of Vienna, Austria.

The new low-contrast look for iPhoto’s map is distinctly Apple’s, but what’s more interesting is that much of the data behind the maps comes from the open source mapping project OpenStreetMap.

For those unfamiliar with it, OpenStreetMap is an open source project that maintains an editable map of the entire globe. Anyone can make edits and add data to the map, which is why it’s often called the “Wikipedia of maps.” Although OpenStreetMap has been around for some time, it’s recently become considerably more visible as part of Microsoft’s Bing Maps. Additionally some high-profile websites are starting to move away from Google Maps — like Foursquare, which recently ditched Google Maps in favor of OpenStreetMap.

Now, with iPhoto for iOS, Apple is joining the OpenStreetMap party as well.

Apple is using OpenStreetMap data to display maps around the world. OpenStreetMap developers have discovered that Apple is using OpenStreetMap data in Chile, Austria, Italy and many other countries. OpenStreetMap is not, however, being used for the United States. In the U.S. map data appears to be gleaned from a number of sources, including the U.S. Census Bureau and possibly the U.S. Geological Survey.

Interestingly, the OpenStreetMap data Apple is using appears to be quite old, coming from sometime around April 2010. That means that unfortunately several years worth of updates and corrections from OpenStreetMap contributors are missing from Apple’s maps. The result is a map that’s fine for something like adding location details to your vacation photos, but would likely not be accurate enough to provide navigation or directions.

In other words, don’t look for the maps in iPhoto to be the source of a revamped Maps app for iOS — in their current form these maps are just not accurate enough for navigation use.

It’s also worth noting that Apple is using OpenStreetMap data without the necessary attribution. OpenStreetMap’s Creative Commons license governing maps from 2010 requires that Apple add a notice citing the source of the data. As the OpenStreetMap blog notes, the maps are “missing the necessary credit to OpenStreetMap’s contributors; we look forward to working with Apple to get that on there.”

It’s been clear for some time that Apple is looking for a way to wean itself off Google Maps. Apple has even purchased several mapping companies, including Placebase, an online-mapping company and C3 Technologies, which creates 3D maps. Despite these moves Google Maps remain prominent on iOS. Even within the new iPhoto app Google Maps apparently still provides at least some of the data being used.

Location-based web services are all the rage right now, but for most of us the actual geographic location isn’t very interesting — do you know where “40.737813,-73.997887″ is off the top of your head? No? How about “West 14th Street bet. 6th Ave. and 7th Ave?”

For the geographic web to become useful geodata has to be converted into something humans actually understand. Enter OpenStreetBlock.

OpenStreetBlock is a new web service that takes geographic coordinates (latitude/longitude pairs) and turns them into an actual city block description. The result is textual information which, in many cases, will be even more meaningful to your users than the ubiquitous pin on a map.

If you’d like to play around with a sampling of data from New York, head over to OpenStreetBlock and try out the New York demos.

If you’ve ever wanted to build your own version of EveryBlock — which pinpoints events, news stories and public data at the city-block level — OpenStreetBlock will go a long way toward getting you there. So long as you can pull geo coordinates out of your source data, OpenStreetBlock can turn that into more meaningful information.

Under the hood OpenStreetBlock relies on OpenStreetMap data and uses PHP in conjunction with a geographic database to turn your coordinates into block descriptions.

As cool as OpenStreetBlock is, getting it up and running on your own site will require a bit of work. Luckily, there are some good tutorials available that will walk you through the process of installing and setting up many of the prerequisites like PostgreSQL and PostGIS (I’ll assume you already have an Apache server with PHP installed).

To get started with OpenStreetBlock, grab the code from GitHub. The next thing you’ll need is a PostgreSQL database with all the PostGIS tools installed. Luckily those are also prerequisites for GeoDjango, so head over to the GeoDjango installation page, skip the Django-specific parts and just follow the Postgres and PostGIS installation instructions.

Next you’ll need to download Osmosis and Osm2pgsql to convert OpenStreetMap data into something Postgres can handle. Head over to OpenStreetMap, zoom into an area you’d like to query with OpenStreetBlock and then choose “export.” Select the OpenStreetMap XML Data option and save the file.

From there you can check out the guide to importing the OpenStreetMap XML Data in the OpenStreetBlock read me.

See Also:

• Where 2.0: SimpleGeo to Launch ‘iTunes for Geodata’
• EveryBlock Source Code Release Offers Glimpse of the Magic Behind the Curtain
• User-Contributed Announcements Give EveryBlock a Human Touch
• Beautiful Websites: Stamen’s Pretty Maps

If you’re adding a map to your website, why settle for the vanilla design when you can customize it and leave your own personal mark?

This tutorial will show you how to create a custom map from scratch, then add a little unique flavor to it by replacing the standard “map pin” icon with a custom icon of your own design.

To do this, we’ll be using Mapstraction, a library that creates map code that can be reused across all the big mapping providers (Yahoo, Google, et al). Mapstraction also allows for multiple types of customization such as custom info bubbles and graphics like the one we’ll be dropping onto the map.

Note: This tutorial is adapted from the book Map Scripting 101 by Adam DuVander. Adam is a former Webmonkey contributor and executive editor of Programmable Web. In his book, he shows how to use all of the features of the most popular mapping APIs, and how to mash them up with data from other sources like events calendars, weather services and restaurant review sites to make a variety of custom maps.

This exercise comes from chapters 1 and 2 of Adam’s book, and it is reprinted here with his permission and that of the book’s publisher, No Starch Press. It isn’t a word-for-word excerpt. It has been slightly adapted to work as a web tutorial. You’ll find dozens of in-depth exercises — including the full version of this one — in the book itself.

Create a Mapstraction map

Mapstraction is a little different from Google Maps and Yahoo Maps. Mapstraction is an open source JavaScript library that ties into other mapping APIs. If you use Mapstraction, you can switch from one type of map to another with very little work, as opposed to rewriting your code completely.

Using Mapstraction limits your risk to changes being made to an API. For example, if your site’s traffic takes you beyond the limit for your chosen provider, or the provider begins placing ads on the map, Mapstraction lets you switch providers quickly and inexpensively.

To use Mapstraction, you must first choose a provider. In this example, I’m using Mapstraction to create a Google Map.

Open a new HTML file and type the following:

<html> 
  <head> 
    <title>Basic Mapstraction Map</title> 
    <script 
    src="http://maps.google.com/maps/api/js?sensor=false"   
      type="text/javascript"></script> 
    <script type="text/javascript" src="mxn.js?(googlev3)"></script> 
    <style type="text/css"> 
      div#mymap { 
        width: 400px; 
        height: 350px; 
      } 
    </style> 
    <script type="text/javascript"> 
      function create_map() { 
           var mapstraction = new mxn.Mapstraction('mymap', 'googlev3'); 
        mapstraction.setCenterAndZoom( 
          new mxn.LatLonPoint(37.7740486,-122.4101883), 15); 
      } 
    </script> 
  </head> 
  <body onload="create_map()"> 
    <div id="mymap"></div> 
  </body> 
</html> 

Just like you would for a normal Google Map, we include Google’s JavaScript (line 4).

For this code to work, you also need to download the Mapstraction files. Go to mapstraction.com or the project’s github page, and follow the instructions to save the files in the same directory as your HTML file. Best practices would dictate that you keep JavaScript files in their own directory, separate from your HTML, but I’m simplifying things for this example.

The Mapstraction files you should have, at minimum, are mxn.js, mxn.core.js and googlev3.core.js. You may also have files for other providers, such as yahoo.core.js. The only one we need to reference in our HTML code is mxn.js, which loads the other files that it needs, including those we pass it in the file name. Then, in the create_map function, we let it know which type of map we are creating.

Once you have your Mapstraction map, save your HTML file and load it in a browser. The result should look exactly like this.

This Google map, created via Mapstraction, should be centered on No Starch Press’s neighborhood in San Francisco.

As you can see, the HTML hooks are minimal. Some styling to determine the size of the map and an empty div tag with an id attribute are all that’s required. The JavaScript function create_map() takes over and makes calls to the API. This function can have any name you want.

The minimum amount of information needed within the create_map() function is a map type (googlev3), a center point (using a latitude/longitude pair) and a zoom level (Mapstraction’s tightest zoom level is 16, so I backed off one notch to 15, about six blocks across). Then, we pass those options and reference the div tag’s id to create a map.

Add a marker to your map

To add a simple marker to your map, you just need to use two Mapstraction functions. First, create the marker. Next, add it to the map. The reason for these two distinct steps will become clear in further projects when we start to use advanced options, such as custom marker icons.

Let’s see what creating the marker looks like in code. Start with the basic Mapstraction map you created and add these lines to the create_map() function:

marker = new mxn.Marker(new mxn.LatLonPoint(37.7740486,-122.4101883)); 
// marker options will go here 
mapstraction.addMarker(marker); 

The first line creates a marker object, passing latitude/longitude coordinates for the No Starch Press offices in San Francisco. By drawing attention to the graphical marker, we are essentially marking that spot as important.

The second line is a placeholder for any marker options we want to add later. (Any JavaScript line that begins with two slashes is a comment, and the browser ignores them.) The marker options are where we tell Mapstraction which icon to use or add a message to be displayed when the marker is clicked.

Finally, the third line adds the marker to the map. Once this happens, no additional options can be added. The reason is that the marker object is used only by Mapstraction. Once the marker is added to the map, however, Mapstraction makes the appropriate calls to the mapping provider. Mapstraction plots the marker based on all options set beforehand. In this case, we don’t have options to add, but we’ll add to this map in future projects.

If you’re using Google as your mapping provider, your new map will look like the picture below. The default Google icon sits in the center of the map. Although the marker is clickable, this marker is very simple and nothing actually happens if you click it.

Create a custom icon marker

The quickest way to make a map feel like your own is to change the default icon used for markers. Mapstraction has simple marker options that make the technical process of using custom icons a cinch. The more laborious part may be creating the icon file itself. To avoid this, you can find icons others have made online for free. I list several resources on my website.

Still want to create your own? Read on.

To create your own marker icon, you just need to have a graphics program that can save a transparent .png file. The icon can be whatever size you want, but keeping each dimension between 20 and 50 pixels is probably best. If the icon is too small, clicking it becomes difficult; too big, and the icon obscures the location you’re attempting to call out. If you’re using Google as your mapping provider, you also want to create an image to use as your marker’s shadow. This step isn’t necessary if your marker is a similar shape to the Google default or if you’re using another provider.

Not much of an image magician? Use the free online Shadowmaker service to create a shadow.

Add your icon to the map

Now that you have an icon, the easy part is adding it to the marker options. All it takes is setting a few values to tell Mapstraction where the icon image files resides. Your best bet is to keep custom marker icons in a special directory on your server. If you’re testing locally, you can use local copies, accessed by their location relative to the page containing the map. For simplicity, I have the HTML file and the icon files in the same directory in this example. In reality, you might prefer to be more organized.

I decided to use a teensy No Starch Press logo for my custom icon. It’s 27 pixels wide by 31 pixels high. Like I said, the icon is teensy. Then, I used the Shadowmaker service to create a file that is 43×31 including the marker’s shadow.

Finally, it’s time to code. Add these lines as marker options. These lines are inserted after a marker has been created but before the marker has been added to the map:

marker.setIcon('nostarch-logo.png', [27,31]); 
marker.setShadowIcon('nostarch-shadow.png', [43,31]); 

The only parameter you need to include is the path to the image for both the icon and the shadow. Notice that the dimensions of each graphic get passed as an inline array. This parameter is optional but recommended. If you leave it out, some providers will assume the dimensions of the default marker, which could mean a poorly scaled graphic.

The results of the custom marker code are shown below.

The No Starch Press office is marked by the company’s logo, a little iron icon. Notice the shadow, as well, which makes the graphic pop out from the map.

Omit the shadow icon at your own risk. Some mapping providers will assume the default shadow, which might look silly with your icon. Not every mapping provider uses shadows, but planning for one is good. If you really don’t want a shadow, consider using a completely transparent graphic. I show an example of shadowless icons in the weather map example in chapter 10 of my book.

See also:

• Multi-map with Mapstraction
• Microsoft Adds OpenStreetMap Layer to Bing Maps
• Google Gets a New Geocoder

We’ve seen some colorful map mashups in the past, like Hypercities and HeatMap, but few are as abstract and beautiful to look at as Stamen Design’s Pretty Maps.

The aptly-named app pulls sets of geodata from various freely available open mapping projects and plots them atop one another. Pretty Maps grabs street-level data from OpenStreetMap (the “Wikipedia of maps”), land formation data from Natural Earth and place-name and place-shape data from Flickr shapefiles — Flickr’s outlines generated by the tags people have attached to photos taken in that place. So all the data is from crowdsourced databases and either public domain or licensed through the Creative Commons. The maps are generated using TileStache and PolyMaps, two open source tools developed in-house at Stamen.

The result is a map that’s not so much usable for navigation as it is pretty to look at. Cities degrade into abstract and unique blobs, with pastel colors overlaying one another. The shapes are alien looking in texture and density, but instantly recognizable if you’re already familiar with the terrain.

Stamen Design is a small, San Francisco-based data visualization firm best known in its early days for its work with Digg. Stamen specializes in abstract, trippy geo-spatial data visualizations like Trace and Cabspotting. The firm was also awarded a Knight News Grant in June to visualize publicly-available civic data.

Pretty Maps is both pretty and pretty slow. The tiles take about ten seconds to render at the lower zoom levels. This is because the Stamen team hasn’t really optimized Pretty Maps for performance. The multiple data sets get pulled in separately and are layered inside your browser using JavaScript instead of being combined first and served as one, a conscious design choice: “We wanted to leave all the plumbing exposed so that people could look at it and learn from it and, hopefully, build something new,” Stamen says on its website.

So, there’s your invitation to View Source and start digging around. We can only hope the little Grover “Near, Far” zoom controls are part of the package.

See also

• Other “Beautiful Websites”
• Microsoft Adds OpenStreetMap Layer to Bing Maps
• Where’d You Go Last Summer? Flickr Allows OpenStreetMap, FourSquare Geotags
• Historical Map Mashups Turn Cities Into Glass Onions of Time
• OpenStreetMaps Project Takes Maps in a Different Direction

The grandaddy of online mapping sites is turning to an open source library for its cartography data.

Mapquest, which is owned by AOL, launched a new beta site Friday that uses data from OpenStreetMap. So far, the OpenStreetMap data is only available on MapQuest for the United Kingdom and some of continental Europe, but MapQuest says it will broaden the scope of this experiment in the future.

Just to show it’s not messing around, the company has also established a $1 million fund “to support the growth of open-source mapping in the United States.” So, we can expect MapQuest to start hosting U.S. maps from OpenStreetMap at some point.

OpenStreetMap is like a Wikipedia for maps. It’s a fully open source and crowdsourced project. All of the geodata in the OSM system is gathered and entered by volunteers, and all of it is freely available for all to use. Furthermore, if you find an inaccuracy in a map anywhere in the world, you can actually go in and fix it. Here’s what a year’s worth of OSM edits looks like.

There’s a wiki with more information if you want to get involved. We’ve written extensively about the project before — check out some of the links at the bottom of this article.

MapQuest is using OSM for tile images and all cartographic data. It is then applying its own user interface and routing algorithms on top of OpenStreetMaps’ maps.

Here’s what MapQuest’s Antony Pegg has to say about the project on the MapQuest developer blog:

The goal was to create a MapQuest experience for the United Kingdom using only OpenStreetMap data. As much as possible we tried to use the open source software used by the OSM community, so anything we did to these tools could be contributed back. We picked the UK first because we felt we had the best shot of getting use-able routes from the data without having to worry about a language barrier at the same time.

See Also:

• Where’d You Go Last Summer? Flickr Allows OpenStreetMap, FourSquare Geotags
• ‘Tile Drawer’ Makes Hosting Your Own OpenStreetMap Server Dead Simple
• OpenStreetMaps Project Takes Maps in a Different Direction
• Video Tracks a Year of Edits on OpenStreetMap

Microsoft may be a few lengths back in the race to win the online mapping prize, but you can never count Redmond out. The company released an SDK for Bing Maps on Monday, allowing developers to create their own Map Apps for submission into Bing Map Apps gallery (Silverlight is required for that link).

When Microsoft first launched the Bing Map Apps gallery (say that three times fast) a few months ago, it featured interesting geodata mashups from partners like Foursquare, Twitter, Weather.com and TrafficLand.com. These maps provide one or more data layers over whatever map you’re currently looking at, so you can see things like restaurant reviews, geo-tagged tweets, weather camera images and temperature readings or traffic cams. My favorite is the Urban Graffiti tracker from virtualglobetrotting.com which pinpoints places where you can see some cool street art.

Now, anyone can make one of these apps. With the new SDK, developers can create their own geodata overlays using any data set they can get their hands on, then submit their creations to the Map Apps gallery. Microsoft will feature the best submissions and present them to everyone using the Bing search tool. The company says it will also allow advertising in the Map Apps and split the revenue with the creators. There’s a testing tool included in the launch.

The goal of Monday’s release appears to be two-fold: increase interest in Bing Maps, and speed adoption of Silverlight 4, the latest version of Microsoft’s rich media and streaming video platform, and it’s alternative to Adobe Flash.

Everything built with this SDK needs to be done in Silverlight 4. You’ll also need the Silverlight plug-in to view any of Bing’s mapping features — at least version 3 is required for the bing.com/maps website.

It’s a bit of a shame that Microsoft has so deeply baked Silverlight into the Bing maps experience while others — most notably, Google and OpenStreetMap — have managed to create rich, interactive maps using HTML, JavaScript and CSS. But one can’t blame Microsoft for trying to popularize Silverlight at a time when the web is starting to move away from Flash as the de facto standard for presenting rich content in the browser. Even though most of the momentum is going into HTML5, CSS 3 and other open standards, Silverlight stands a chance to win some ground.

Silverlight is currently installed on around 60-65 percent of internet-enabled PCs. Around half of Silverlight’s users are running version 3, with around seven percent running version 4, according to riastats.com.

See Also:

• Smokescreen Project Promises ‘Flash Without the Plug-in’
• Who Needs Flash?
• Microsoft’s ‘Bing’ Search Engine Debuts, But It’s No Google