Interactive maps using HTML5 data tags, no coding!
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.
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
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>
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:
<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:
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.
<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>
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 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>
Open Geospatial Consortium (OGC) Web Mapping Service (WMS) layers are supported through the familiar attribute-based syntax within GEO5
<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>
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.
<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>
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:
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.
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.
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>
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>
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.
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>
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.
<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>
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.
<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>
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 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"
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>
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>
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.
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"
}
}
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
}
}
]
}
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"
})
}
}
]
}
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.
LOOK MA', NO JAVASCRIPT! The following display was created without the need for any coding experience or Javascript code:
.. 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>
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>
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.
| 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>
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.
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.
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 ....
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.
...... coming soon