Fork me on GitHub

GEO5 = HTML5 + Geo.

Interactive maps using HTML5 data tags, no coding!

NEWSFLASH! - "Geo." lives below the Internet Poverty Line

For a long time, i have felt that "Geo" - Spatial Content has been relegated a role as a third-class denizen of The Internet and HTML(5) in particular...

Included as an afterthought or somehow shoe-horned into existing web technology by "propellor-head" developers in GIS dark rooms, Geo seems to have missed the calling that Video and Audio have recieved with the advent of HTML5.

Since almost the inception of HTML, the <MAP/> element has been a first class denizen of HTML and The Internet .... but, amazingly it still remains an Image Map; as opposed to a spatial representation of data.

GEO5 seeks to restore "Geo" as a first class denizen of the modern, HTML5, Internet by allowing content authors to markup their existing HTML content with Spatial/Geo context. Further, it allows authors to bind HTML content to Geo. elements in a sophisticated manner regardless of choice of web technology without the need for specialist coding skills.

It is my hope that GEO5 can be leveraged to produce a range of new tools such as WordPress authoring plugins, Browser plugins and extensions and MS Office/OpenOffice tools to ease the authoring of "Geo" content by making it a first-class element of the modern content authoring process.

Requires HTML5 doctype

GEO5 makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

<!DOCTYPE html>
<html lang="en">
  ...
</html>
            

Now, here's a look at a typical HTML file:

<!DOCTYPE html>
<html>
  <head>
    <title>GEO5 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Hello, globe!</h1>
  </body>
</html>
            

To make this a GEO5 template, simply include just one JS file:

<!DOCTYPE html>
<html>
  <head>
    <title>GEO5 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Hello, Globe!</h1>
    <script src="http://geo5.org/js/geo5.js"></script>
  </body>
</html>
            

And you're set! With those two files added, you can begin to Geoenable any site with GEO5.

See a complete demo for ArcGIS Feature Layers here

See a complete demo for GeoJSON Feature Layers here

See a JSON TileCache example of Map tiles pre-packaged within your pages

See a Completely Offline example of JSON TileCache which uses the HTML5 Offline API to work even when completely disconnected!

No Javascript Needed

Adding Map Display components to your HTML pages should be as easy as including an appropriate tag on your existing HTML elements. With GEO5 it is exactly that easy!

Turning a standard DIV element into an interactive web map display can be achieved with the following simple addition to your HTML:

<div id="myMap" data-geo-type="map" data-geo-basemap="Stamen.Toner">
  ...
</div>
            

Basemap Types

GEO5 provides access to a wide variety of basemaps from free providers regardless of their format as well as basemaps from subscription and registered providers.

Selecting your basemap is as easy as setting the data-geo-basemap attribute on your map element:

(default)
OpenStreetMap.Mapnik
OpenStreetMap.BlackAndWhite
Stamen.Toner
Stamen.TonerBackground
Stamen.TonerLines
Stamen.TonerLabels
Stamen.TonerLite
Esri.WorldImagery
Esri.WorldGrayCanvas
Acetate.all
Acetate.basemap
Acetate.terrain
Acetate.roads
Acetate.labels
Acetate.hillshading
<div 
  id="myMap" 
  style="height:150px" 
  data-geo-type="map"></div>

<div 
  id="myMap1" 
  style="height:150px"  
  data-geo-basemap="Stamen.Toner"></div>


<div 
  id="myMap2" 
  style="height:150px"  
  data-geo-basemap="Esri.WorldImagery"></div>

<div 
  id="myMap3" 
  style="height:150px"  
  data-geo-basemap="Esri.WorldGrayCanvas"></div>
....

