Tutorials

TileMill Tutorial – Installation

Friday, May 6th, 2011

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.

(more…)

OpenLayers Tutorial – Place a Marker

Sunday, March 27th, 2011

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>

(more…)

OpenLayers Tutorial – Basic Map Setup

Wednesday, March 16th, 2011

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>

(more…)

OpenLayers Tutorial – Add MapServer Data

Sunday, December 16th, 2007

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.
(more…)

Using MapServer (3) – CGI MapServer

Sunday, December 9th, 2007

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.
(more…)

Using MapServer (2) – Generating Map Tiles

Wednesday, November 14th, 2007

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'
 );

 

(more…)

Using SharpMap (4)

Wednesday, November 7th, 2007

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

Using SharpMap (3)

Sunday, October 28th, 2007

Our third post in this series (part 1, part 2) on SharpMap continues the development of a basic mapping application programmed in C#. We will now add some more functionality to the program.

SharpMap with Coloring

Zooming By Percentages

The SharpMap.Map class has a Zoom property that stores the map’s current width in the units of the map. To understand this better, add this line of code to the RefreshMap function we’ve already created:

 

MessageBox.Show(_sharpMap.Zoom.ToString());

 

(more…)

Using SharpMap (2)

Saturday, October 20th, 2007

Our previous post introduced SharpMap and how to use it in a C# program. We built a form and used a PictureBox control to display maps generated by SharpMap. We left off with a rather bland looking map of the world:

SharpMap Program

Adding Layer Styles

Adding colors to our countries layer is straightforward. In our form’s constructor, we simply define colors using the Style class:

 

countriesLayer.Style.Fill = Brushes.LightGreen;
countriesLayer.Style.EnableOutline = true;
countriesLayer.Style.Outline = Pens.DarkGreen;

 

We also switched the map’s background color:

 

_sharpMap.BackColor = Color.LightBlue;

 

(more…)

Using SharpMap (1)

Sunday, October 14th, 2007

In our ongoing effort to explore various methods for developing mapping applications, we need to consider incorporating existing libraries instead of writing code ourselves. One such solution is SharpMap. SharpMap is an emerging open source mapping engine that provides functionality to access GIS data, such as shapefiles, and generate map images. In their own words,

SharpMap is an easy-to-use mapping library for use in web and desktop applications. It provides access to many types of GIS data, enables spatial querying of that data, and renders beautiful maps. The engine is written in C# and based on the .Net 2.0 framework. SharpMap is released under GNU Lesser General Public License. [quote source]

So let’s go ahead and program a simple mapping application in C# that uses SharpMap. As with our other tutorials, this example is rather primitive on purpose to highlight specifically how easy it use to use SharpMap. Readers are encouraged to use this tutorial as a basis for creating much richer applications.

(more…)

« Previous Entries