Heron

Navigation

Table Of Contents

Previous topic

Tutorials

Next topic

Core Concepts

Heron QuickStart

Welcome to Heron! This document is intended to help you get started with. With Heron, you can start from nothing and have a rich mapping application in seconds.

Getting Heron

Heron is built on top of the robust GeoExt and OpenLayers JavaScript mapping libraries and the rich graphical components of ExtJS. Preparing Heron for use on your own web pages is a multi-step process:

  1. Download Heron from the downloads page. For the purposes of this quickstart, the development version will be fine.
  2. Place the unpacked Heron version in a directory that is published by your web server. For this tutorial, we will assume that this is the root of your web server, so that Heron.js is at http://localhost/heron/script/Heron.js. We will also assume that your web page is stored at the root of the web server, e.g. http://localhost/quickstart.html.
  3. For GeoExt, OpenLayers and ExtJS we will use hosted versions, but you could also choose to download and install these frameworks on your local server. See below for download instructions.
  4. Now you’re ready to use Heron in your application!

Note

For convenience we provide hosted versions of Heron, GeoExt, OpenLayers and others on http://lib.heron-mc.org but don’t count on these for production purposes!

Basic Example

Let’s build a simple web page that just embeds a map with interactive navigation.

  1. Include all 4 required libraries (ExtJS, OpenLayer, GeoExt, Heron) and their CSS in your web page.

    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/ext-all.js"></script>

<script src="http://lib.heron-mc.org/openlayers/2.10/OpenLayers-min.js" type="text/javascript"></script>

<script src="http://lib.heron-mc.org/geoext/1.0/GeoExt-min.js" type="text/javascript"></script>

<script src="heron/script/Heron.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="heron/resources/css/default.css"></link>

  2. Define a Heron layout through a JavaScript object:

    <script type="text/javascript">
                Heron.layout = {
                        xtype: 'hr_mappanel',
                        hropts: {
                                layers: [
                                        new OpenLayers.Layer.WMS( "World Map",
                                          "http://tilecache.osgeo.org/wms-c/Basic.py?", {layers: 'basic', format: 'image/png' } )
                                ]
                        }
                };
</script>

The entire source of your page should look something like:

<html>
<head>

<title>A Basic Heron Page</title>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/ext-all.css"/>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/ext-all.js"></script>
    <script src="http://lib.heron-mc.org/openlayers/2.10/OpenLayers-min.js" type="text/javascript"></script>
    <script src="http://lib.heron-mc.org/geoext/1.0/GeoExt-min.js" type="text/javascript"></script>
    <script src="heron/script/Heron.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="heron/resources/css/default.css"></link>

<script type="text/javascript">
            Heron.layout = {
                    xtype: 'hr_mappanel',
                    hropts: {
                            layers: [
                                    new OpenLayers.Layer.WMS( "World Map",
                                      "http://tilecache.osgeo.org/wms-c/Basic.py?", {layers: 'basic', format: 'image/png' } )
                            ]
                    }
            };
    </script>
</head>
<body>
</body>
</html>

And that’s it! This example also illustrates the main concept behind Heron: we declare an application by telling it what to do through a configuration. In a Heron application the Heron.layout is the central configuration JavaScript object that defines which JavaScript components (by xtype, e.g. a map panel) need to be created, their parameters (e.g. map layers) and how they are wired and layout together to form the application. The JavaScript components can be ExtJS, GeoExt or Heron components and use the standard ExtJS factory pattern where ‘xtype’ denotes a registered class.

From here you may want to explore and study the Examples.

Getting the Supporting Libs

The above example used minified, so called hosted, versions of GeoExt, OpenLayers and ExtJS. In production environments and for debugging you will want to install these libraries on your own server. Here’s where to get them.

  1. Download GeoExt 1.0 or later from http://geoext.org.
  2. Download OpenLayers 2.10 or later from http://openlayers.org.
  3. Download the latest Ext 3.x from the ExtJS website.

Note

For production environments, we recommend that you use compressed and minified builds of Heron, GeoExt, OpenLayers and ExtJS to optimize the download size of your page. A generic minified build containing all of Heron is available from the downloads page, but advanced users can build their own.

Going Further

From here, there are a wide variety of options available for making customized, highly interactive mapping applications with Heron. To learn more take a look at Tutorials, examples and API Reference.

We also recommend reading Core Concepts to become acquainted with the libraries that form the foundation of Heron.

Navigation

© Copyright 2011+, Heron MC Community.