Current options suitable for basemaps are:

  • OpenStreetMap
    • OpenStreetMap.Mapnik
    • OpenStreetMap.BlackAndWhite
    • OpenStreetMap.DE
  • OpenCycleMap
  • Thunderforest
    • Thunderforest.OpenCycleMap
    • Thunderforest.Transport
    • Thunderforest.Landscape
    • Thunderforest.Outdoors
  • OpenMapSurfer
    • Grayscale
  • MapQuestOpen
    • MapQuestOpen.OSM
    • MapQuestOpen.Aerial
  • Stamen
    • Stamen.Toner
    • Stamen.TonerBackground
    • Stamen.TonerHybrid
    • Stamen.TonerLines
    • Stamen.TonerLabels
    • Stamen.TonerLite
    • Stamen.Terrain
    • Stamen.TerrainBackground
    • Stamen.Watercolor
  • Esri
    • Esri.WorldStreetMap
    • Esri.DeLorme
    • Esri.WorldTopoMap
    • Esri.WorldImagery
    • Esri.WorldTerrain
    • Esri.WorldShadedRelief
    • Esri.WorldPhysical
    • Esri.OceanBasemap
    • Esri.NatGeoWorldMap
    • Esri.WorldGrayCanvas
  • Acetate
    • Acetate.all
    • Acetate.basemap
    • Acetate.terrain
    • Acetate.foreground
    • Acetate.roads
    • Acetate.labels
    • Acetate.hillshading
    • OpenSeaMap
    • OpenWeatherMap
      • OpenWeatherMap.Clouds
      • OpenWeatherMap.CloudsClassic
      • OpenWeatherMap.Precipitation
      • OpenWeatherMap.PrecipitationClassic
      • OpenWeatherMap.Rain
      • OpenWeatherMap.RainClassic
      • OpenWeatherMap.Pressure
      • OpenWeatherMap.PressureContour
      • OpenWeatherMap.Wind
      • OpenWeatherMap.Temperature
      • OpenWeatherMap.Snow

Operational Layers made easy

In addition to a variety of Basemaps, GEO5 provides the essential capability to include operational layers on your maps without Javascript coding

Adding an operational layer to a map is as easy as including an data-geo-type="tileLayer" attribute on any HTML element.

Stamen.TonerLabels on Esri.WorldPhysical
<div 
  id="mapWithLayers" 
  style="height:350px" 
  data-geo-type="map" 
  data-geo-zoom="4" 
  data-geo-basemap="Esri.WorldPhysical"
  data-geo-centre="-25.95804467331783,131.1328125"></div>
<div 
  id="tempLayer" 
  data-geo-type="tileLayer" 
  data-geo-map="mapWithLayers" 
  data-geo-layer-type="Stamen.TonerLabels">Stamen.TonerLabels on Esri.WorldPhysical</div>

Raster Layers

GEO5 supports a wide variety of raster/imagery based layer from many popular providers

To add a raster layer to any GEO5 map, you simply need to include an data-geo-type="tileLayer" attribute and specify the type of layer with the data-geo-layer-type="{layertype}" attribute. Other options for the specific layer are also specified utilising data-{LAYERTYPE}-{OPTION}="{VALUE}" syntax.

As with all GEO5 components, you can include configuration options and settings directly on the HTML elements of your standard HTML page through the use of data-* attributes (a part of the HTML5 specification)

ArcGIS Tiled MapService

ArcGIS MapService's which are exposed with pre-cached tiles (Single Fused Map Cache). You can add ArcGIS MapService layers of this kind to your web pages by utilising the data-geo-layer-type="ArcGIS"


<div 
  id="mapWithLayers2" 
  style="height:350px" 
  data-geo-type="map" 
  data-geo-basemap="Stamen.Watercolor" 
  data-geo-zoom="4" 
  data-geo-centre="-25.95804467331783,131.1328125"></div>

<a 
  href="#" 
  id="tempLayer5" 
  data-geo-type="tileLayer" 
  data-geo-map="mapWithLayers2" 
  data-geo-layer-type="ArcGIS" 
  data-geo-layer-url="http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"></a>

OpenGeo WMS

Open Geospatial Consortium (OGC) Web Mapping Service (WMS) layers are supported through the familiar attribute-based syntax within GEO5


Cubewerx.gtopo30 on Esri.WorldPhysical
<div id="mapWithLayers1" 
  style="height:350px"
  data-geo-type="map" 
  data-geo-basemap="Esri.WorldPhysical" 
  data-geo-centre="8.407168163601076,18.6328125" 
  data-geo-zoom=2 ></div>

