Welcome to Heron! This document is intended to help you get kickstarted. With Heron, you can have a rich mapping application in minutes.
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:
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!
Let’s build a simple web page that just embeds a map with interactive navigation.
Include all 4 required libraries (ExtJS v3, OpenLayers >= 2.12, GeoExt 1.1, Heron) and their CSS in your web page.
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/theme/default/style.css"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js" type="text/javascript"></script>
<script src="http://lib.heron-mc.org/geoext/1.1/script/GeoExt.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>
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://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/theme/default/style.css"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js" type="text/javascript"></script>
<script src="http://lib.heron-mc.org/geoext/1.1/script/GeoExt.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.
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.
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.
As can be seen in the examples, more and more JavaScript libraries and their resources like CSS are available via http://cdnjs.com. Best is to check there first, especially in production cases. A CDN is a Content Delivery Network and in general should be fast and reliable. We are in the process of moving all libraries, including Heron to CDNJS so check there regularly. At least ExtJS, OpenLayers and Proj4JS are on CDNJS.
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. In particular you can look at a simple but complete application example AppDemo. Use the “Info” panel box to see the config.
We also recommend reading Core Concepts to become acquainted with the libraries that form the foundation of Heron.