OpenStreetMap Consultant

I don’t want ads on my business map

I don’t blame you. Why would you advertise your competitors on your company web site? You wouldn’t, if you had a choice. And you have a choice. This tutorial shows you how to use OpenStreetMap for your Contact Us web page and eliminate the threat of competitor advertisements on your web page.

A Tale of Two Cafés

A common conversation I have with new OpenStreetMap contributors goes something like this.

How do I put my business in OpenStreetMap?
Did you see the tutorials?
Yes, I did that. But it doesn’t look right. I want my business to be more prominent.
… and more prominent than your competitors?
Yes, please!

Okay. Let’s look at the right way to do this. The question is, How do I control the appearance of my business in OpenStreetMap?

And this article is the answer.

Add your Business to OpenStreetMap

The first and most-important step is to add your business to OpenStreetMap. Place your place on the map. Map your business. Tell us where you are.

The tutorials can help you with this if you haven’t done it already. Also see the OSM wiki section on beginners, the mailing list for beginners, or your local OSM group meetings for possible assistance.

Okay, if you have done this already, chances are that it doesn’t look the way that you want it to look. As an example let’s look at the LinuxCaffe in Toronto. What do we know about the LinuxCaffe?

• LinuxCaffe is a café in Toronto.
• LinuxCaffe serve delicious coffee and made-to-order food.
• LinuxCaffe is a family-owned business.
• LinuxCaffe hosts local group meetings including the first OSM Mapping Party in North America.

That’s a great résumé for inclusion in OpenStreetMap. Surely if any business deserves to be displayed prominently in OpenStreetMap, LinuxCaffe would be that business.

But no. LinuxCaffe, at Grace Street And Harbord Street is rendered only as a café coffee cup icon, while nearby Sam James Coffee Bar shows an icon and name. Why is that? How can LinuxCaffe get the prominence they deserve?

Data vs. Appearance

Let’s look at the data. Both cafés are tagged correctly in the OpenStreetMap database as;

k:amenity v:cafe

LinuxCaffe is shown as a building outline, while SJCB is a node. Additional information about Wifi at LinuxCaffe is included in the database but is unlikely to play a part in this analysis.

Both cafés are available in search functions;

Sam James Coffee Bar Search Result

LinuxCaffe Search Result

So the two cafés should appear the same, all other things being equal. All other things are not quite equal. We’ll come back to this point.

Automated Cartography

Manual cartography is the old-fashioned way that maps were made by Franquelin and Vespucci. Human cartographer, with ink-stained fingers and covered in eraser crumbs, would place items of importance on the map and adjust or omit other items to fit. Each drawn stroke was carefully considered, for the quill v1.0 had no undo button. The human cartographer took instructions from their sponsor or head of state, and drew the map to those guidelines.

OpenStreetMap uses automated cartography to create the image tiles that we see in web browsers like Firefox. In the case of automated cartography, a rendering program, like Mapnik or Osmarender is instructed by a human cartographer to place objects of importance and omit or adjust others. The principles of geographic generalization are used to select, combine, modify and enhance objects placed on the map. Automated cartography makes it possible to create different maps from the same data set by using different generalizations.

A cartographer still make the rules, but the computer applies them.

In some cases the computer may seem to apply the rules ruthlessly.

Now back to all things being equal.

Comparison of Renderers

The OSM Mapnik style displays cafés with a coffee cup icon and the name of the establishment. But the Mapnik style also chooses to not add objects that collide with previously printed objects. Here, as with the earlier image, we see that SJCB has both name and logo. LinuxCaffe has only the name printed; this time the icon is omitted. Note that the name font differs due to the difference in POI rendering and polygon / building rendering.

The OSM osamrender style accepts some level of object overlapping, but in this case, the icon for LinuxCaffe and part of the icon for Sam James Coffee Bar is overwritten by address information. The name for SJCB is not apparent in this rendering.

Some of the differences between the two renderings above are caused by the choice of tools used to create them, while other differences are cartographic decisions made by the respective (groups of) cartographers. Still other differences are imposed by the cartography rules provided and interpreted by the cartographic generalizations used in the rendering tools. These combine with the aspects of the local data to create… Different results for similar businesses.

This is still frustrating for you though. You just want a nice big logo on the map. We’ll get there.

Avoid temptation

You might be tempted to lie about your coffee shop, and call it something else. Tag it as if it were something that is presented more prominently on the map. We’ve seen above, that different cartographers make different decisions about what to place on a map and how to render them. Let’s look at a very different map.

