type property: "map".
A step by step tutorial for this example can be found at dev.opera.
Using theme "city" with skin "rubber", as defined in config file.
The property contains can get a node reference or a function. In this case, mapMaker is a prototype helper method that initializes the map as described in the Polymaps API. This mapping application can be easily extended with mapping tools through the tools property of the window object during its instantiation or through the addTools() prototype method at a later stage. The ruler tool for measuring distance and the map navigation help tool are implemented by default in a window of type "map". (Skipping some repetitive portions of the menu's code).
var bingWin = new pergola.Window("Bing Maps");
bingWin.build({
isFull : true,
type : "map",
mapWidth : 2048,
mapHeight : 1536,
fill : "#010413",
menu : {
views : {
title : "Views",
items : {
aerial : {
string : "Aerial",
check : false,
exclusive : true,
view : "aerial",
fn : tileSource
},
aerialLabels : {
string : "Aerial With Labels",
check : true,
exclusive : true,
view : "aerialWithLabels",
fn : tileSource
},
road : {
string : "Road",
check : false,
exclusive : true,
view : "road",
fn : tileSource
}
}
},
layers : {
title : "Layers",
items : {
lukanga : {
string : "Lukanga Swamp Rally",
check : false,
target : function () {
return {
layer : bingWin.layers.lukangaRally,
center : {lat : -14.46, lon : 27.3125},
zoom : 11,
view : "aerialWithLabels"
}
},
fn : 'toggleLayer'
},
polygons : {
string : "Polygons",
check : false,
target : function () {
return {
layer : bingWin.layers.polygons,
center : {lat : 37.7590, lon : -122.4191},
zoom : 14,
view : "road"
}
},
fn : 'toggleLayer'
},
bananas : {
string : "Top 10 banana producing nations",
check : false,
target : function () {
return {
layer : bingWin.layers.bananas,
center : {lat : 10, lon : 100},
zoom : 4,
view : "aerial"
}
},
fn : 'toggleLayer',
separator : new pergola.Separator()
},
copyright : {
string : "Copyright",
check : true,
target : function () {return bingWin.childDoc.copyright;},
fn : function () { // user function (see documentation for possible formats)
if (!this.target()) return;
var l = bingWin.layers.copyright;
l.display = l.display == "block" ? "none" : "block";
this.target().setAttributeNS(null, "display", l.display);
}
}
}
},
go_places : {
title : "Go Places",
items : {
paris : {
string : "Paris",
fn : function () {var c = pergola.Window.currentMap; c.map.center({lat : 48.8553, lon : 2.3456}); c.mapZoom(16);}
},
...,
svgOpen2011 : {
string : "SVG Open 2011",
target : function () {
return {
layer : bingWin.layers.svgOpen2011,
center : {lat : 42.36131, lon : -71.08124},
zoom : 17,
view : "road"
};
},
fn : 'toggleLayer'
}
}
},
zoomLevel : {
title : "Levels",
hasZoomLevels : true,
items : {
z1 : {string : "1", check : false, exclusive : true, fn : function () {pergola.Window.currentMap.mapZoom(1);}},
...,
z21 : {string : "21", check : false, exclusive : true, fn : function () {pergola.Window.currentMap.mapZoom(21);}}
}
},
grid : {
title : "Grid",
items : {
grid : {
string : "Grid",
check : false,
fn : function () {
var map = bingWin.map,
l = bingWin.layers.grid;
l.display = l.display == "block" ? "none" : "block";
if (!map.grid) {
map.add(polymaps.grid());
map.center(map.center());
}
map.grid.setAttributeNS(null, "display", l.display);
}
}
}
},
unit : {
title : "Unit",
items : {
km : {
string : "Kilometres",
check : true,
exclusive : true,
fn : function () {bingWin.map.unit = "Km";}
},
mi : {
string : "Miles",
check : false,
exclusive : true,
fn : function () {bingWin.map.unit = "mi";}
},
nmi : {
string : "Nautical Miles",
check : false,
exclusive : true,
fn : function () {bingWin.map.unit = "nmi";}
}
}
}
},
views : {
Aerial : {},
AerialWithLabels : {},
Road : {}
},
layers : {
copyright : {
feature : false,
display : "block"
},
bananas : {
feature : true,
display : "none"
},
polygons : {
feature : true,
display : "none"
},
lukangaRally : {
feature : true,
display : "none"
},
svgOpen2011 : {
feature : true,
display : "none"
},
grid : {
feature : false,
display : "none"
}
},
contains : function () {return this.mapMaker()}
});