The Rise of OpenStreetMap

The last several months have seen a number of high-profile companies switch from using Google Maps to OpenStreetMap (OSM).

The power of free data is incredibly compelling for these companies but it should also resonate with every person who loves maps.

If you haven’t joined OSM yet, you should! Read over their beginner’s guide and learn how to improve the roads and points of interest in your area.

We will take a look at some of the ways you can use OSM data and maps in future posts.


View Larger Map

TileMill Tutorial – Installation

Update: TileMill version 0.4 has been released and offers a simple one-click installation. Parts of this post are now out-of-date and can be ignored.

TileMill is a new map development environment that is free for anyone to use. In their own words:

“TileMill is a modern map design studio powered by open source technology.”

TileMill allows you to take raw GIS data (shapefiles and rasters) and generate high-quality maps. In addition, it allows exporting maps to a set of map tiles which can be used on a website or transferred to a mobile device (there currently is an iPad app available).

Unlike many of our other tutorials, this probably isn’t for beginners. You need to have some background in GIS, HTML/CSS and have access to a Mac or Linux computer. Don’t let this scare you off though as TileMill may just be the future of map design and distribution.


Read the rest of this entry »

OpenLayers Tutorial – Place a Marker

This post continues our series of OpenLayers tutorials. If you are new to OpenLayers, review our basic map setup tutorial before continuing.

A common task of any mapping application is to place a marker at a specified location. OpenLayers provides several options for doing this but we will focus on using a Marker.

Our simple example will allow a user to plot the location of various US cities on an OpenLayers map. In order to accomplish this, we need to know the longitude (X) and latitude (Y) of each city. We will use this list of city coordinates to create a HTML <select> box.

<select id="jumpTo" onchange="jumpTo();">
    <option value="NA">=== Select a City ===</option>
    <option value="-84.42,33.65">Atlanta</option>
    <option value="-104.87,39.75">Denver</option>  
    <option value="-95.35,29.97">Houston</option>
    <option value="-81.32,28.43">Orlando</option> 
    <option value="-121.50,38.52">Sacramento</option>
    <option value="-95.62,39.07">Topeka</option> 
</select>


Read the rest of this entry »

OpenLayers Tutorial – Basic Map Setup

OpenLayers is a open source, javascript framework for generating dynamic maps. It’s incredibly powerful once you understand how to use it. But before we can tackle the more advanced applications, we need to lay some groundwork. This tutorial provides the basic code (HTML, CSS and JavaScript) needed to understand how to embed an OpenLayers map in a website.

HTML Page Creation

Create a new html file using your favorite text editor.

< !DOCTYPE html>
<html>
  <head>
    <title>OpenLayers Tutorial - Basic Map Setup</title>
    <style>
    @media screen{}
    </style>
  </head>
  <body>
    <h1>OpenLayers Tutorial - Basic Map Setup</h1>  
  </body>
</html>


Read the rest of this entry »

New Horizons in 2011

SpatialHorizons.com was started in 2006 to explore the world of geographic information systems (GIS) and application development. The focus then was on desktop applications (mainly Windows-based) and how to use free and open source GIS tools to make cool applications.

Flash forward to 2011 where much has changed in GIS and technology. New software, tools and data sources are emerging to dramatically change how maps and geographic information are used. A new set of horizons are ready to be explored. So SpatialHorizons.com is alive again with some great new tutorials lined up. Stay Tuned!

OpenLayers Tutorial – Add MapServer Data

Update: This post was originally written in 2007. Please visit our newer OpenLayers Tutorials for more up-to-date information.

This post introduces OpenLayers as a easy way to embed dynamic maps in a web page. First-time visitors are encouraged to read our previous posts on setting up MapServer and CGI MapServer for background information.

OpenLayers is a javascript library for creating maps on a web page. In their own words,

OpenLayers is a pure JavaScript library for displaying map data in most modern web browsers, with no server-side dependencies. OpenLayers implements a (still-developing) JavaScript API for building rich web-based geographic applications, similar to the Google Maps and MSN Virtual Earth APIs, with one important difference — OpenLayers is Free Software, developed for and by the Open Source software community. – http://www.openlayers.org/

Setting up OpenLayers is incredibly easy if you want to display data from other existing sources on the web. See their Quick Tutorial page for lots of sample HTML showing how to add a basic map in a web page. In this tutorial, we will focus on how to create a map that uses our own data from MapServer.

Read the rest of this entry »

Using MapServer (3) – CGI MapServer

This post is the third in a series on using MapServer. First-time visitors are encouraged to read part 1 to learn how to download and install MapServer on their computer. Additionally, the data layers used in this tutorial are available to download in this post.

We’ve already introduced MapServer and showed how to create a mapfile using GIS data. We will now introduce MapServer’s CGI functionality as a way to generate a map image. Later we will build on what we’ve learned to create a map using OpenLayers, a web mapping interface.

Introducing Mapserv.exe

At the heart of MapServer is a single file referred to as “mapserv”. With the MS4W package, it is a single executable found at C:\ms4w\Apache\cgi-bin\mapserv.exe. This file is the map production engine that uses a mapfile to generate a map image.

Mapserv.exe is usually accessed internally by MapServer-based packages such as ka-map or Mapscript. But it can also be called directly from a web browser as long as some required parameters are included.

Read the rest of this entry »

Sample Dataset – World Map

A number of our posts have covered downloading and using GIS data but it should be more beneficial to readers if a single post contained all the instructions needed to acquire the data layers in each dataset. Our first such dataset, named “World Map”, has already been introduced but will be discussed in more depth here for the sake of new readers.

CGI MapServer Map

Read the rest of this entry »

Using MapServer (2) – Generating Map Tiles

This post is the second in a series on using MapServer. First-time visitors are encouraged to read part 1 which details how to download, setup, and create a web mapping site using MapServer. Additionally, the topic of map tiles has already been introduced in a previous series.

Once the MapServer for Windows (MS4W) package with ka-Map is installed on your local machine, some new mapping functionality becomes available. One area that interests us is the ability to automatically generate a set of map tiles.

ka-Map Configuration

The first step in creating a set of map tiles is to configure ka-Map to point to a valid MapServer mapfile (see here for more on a mapfile). Navigate to this directory: C:\ms4w\apps\ka-map-1.0\include and open the file named config.php in any text editor.

This configuration file contains several parameters which you should be familiar with before creating our map tiles. We won’t change any of their values yet but it is important to understand what they do. First, on lines 73 and 74, the pixel size of each tile to be generated is defined:

 

$tileWidth = 256;
$tileHeight = 256;

 

Lines 106 through 110 define the most important parameters:

 

$aszGMap = array (
         'title' =&gt; 'GMap 75',
         'path' =&gt; '../../gmap/htdocs/gmap75.map',
         'scales' =&gt; array( 40000000, 25000000, 12000000,
                                 7500000, 3000000, 1000000 ),
         'format' =&gt;'PNG'
 );

 


Read the rest of this entry »

Using SharpMap (4)

This post concludes our tutorial introducing SharpMap and how to use it in a mapping application. We were planning to explore it in some more depth by demonstrating some additional functionality, but we are working on another project that will be discussed in the near future. In short, SharpMap has tremendous potential as a lightweight component for adding mapping capabilities to desktop and web applications.

Our sample application’s source code is available to download below. It includes everything needed to compile and run the application using Visual C# Express. The SharpMap library, included in the download, is released under the GNU Lesser General Public License. For more information on that, see here.

SharpMap Demo Application

Download Source Code