<div id="tempLayer1" 
  data-geo-type="tileLayer" 
  data-geo-map="mapWithLayers1" 
  data-geo-layer-type="wms" 
  data-geo-layer-url="http://demo.cubewerx.com/demo/cubeserv/cubeserv.cgi" 
  data-wms-Layers="Foundation.gtopo30">Cubewerx.gtopo30 on Esri.WorldPhysical on Esri.WorldPhysical</div>

Tiled Map Service (TMS)

Generic Tile based map services (TMS) are supported by GEO5. This allows you to access custom or proprietary Map Servives by specifying the format of the url endpoint utilised to access the service.


Esri.WorldStreets on Stamen.Watercolor
<div id="mapWithLayers11" 
  style="height:350px" 
  data-geo-type="map" 
  data-geo-basemap="Stamen.Watercolor" 
  data-geo-centre="-35.28857698047821,149.1460132598877" 
  data-geo-zoom=14 ></div>
<div 
  id="tempLayer11" 
  data-geo-type="tileLayer" 
  data-geo-map="mapWithLayers11" 
  data-geo-layer-type="TMS"
  data-geo-layer-url="http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}"></div>

Vector Layers

GEO5 supports a variety of Vector layers with complex Cartographic styilng capabilites available without the necessity of Javascript code.

Without modification or inclusion of additional plugin scripts [see Geo. Behaviours], the following vector layer types are supported:

  • GeoJSON
  • ArcGIS Feature Services
  • CSV
  • KML
  • GPX

The content for any featureLayer can be specified using the data-geo-url , src or href attributes on your HTML elements. Content can also be provided as the contents of a SCRIPT tag with the type="text/geoJSON" attribute set. In this way, spatial content can be directly embedded in your HTML without any visible trace.


ArcGIS Feature Services

Including ArcGIS Feature Services on your maps with GEO5 simply requires the inclusion of the data-geo-type="featureLayer" and specifying the appropriate data-geo-layer-type="arcgis" attribute.

By default, GEO5 when used with an ArcGIS Server Feature Service, uses symbology and scaleRange options from ArcGIS Server. This lets your write less code and use the symbology and scale dependent rendering you've spent many hours developing with ArcGIS Desktop.

ArcGIS Feature Service Layer Showing San-Francisco 311 Incidents on Stamen.Toner basemap

Is achieved simply through the following code...

<div id="mapWithLayers22" 
  style="height:350px" 
  data-geo-type="map" 
  data-geo-basemap="Esri.WorldGrayCanvas" 
  data-geo-centre="37.78730132936438,-122.42460250854492" 
  data-geo-zoom=16></div>

<a id="tempLayer22" 
  data-geo-type="featureLayer" 
  data-geo-layer-type="arcgis" 
  data-geo-map="mapWithLayers22" 
  href="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/FeatureServer/0" 
  data-layer-popup-template="<h5>{req_type}</h5>">ArcGIS Feature Service Layer Showing San-Francisco 311 Incidents on Stamen.Toner basemap</a>

GeoJSON

Including GeoJSON features on your maps with GEO5 simply requires the inclusion of the data-geo-type="featureLayer" and specifying the appropriate data-geo-layer-type="geojson" attribute

<div id="mapWithLayers20" 
  style="height:350px" 
  data-geo-type="map" 
  data-geo-basemap="Stamen.TonerBackground" 
  data-geo-zoom=1 ></div>
<a id="tempLayer20" 
  data-geo-type="featureLayer" 
  data-geo-layer-type="geojson" 
  data-geo-map="mapWithLayers20" 
  href="./data/countries.geo.json">
CountriesOfTheWorld GeoJSON
</a>

GeoCSV

Including CSV Marker features on your maps with GEO5 simply requires the inclusion of the data-geo-type="featureLayer" and specifying the appropriate data-geo-layer-type="csv" attribute

In this example, the GeoCSV content in included directly within the content of a PRE tag in the HTML, demonstrating GEO5's capability to enrich existing HTML with spatial content.



lat,lng,title
48.8566,2.3522,París - Capital of France
40.4168,-3.7038,Madrid - Capital of Spain
41.9015,12.4608,Rome - Capital of Italy
37.9837,23.7293,Athens - Capital of Greece