The OpenCycleMap renders OpenStreetMap data with the interests of cyclists in mind. It displays bike shops, bike parking, cycle lanes and other items of interest to a cyclist with priority. And just as we see that bike shops are not shown on the two earlier maps, we see that cafés are not shown on the OpenCycleMap. Had the proprietor of The Bike Clinic been tempted to describe the enterprise as a café for prominence on the Mapnik and Osmarender layers, The Bike Clinic would have been excluded from OpenCycleMap. The viewers of OpenCycleMap are exactly the demographic that The Bike Clinic would like to attract. Cyclists. That they don’t appear on other general purpose cartography is insignificant in this context.

Map your business accurately. You never know when a specialty ice-cream shop and bowling alley map will be launched and bring new clients right to your door.

I hear you. Get to the point, you say. I understand that there is only so much I can do to control general purpose, automated cartography. Show me how to fix this.

Here we go.

Control your Appearance

We know that we can’t control the presentation of OpenStreetMap data on other maps. And we have already added the business to OpenStreetMap. Now let’s look at a map that we can control. A map on your own web site.

Add your map to your web site

We can add an OSM map to a web page with an embedded iframe, but let’s look at a way to do this with more control. Instead of adding a map to a web page, we’ll add a web page to a map.

We’ll set up a basic web page with some example content. You can add these code fragments to your own web page. You’ll need to understand html and css to continue, or pass this information on to your web site person. Find the sample page here.

First we’ll decide where the map should be centered and what zoom level to use as the default. Visit OpenStreetMap and navigate to the place and zoom level of interest. Pressing the permalink link at the lower left of the map will add latitude, longitude and zoom information to the address bar of your browser. Note those settings for later. For LinuxCaffe and this example, I note the following

lat = 43.66012
lon = -79.417355
zoom = 14

You’ll want to adjust these setting in your web page. Look for the variable assignments near line #36 in my-osm.html. You might choose to change the size of the displayed map by adjusting the css height and width near line #5 in the same file.

When you can view your page in a browser, with the map sized, zoomed and centered to your liking we’ll add a logo to the map. It might look like this.

Add your logo to your map

We’ll add a larger coffee cup image to the map for LinuxCaffe, you might choose a corporate logo or a freely licensed logo like the ones in the following collections.

SJJB Map Icons
Map Icons

Add my-osm.txt and the image to your web page directory. Rename the text file to my-osm.txt. If you have used another image file, adjust the image file name in line #2 of my-osm.txt.

You have it right when you can reload the web page and have a large coffee cup in the middle. That might look like this.

You’ll find that the icon we added gives great prominence to our location, as the icon is presented the same size at every zoom level. That means that as an extreme, we can see the giant coffee cup poised over North America when we view the entire planet.

Add details in a pop up

Now that we have the map as we like it, and an additional icon adding prominence, let’s add some more details with a pop up.

A new example my-osm.txt file contains some extra details. Rename it my-osm.txt, reload the page and click on the coffee cup icon.

The pop up extends beyond the map view in this case. Adjust the map center to keep the pop up on screen. In this case I changed the lat and lon variables, near line #36 in my-osm.html to

lat = 43.666
lon = -79.403

And it looks like this. You might want to frame your map to show another local landmark to add context to your location.

Please note

This is only suitable for very low traffic web sites. If your web site is at all successful, and your visitors request a noticeable number of map tiles from the OpenStreetMap servers, your site risks being blocked using this method. OpenStreetMap resources are supported entirely by donations and volunteers, so OSM can not and will not promise that you can use this tile server at your discretion.

So let’s fix that for your high traffic web site.

The nice folks at MapQuest have started using OpenStreetMap and have welcomed us to use their tile servers. So even moderate traffic web sites, up to 4000 tiles per second, are welcome to use the MapQuest tile servers. They request that you if you expect higher traffic.

Download this modified version of OpenStreetMap.js that is enabled for MapQuest tiles.

First, modify my-osm.txt near line #24 to use the local version of OpenStreetMap.js that you just downloaded.

Second, modify the attribution line, near line #55 to include tile attribution for MapQuest similar to ‘Tiles courtesy of MapQuest, Data OpenStreetMap.org CC-By-SA (v2)‘

Your updated web page will look like this.

Extra credit

Continue to style your pop up with additional elements, perhaps address and telephone?

Resources and Credits

Download all of the example files from this tutorial in one zip file.

LinuxCaffe photo by Behdad Esfahbod is licensed CC-By

You can get help implementing your OpenStreetMap solution from service providers listed on the OSM wiki or contact me for recommendations.