maptree.html

﻿<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<link rel="stylesheet" href="../dijit/themes/claro/claro.css"/>

<!--
Supported mapping engines (replace the value for the djeoEngine parameter):

Leaflet - djeoEngine: 'leaflet'

Google Maps API - djeoEngine: 'gmaps'

Google Earth API - djeoEngine: 'ge'

ArcGIS API for JavaScript - djeoEngine: 'esri'

Yandex Maps API - djeoEngine: 'ymaps'
-->
<script src="../dojo/dojo.js" data-dojo-config="
	djeoEngine: 'leaflet'
"></script>

<script>
var features = [
	{
		name: "Top container",
		style: {
			fill: "lime",
			fillOpacity: 0.6,
			stroke: "green",
			strokeWidth: 3
		},
		features: [
			{
				name: "Bermuda triangle",
				type: "Polygon",
				coords: [ [ [-64.89,32.24], [-80.15,25.7], [-66.07,18.46], [-64.89,32.24] ] ],
				style: {
					strokeWidth: 1
				}
			},
			{
				name: "The container for the railway and the point feature",
				features: [
					{
						name: "Paris-London railway",
						type: "LineString",
						coords: [ [2.36,48.88], [3.08,50.64], [1.81,50.90], [0.87,51.14], [-0.13,51.53] ],
						style: {
							strokeWidth: 5
						}
					},
					{
						name: "Hello world!",
						type: "Point",
						coords: [-30, 30],
						style: {
							size: [49, 60],
							img: "http://vvoovv.github.com/ship.png"
						}
					}
				]
			}
		]
	}
];

require([
	"djeo/Map",
	"djeo/control/Navigation",
	"djeo/control/Highlight",
	"djeo/control/Tooltip",
	"dojo/domReady!"
],
function(Map, Navigation, Highlight, Tooltip){
	var map = new Map("map", {
		features: features,
		layers: "roadmap"
		//layers: "webtiles:http://[a,b,c].tile.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/1/256"
	});
	map.ready(function(){
		new Navigation(map);
		new Highlight(map);
		new Tooltip(map);
	});
});
</script>

</head>

<body class="claro">

<div id="map" style="width:800px;height:400px;"></div>

</body>
</html>