Is achieved simply through the following code...

<div id="mapWithLayers21" 
  style="height:350px" 
  data-geo-type="map" 
  data-geo-basemap="Stamen.TonerBackground" 
  data-geo-zoom=3></div>
<pre id="tempLayer21"
  data-geo-type="featureLayer" 
  data-geo-layer-type="csv" 
  data-geo-map="mapWithLayers21">48.8566,2.3522,París - Capital of France
40.4168,-3.7038,Madrid - Capital of Spain
41.9015,12.4608,Rome - Capital of Italy
37.9837,23.7293,Athens - Capital of Greece</pre>

GPX track files

Including GPX track data on your maps with GEO5 simply requires the inclusion of the data-geo-type="featureLayer" and specifying the appropriate data-geo-layer-type="gpx" attribute.

GPS track from California International Marathon
<div id="mapWithLayers255" 
  style="height:350px" 
  data-geo-type="map" 
  data-geo-basemap="Esri.WorldGrayCanvas" 
  data-geo-centre="38.636718267483616,-121.34674072265624" data-geo-zoom=11></div>

<a id="tempLayer25" 
  data-geo-type="featureLayer" 
  data-geo-layer-type="gpx" 
  data-geo-map="mapWithLayers255" 
  href="./data/demo.gpx.xml">GPS track from California International Marathon</a>

KML files

Including KML content on your maps with GEO5 simply requires the inclusion of the data-geo-type="featureLayer" and specifying the appropriate data-geo-layer-type="kml" attribute.

Simple KML Features example
<div id="mapWithLayers256" 
  style="height:350px" 
  data-geo-type="map" 
  data-geo-basemap="Esri.WorldGrayCanvas"
  data-geo-zoom=13></div>

<a id="tempLayer25" 
  data-geo-type="featureLayer" 
  data-geo-layer-type="kml" 
  data-geo-map="mapWithLayers256" 
  href="./data/kml-example.kml.xml">Simple KML Features example</a>

Dynamic content without coding

In addition to providing seamless integration of your spatial content with your HTML applications, GEO5 provides a comprehensive binding capablilty which allows you to customize most components of the standard Map interface via HTML inclusions.

GEO5 also provides a comprehensive 2-Way binding mechanism (based upon Knockout.js) which allows you to directly bind HTML elements to Map and Layer properties in a 2-Way fashion. This method of binding is specified utilising HTML5 data-* attributes and produces HTML interfaces which allow you to update map/layer properties without coding effort. Likewise, any changes in the map/layer properties which occur will be reflected automagically in your HTML!

Popup Templates

Popup information windows for the features on your layers are an integral part of any GIS application. GEO5 provides sensible default templates for popups on all of your Operational Layers. Sometimes, however, sensible is not enough.

You can provide templates for your Popup InfoWindows by specifing the HTML content for the popup within the data-layer-popup-template of the element specifying your layer within your HTML.

In order to provide further flexibility in Popup InfoWindows, you may utilise the popular {Mustache} style templating syntax to dynamically insert the values of the attributes/properties of the feature for each popup.

<a id="tempLayer22" 
  data-geo-type="featureLayer" 
  data-geo-layer-type="arcgis" 
  data-geo-map="mapWithLayers22" 
  href="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/FeatureServer/0" 
  data-layer-popup-template="<h5>{req_type}</h5>">ArcGIS Feature Service Layer Showing San-Francisco 311 Incidents on Stamen.Toner basemap</a>

In more compex situations, you can customise the look and feel of your info windows by binding an additional element to the associated layer. Although the element you choose for you custom content may be any HTML element, in order to include complex templates in your application with polluting the visual HTML, it is recommended to use the SCRIPT element with a type attribute other than type="text/javascript". To provide additional semantic context to your HTML, it is recommended that you use the format type="geo/content-type"

ArcGIS Feature Service on Stamen.Toner basemap with custom Popup Window
Templated HTML Popups

For moderately complex Popup Content, you can use the familiar {Mustache} style of templating within a SCRIPT tag as below:

