OpenLayers

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…)