Online Maps with OpenLayers

The next step after mixing and matching different layers is making some of your own.

Why make your own map tiles?

Creating a new base map design can be a daunting task.  Who makes their own custom map tiles, and why?

The neighborhood news company EveryBlock decided to use their own map tiles to have a unique appearance, one which helped neighborhoods stand out instead of highways. Source: http://blog.everyblock.com/2008/feb/18/maps/

Jeffrey Warren wanted to make role-playing game maps of cities, so he used World of Warcraft graphics to make this map of London: http://cartagen.org/find/london?gss=http://unterbahn.com/cartagen/warcraft.gss

ESRI's Local Government maps include a Mobile Night layer to make it easier for maintenance workers to see map features on their computers in the field (third image on this post) http://blogs.esri.com/Dev/blogs/localgovernment/archive/2011/03/15/Create-great-basemaps-for-your-community-with-the-Local-Government-Basemaps-Template.aspx

Getting started with your own OpenStreetMap tiles

CloudMade helps you design your own OpenStreetMap tiles completely online.  They're doing website maintenance as I'm writing this, but you can try out their Style Editor soon ( I'll post directions later ).

The main OpenStreetMap tiles are created using the open-source system Mapnik.

The new TileMill program is based on Mapnik, but has additional features to help you import and export map tiles.  

Google Maps Tiles

Google Maps has a style editor at http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html   I'm not sure if you can use them in OpenLayers, but if you have the Google Maps example open, you can try it out.

Use raw data to map several points in OpenLayers

The quickest way to add several points is CSV (comma-separated values) which is written with a point on each line, and information separated by commas like this:

FirstPoint,40.04,-33.10,More Information
SecondPoint,30,10,More Information

In JavaScript, instead of spreading text over multiple lines, you use \n

"FirstPoint,40.04,-33.10,More Information\nSecondPoint,30,10,More Information"

It's okay if you use some other symbol instead of \n, such as | or ~ or ; as long as it isn't written inside one of your lines.  Then you can use JavaScript to split this text into a list of points.

csv = "FirstPoint,40.04,-33.10,More Information|SecondPoint,30,10,More Information";
pointList = csv.split("|");
// pointList [ 0 ] is now "FirstPoint,40.04,-33.10,More Information"
// pointList [ 1 ] is now "SecondPoint,30,10,More Information"

Now add a FOR loop.  This for loop repeats once for every item in the array.

for ( p = 0; p < pointList.length; p = p+1 ){
     thisPoint = pointList [ p ].split( "," );
}

We used split again, so that thisPoint will be organized into a list / array.  We can use that to read information out of the list to add the point and attributes we want.

for ( p = 0; p < pointList.length; p = p+1 ){
    thisPoint = pointList [ p ].split( "," );
    name = thisPoint [ 0 ];
    latitude = thisPoint [ 1 ];
    longitude = thisPoint [ 2 ];
    info = thisPoint [ 3 ];
   // add point at longitude,latitude
   // add point attributes name and info
}

Formats such as KML, GeoRSS, GPX, and Shapefiles

Keyhole Markup Language (KML) can be used by Google, Bing, OpenLayers, JOSM, Ushahidi, and many more map systems.  The standard features are described at http://code.google.com/apis/kml/ and it's easy to create in an editor such as Google Earth or Google Maps.   If you have a shapefile, there are tools such as this - http://arcscripts.esri.com/details.asp?dbid=15603 - to convert into KML.  Supported in OpenLayers: http://dev.openlayers.org/docs/files/OpenLayers/Format/KML-js.html

GeoRSS is a standard to add a location to a blog post.  It doesn't support more advanced features such as lines and shapes.  It's used by Ushahidi to share updates on their crisis maps: http://oilspill.labucketbrigade.org/feed  ( click view source to see the posts there ).  Supported by OpenLayers: http://dev.openlayers.org/docs/files/OpenLayers/Format/GeoRSS-js.html

GPX is used by most mobile phones and GPS devices to track your location over time.  Supported by OpenLayers: http://dev.openlayers.org/docs/files/OpenLayers/Format/GPX-js.html
 

If your map and your data file are on the same site, use the thematic mapping code as a starting point to add KML and other data: http://thematicmapping.org/playground/javascript/openlayers_choropleth_kml.js