<div id="mapWithPopup" 
  style="height:350px" 
  data-geo-type="map" 
  data-geo-basemap="None" 
  data-geo-centre="45.52751668442124, -122.67175197601318" 
  data-geo-zoom=14</div>

<!--  ... base layers and operational layers .... -->

<script type="geo/layer-popup-template" 
    data-geo-type="layerPopup" 
    data-geo-layer="popupBikeLayer" 
    data-content-type="template">
<h3>{BIKEMODE}</h3>
<h4>{PREFIX} {STREETNAME} {FTYPE}</h4>
</script>
Scripted HTML Popups

For additionally complex HTML templating that go beyond the capability of {Mustache} templating, GEO5 allows you to specify Popup Templates with a Javascript function block which is called for each Feature rendered to your layer.

This script block should utilise the attributes of the passed-in feature (passed as a parameter named properties) and return a HTML string to be utilised for the popup of the associated feature.

In a manner similar to mustache templated popups, you may included the Javascript body of your templating function within a SCRIPT tag as below:

<div id="mapWithPopup" 
  style="height:350px" 
  data-geo-type="map" 
  data-geo-basemap="None" 
  data-geo-centre="45.52751668442124, -122.67175197601318" 
  data-geo-zoom=14</div>

<!--  ... base layers and operational layers .... -->

<script type="geo/layer-popup-template" data-geo-type="layerPopup" data-geo-layer="popupBikeLayer" data-content-type="script">

  console.log("infowindow script ==>",properties);
  return "<h3>"+properties["BIKEMODE"]+"</h3><h4>"+properties["PREFIX"]+" "+properties["STREETNAME"]+" "+properties["FTYPE"]+"</h4>";

</script>

Symbology without coding

GEO5 provides the default capability to honour the Symbology options of your ArcGIS Feature Layers. Applying your styles for images, line styleing coloring and fills based upon the hard work you have performed within ArcGIS Desktop.

As well as this useful capability, GEO5 allows you to utilise a standard JSON based styling language to dynamically style any of your Vector Layers.

Compelling, dynamically styled vector features can be created within the browser without the need for Javascript coding via the use of GEO5's GeoStyle objects

In the previous map example, the bike routes are dynamically styled in the browser based upon a Unique Value classification.

The geoStyle code utilised to achieve this is included below:

<!--  ... Map, base layers, operational layers, Templates .... -->
<script type="geo/layer-style" data-geo-type="geoStyle" data-geo-layer="popupBikeLayer">
{
  type: "unique",
  property: "BIKEMODE",
  values: [
    {
        value: "Low traffic through street",
        vectorOptions: {
            color: "#007D7D",
            opacity: 0.5,
            weight: 2.5,
            title:"{BIKEMODE}"
        }
    },{
        value: "Bike boulevard",
        vectorOptions: {
            color: "#00FF3C",
            opacity: 0.5,
            weight: 2.5,
            title:"{BIKEMODE}"
        }
    },{
        value: "Caution area",
        vectorOptions: {
            color: "#FF0000",
            opacity: 1.0,
            weight:3.5,
            title:"{BIKEMODE}"
        }
    },{
        value: "Local multi-use path",
        vectorOptions: {
            color: "#00BEFF",
            opacity: 0.5,
            weight: 2.5,
            title:"{BIKEMODE}"
        }
    },{
        value: "Regional multi-use path",
        vectorOptions: {
            color: "#b1a9d0",
            opacity: 0.5,
            weight: 3.0,
            title:"{BIKEMODE}"
        }
    },{
        value: "Moderate traffic through street",
        vectorOptions: {
            color: "#FFEB00",
            opacity: 0.5,
            weight: 3.0,
            title:"{BIKEMODE}"
        }
    },{
        value: "Planned multi-use path",
        vectorOptions: {
            color: "#000000",
            opacity: 0.5,
            weight: 2.0,
            title:"{BIKEMODE}"
        }
    },{
        value: "Bike lane",
        vectorOptions: {
            color: "#328000",
            opacity: 0.75,
            weight: 2.0,
            title:"{BIKEMODE}"
        }
    },{
        value: "High traffic through street",
        vectorOptions: {
            color: "#FFA500",
            opacity: 0.5,
            weight: 3.25,
            title:"{BIKEMODE}"
        }
    },{
        value: "Planned bike lane",
        vectorOptions: {
            color: "#000000",
            opacity: 1.0,
            weight: 2.5,
            title:"{BIKEMODE}"
        }
    }
  ]    
}
</script>

Symbology for a layer can be defined a few different ways including single, unique and range. If no symbology is defined the default Leaflet vector styles will be used.

When instantiating a new layer, use one of the options below when setting the symbology option value.

single

The single type displays all features with the same symbology.

{
    type: "single", // Defines the symbology as a single type of representation for all features
    vectorOptions: { // Leaflet Path options for all features
        fillColor: "#46461f",
        fillOpacity: 0.5,
        weight: 4,
        color: "#ff7800"
    }    
}

unique

The unique type displays features with the same attibute values with the same symbology. This is helpful when you have a handful of discrete values for which you want to define symbology.

{
    type: "unique", // Defines the symbology as a unique type where features with an attribute of a specific value are symbolized the same way
    property: "DISTRICT", // The property (field, attribute) to use for defining unique values and styles
    values: [ // An array of values to set symbology. Each value has a specific symbology
        {
            value: "A", // If feature.properties.DISTRICT == "A"
            vectorOptions: { // Use these Leaflet Path options for features matching
                fillColor: "#6600FF",
                fillOpacity: 0.6,
                color: "#666666",
                opacity: 0.8,
                weight: 1
            }
        },
        {
            value: "B",
            vectorOptions: {
                fillColor: "#660066",
                fillOpacity: 0.6,
                color: "#666666",
                opacity: 0.8,
                weight: 1
            }
        },
        {
            value: "C",
            vectorOptions: {
                fillColor: "#FF9900",
                fillOpacity: 0.6,
                color: "#666666",
                opacity: 0.8,
                weight: 1
            }
        }
    ]
}

range

The range type tests values to see if they are within a specified range and symbolizes them accordingly. This is helpful for datasets that have values with lots of individual values like population counts per county in the US or in this example, vehicle speeds.

{
    type: "range", // Defines the symbology as a range type where values above a minimum and below a maximum value are symbolized the same way
    property: "SPEED", // The property (field, attribute) to use for defining range values and styles
    ranges: [ // An array of value ranges to set symbology. Each value range has a specific symbology.
        {
            range: [1, 20], // if feature.properties.SPEED >= 1 AND feature.properties.SPEED <= 20
            vectorOptions: { // Use these Leaflet Path options for features with values in this range
                icon: new customIcon({
                    iconUrl: "../../docs-demo/img/markers/bus-brown.png"
                })
            }
        },{
            range: [21, 100],
            vectorOptions: {
                icon: new customIcon({
                    iconUrl: "../../docs-demo/img/markers/bus-green.png"
                })
            }
        }
    ]
}

Binding yout HTML to Spatial content

GEO5 implements 2-way DataBinding through the use of KnockoutJS. For a complete guide to the data binding language syntax and capability please see the KnockoutJS website.

DataBinding works by attatching observers to the properties and methods of a Data Model and updating HTML DOM Elements which are associated with them. 2-Way binding also observes any changes to HTML DOM elements and populates the associated property on the bound DataModel (Object).

GEO5 automates the task of binding HTML elements in your page to the Map, Layer and Feature objects you have defined with GEO5. With full 2-way capability, this allows you to attatch, for instance, a HTML input element (CSS3 styled as a Slider of course!) to the Zoom property of the map to provide an instant Zoom Slider control for your maps.

Similarly, you could bind an accordion panel to the Layers property of the map to produce an interactive legend capable of controlling transparency and visibility; or you might choose to bind a HTML Table to the Features collection of a filtered Feature Service to provide an interactive tabular view of the features on your map.

The bounds of what you can create with 2-way bound elements within your HTML are limited only by imagination. The ease at which both the physical Map and bound elements update in reaction to changes in the other without any need to write Javascript code mean that GeoEnabled content can be created by authors rather than developers utilising more common tools such as Bloggin Platforms / CMS.

This also means that content can be enriched in-situ within existing documetns without the need to alter layout. Even with javascript disabled or no map ever displayed, the additional information included in your content will mean that Spatial Search engines can more accurately index and find the exact content your audience are looking for.

Binding to Map Content

LOOK MA', NO JAVASCRIPT! The following display was created without the need for any coding experience or Javascript code:

Map Properties
Centre

Latitude: , Longitude:

Mouse Location

Latitude: , Longitude:

.. created simply with the following HTML markup:

<div data-geo-type="map"  data-geo-basemap="Stamen.Toner" id="boundMap" style="height:350px"></div>
<div data-geo-binding="boundMap">
  <h5>Map Properties</h5>
    Zoom: <input type="text" id="txtMapZoom" data-bind="value: zoom, valueUpdate:'keypress'" />
    <h6>Centre</h6>
    <p data-bind="with: centre">
      Latitude: <span data-bind="text: lat"> </span>,
      Longitude: <span data-bind="text: lng"> </span>
    </p>
    <h6>Mouse Location</h6>
    <p data-bind="with: mouseLocation">
      Latitude: <span data-bind="text: lat"> </span>,
      Longitude: <span data-bind="text: lng"> </span>
    </p>
</div>

Binding to Layer Content

Making a Layer visibility display? .. Easy with GEO5!

...Done like this (did i forget the javascript? .. no!) :

<div 
  data-geo-type="map" 
  data-geo-basemap="Stamen.Watercolor" 
  id="boundMap1" 
  style="height:350px" 
  data-geo-zoom="4" data-geo-centre="-25.95804467331783,131.1328125"></div>
<div id="lyrRef" 
  data-geo-layer-title="World Ref." 
  data-geo-type="tileLayer" 
  data-geo-map="boundMap1" 
  data-geo-layer-type="ArcGIS" data-geo-layer-url="http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"></div>
<div id="lyrPlacesBoundaries" 
  data-geo-layer-title="Boundaries and Places" 
  data-geo-type="tileLayer" 
  data-geo-map="boundMap1" 
  data-geo-layer-type="ArcGIS" data-geo-layer-url="http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places_Alternate/MapServer"></div>
<div id="lyrTransport" 
  data-geo-layer-title="Transportation" 
  data-geo-type="tileLayer" 
  data-geo-map="boundMap1" 
  data-geo-layer-type="ArcGIS" data-geo-layer-url="http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer"></div>


<div data-geo-binding="lyrRef">
     <input type="checkbox" data-bind="checked: visible"> <span data-bind="text: title"></span></input>
</div>

<div data-geo-binding="lyrPlacesBoundaries" class="span2">
    <input type="checkbox" data-bind="checked: visible"> <span data-bind="text: title"></span></input>
</div>

<div data-geo-binding="lyrTransport" class="span2">
    <input type="checkbox" data-bind="checked: visible"> <span data-bind="text: title"></span></input>
</div>

Binding to Feature Content

In the same way in which you can automatically bind your HTML to the Map and Layer objects you can also bind your HTML elements directly to the Features on your Vector layers.

Utilising this technique you can produce dynamic displays which have multiple representations of your spatial data.


lat,lng,title
48.8566,2.3522,París - Capital of France
40.4168,-3.7038,Madrid - Capital of Spain
41.9015,12.4608,Rome - Capital of Italy
37.9837,23.7293,Athens - Capital of Greece
Capital Name

Created simply with the following markup:

<div id="atlasMap" 
  style="height:400px" 
  data-geo-type="map" 
  data-geo-basemap="Stamen.TonerBackground" 
  data-geo-zoom=1></div><br/>

<pre id="citiesLayer" 
  data-geo-type="featureLayer" 
  data-geo-layer-type="csv" 
  data-geo-map="atlasMap">48.8566,2.3522,París - Capital of France
40.4168,-3.7038,Madrid - Capital of Spain
41.9015,12.4608,Rome - Capital of Italy
37.9837,23.7293,Athens - Capital of Greece
</pre>

<div>
  <table id="tblCapitalCities" data-geo-binding="citiesLayer" >
    <thead>
      <tr>
        <th>Capital Name</th>
      </tr>
    </thead>
    <tbody data-bind="foreach: features">
        <tr style="cursor:pointer;" data-bind="click: $data.openPopup">
          <td data-bind="text: $data.properties['prop-2']"></td>
        </tr>
    </tbody>
  </table>
</div>

Packaging Map Tiles for your HTML!

Taking your maps offline or using tiled web maps with poor network connections has been a problem with Web Mapping that has been solved in the past by using plugins and extensions to the browser. GEO5 takes a different approach.

By building upon tried and tested techniques and using commonplace technical approaches, GEO5 achieves the ability to package Map Tiles as a cache by utilising JSON.

The JSONTileCache format encodes tiles for maps as JSON arrays of objects containing the Base64 "data:url" content for the tiles. Tiles are indexed by their Z,X,Y tile coordinates, resulting in a simple flat Javascript/JSON object that can be used as a tile source for webmaps. The simplicity of this approach means that the cache of map tiles can be saved as a text-based representation that can be included inline or linked to from your HTML map applications.

Although it could be optimized through the use of compression (Gzip at the server) the JSONTileCache format represents a simple way for you to include pre-packaged tile caches within your application.

Geo5 provides the ability to create and save JSONTileCache files, a tile builder example can be found below. In order to cache your own tiles or to cache tiles from a service that does not support CORS , you may need to run the TileBuilder page from your own servers and/or access the tiled content through a server proxy. Once your tiles are saved as a JSONTileCache, no server interaction is needed to access the tiles you have cached, they can be embedded in or linked to Directly from your web pages.

Click here to create and download your own JSONTileCache to include in your applications.

Using JSONTileCache caches

Once you have packaged your JSONTileCache, you can use it easily with your GEO5 map applications by including the data-geo-type="json-tilecache" attribute on the HTML element of your cached layer and specifying the JSONTileCache file as the href, src or as the content of the element as appropriate.

For example, the below HTML defines a GEO5 JSONTileCache based layer utilising the example 8MB cache file.

<a data-geo-type="json-tilecache" 
    href="./data/EsriCanberra.json" 
    data-geo-layer-src='http://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png' 
    data-geo-map="map"
    id="jsCache">
    intiial tilecache
</a>

Click here to view an example of JSONTileCache being used within a web map.

Browse, Disconnect, Refresh - and STILL have maps!

Whilst the ability to package map tiles and other geo resources with your HTML maps is exciting, disconnected environments can still mean you can't use your maps offline. GEO5 uses the latest functionality of HTML5 Offline manifests to allow you to choose content that will persist even when the browser is completely offline!

HTML5 allows you to define a appcache.manifest file which specifies content which should be downloaded and cached for offline use. When the browser attempts to access a site using this feature, if the browser is disconnected, the locally cached content still remains available and is served to the user.

The appcache.manifest file is specified on the HTML element of your page:

<html manifest="./offline.manifest">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Taking HTML5 Maps OFFLINE with Geo5.org</title>
    .......

The previous example for JSONTileCache usage can be extended with an application manifest similar to the following:

CACHE MANIFEST

FALLBACK:
./TrueOffline.html /

NETWORK:
*

CACHE:
./TrueOffline.html
./data/Canberra.json
./js/geo5.js

By specifying the actual HTML page itself, the GEO5 javascript library and any of your JSONTIleCache or other geo content in a manifest file like this, you can browse, disconnect, refresh and STILL have maps!

Load the following example in your Browser or SmartPhone/Tablet device, wait for the map to appear then feel free to disconnect from the Intertubez and still enjoy the power of web mapping ....

Click here to view an example of JSONTileCache with a HTML5 manifest.* warning 8MB of tiles to download, please be patient!

No map needed!

Embedding geographic information in your page follows the same easy pattern as all other GEO5 functionality - include an attribute on your existing HTML.

GEO5 allows you to easily enrich your existing HTML with geographic information without the need for a visual map. In this way, your existing content can be made searchable through Spatial means.

GEO5 can enhance the experience of your users with the geographic information you include by providing popup maps, navigation instructions and a wide variety of other tools simply through the inclusion of geo attributes on your HTML.

Interactivity without coding and escape "Widget Hell"

...... coming soon