[mapguide-commits] r7792 - in trunk/MgDev/Doc/samples/ol2samples: assets tiled untiled
svn_mapguide at osgeo.org
svn_mapguide at osgeo.org
Wed Aug 21 07:00:54 PDT 2013
Author: jng
Date: 2013-08-21 07:00:54 -0700 (Wed, 21 Aug 2013)
New Revision: 7792
Added:
trunk/MgDev/Doc/samples/ol2samples/assets/legend.js
Modified:
trunk/MgDev/Doc/samples/ol2samples/tiled/index.html
trunk/MgDev/Doc/samples/ol2samples/untiled/index.html
Log:
#2344:
- Update css of tiled sample.
- Refactor out the legend functionality into its own js file.
Added: trunk/MgDev/Doc/samples/ol2samples/assets/legend.js
===================================================================
--- trunk/MgDev/Doc/samples/ol2samples/assets/legend.js (rev 0)
+++ trunk/MgDev/Doc/samples/ol2samples/assets/legend.js 2013-08-21 14:00:54 UTC (rev 7792)
@@ -0,0 +1,191 @@
+//A simple legend to toggle MapGuide Layer visbility for a OpenLayers.Layer.MapGuide instance
+//
+//NOTE: Only tested with the Sheboygan dataset. Probably doesn't handle all corner cases that can be possible with a MapGuide Map Definition
+
+//Requires: OpenLayers, jQuery
+
+function Legend(options)
+{
+ var rtMapInfo = options.runtimeMap;
+ var legendSelector = options.legendSelector;
+ this.map = options.map;
+ this.mgLayer = options.mgLayerOL;
+ this.debug = false;
+
+ this.stdIconRoot = options.stdIconRoot || "../../stdicons";
+ this.rootEl = $(legendSelector);
+
+ var _self = this;
+
+ this.map.events.register("zoomend", this, OpenLayers.Function.bind(this.update, this));
+
+ var groupElMap = {};
+ if (rtMapInfo.RuntimeMap.Group) {
+ var remainingGroups = {};
+ //1st pass, un-parented groups
+ for (var i = 0; i < rtMapInfo.RuntimeMap.Group.length; i++) {
+ var group = rtMapInfo.RuntimeMap.Group[i];
+ if (group.ParentId) {
+ remainingGroups[group.ObjectId[0]] = group;
+ continue;
+ }
+ var el = this.createGroupElement(group);
+ groupElMap[group.ObjectId[0]] = el;
+ this.rootEl.append(el);
+ }
+ //2nd pass, parented groups
+ var itemCount = 0;
+ for (var objId in remainingGroups) {
+ itemCount++;
+ }
+ //Whittle down
+ while(itemCount > 0) {
+ var removeIds = [];
+ for (var objId in remainingGroups) {
+ var group = remainingGroups[objId];
+ //Do we have a parent?
+ if (typeof(groupElMap[group.ParentId[0]]) != 'undefined') {
+ var el = this.createGroupElement(group);
+ groupElMap[group.ParentId[0]].find("ul.groupChildren").append(el);
+ removeIds.push(group.ObjectId[0]);
+ }
+ }
+ for (var i = 0; i < removeIds.length; i++) {
+ delete remainingGroups[removeIds[i]];
+ }
+
+ itemCount = 0;
+ for (var objId in remainingGroups) {
+ itemCount++;
+ }
+ }
+ }
+ if (rtMapInfo.RuntimeMap.Layer) {
+ for (var i = 0; i < rtMapInfo.RuntimeMap.Layer.length; i++) {
+ var layer = rtMapInfo.RuntimeMap.Layer[i];
+ var els = this.createLayerElements(layer);
+ for (var j = 0; j < els.length; j++) {
+ if (layer.ParentId) {
+ groupElMap[layer.ParentId[0]].find("ul.groupChildren").append(els[j]);
+ } else {
+ this.rootEl.append(els[j]);
+ }
+ }
+ }
+ }
+
+ $("input.group-checkbox", this.rootEl).change(function() {
+ var bShow = $(this).is(":checked");
+ var objId = $(this).val();
+ _self.showGroup(objId, bShow);
+ });
+
+ $("input.layer-checkbox", this.rootEl).change(function() {
+ var bShow = $(this).is(":checked");
+ var objId = $(this).val();
+ _self.showLayer(objId, bShow);
+ });
+
+ this.req = {
+ showgroups: null,
+ showlayers: null,
+ hidegroups: null,
+ hidelayers: null
+ };
+}
+
+Legend.prototype.resetRequest = function() {
+ this.req.showgroups = null;
+ this.req.showlayers = null;
+ this.req.hidegroups = null;
+ this.req.hidelayers = null;
+};
+
+Legend.prototype.showGroup = function(groupId, bShow) {
+ this.resetRequest();
+ if (bShow)
+ this.req.showgroups = groupId;
+ else
+ this.req.hidegroups = groupId;
+ this.mgLayer.mergeNewParams(this.req);
+};
+
+Legend.prototype.showLayer = function(layerId, bShow) {
+ this.resetRequest();
+ if (bShow)
+ this.req.showlayers = layerId;
+ else
+ this.req.hidelayers = layerId;
+ this.mgLayer.mergeNewParams(this.req);
+};
+
+Legend.prototype.update = function() {
+ var scale = this.map.getScale();
+ var nodes = $("li.layer-node");
+ nodes.each(function(i, e) {
+ var el = $(e);
+ var min = el.attr("data-layer-min-scale");
+ var max = el.attr("data-layer-max-scale");
+ if (scale >= min && scale < max) {
+ if (el.is(":hidden"))
+ el.show();
+ } else {
+ if (el.is(":visible"))
+ el.hide();
+ }
+ });
+};
+
+Legend.prototype.createGroupElement = function(group) {
+ return $("<li><input type='checkbox' class='group-checkbox' value='" + group.ObjectId[0] + "' " + ((group.Visible[0] == "true") ? "checked='checked'" : "") + " /><img src='" + this.stdIconRoot + "/lc_group.gif' /> " + group.LegendLabel[0] + "<ul class='groupChildren'></ul></li>");
+};
+
+Legend.prototype.getIconUri = function(iconBase64) {
+ return "data:" + gMimeType + ";base64," + iconBase64;
+};
+
+Legend.prototype.createLayerElements = function(layer) {
+ var icon = "legend-layer.png";
+ var label = layer.LegendLabel ? layer.LegendLabel[0] : "";
+ var text = label;
+ var childHtml = "";
+ //This is using the first scale range and the first geometry type. To do this proper you'd find the matching scale range
+ //based on the current map's view scale. Then dynamically, toggle item visibility when the map scale
+ //changes
+ var els = [];
+ if (layer.ScaleRange) {
+ for (var i = 0; i < layer.ScaleRange.length; i++) {
+ var scaleRange = layer.ScaleRange[i];
+ if (scaleRange.FeatureStyle) {
+ if (this.debug)
+ text = label + " (" + scaleRange.MinScale[0] + " - " + scaleRange.MaxScale[0] + ")";
+ var fts = scaleRange.FeatureStyle[0];
+ var ruleCount = fts.Rule.length;
+ if (ruleCount > 1) {
+ icon = this.stdIconRoot + "/lc_theme.gif";
+ childHtml = "<ul>";
+ //Test compression
+ var bCompressed = false;
+ if (ruleCount > 3) {
+ bCompressed = !(fts.Rule[1].Icon);
+ }
+ if (bCompressed) {
+ childHtml += "<li><img src='" + this.getIconUri(fts.Rule[0].Icon[0]) + "' /> " + (fts.Rule[0].LegendLabel ? fts.Rule[0].LegendLabel[0] : "") + "</li>";
+ childHtml += "<li>... (" + (ruleCount - 2) + " other theme rules)</li>";
+ childHtml += "<li><img src='" + this.getIconUri(fts.Rule[ruleCount-1].Icon[0]) + "' /> " + (fts.Rule[ruleCount-1].LegendLabel ? fts.Rule[ruleCount-1].LegendLabel[0] : "") + "</li>";
+ } else {
+ for (var i = 0; i < ruleCount; i++) {
+ var rule = fts.Rule[i];
+ childHtml += "<li><img src='" + this.getIconUri(rule.Icon[0]) + "' /> " + (rule.LegendLabel ? rule.LegendLabel[0] : "") + "</li>";
+ }
+ }
+ childHtml += "</ul>";
+ } else {
+ icon = this.getIconUri(fts.Rule[0].Icon[0]);
+ }
+ els.push($("<li class='layer-node' data-layer-min-scale='" + scaleRange.MinScale[0] + "' data-layer-max-scale='" + scaleRange.MaxScale[0] + "'><input type='checkbox' class='layer-checkbox' value='" + layer.ObjectId[0] + "' " + ((layer.Visible[0] == "true") ? "checked='checked'" : "") + " /><img src='" + icon + "' /> " + text + childHtml + "</li>"));
+ }
+ }
+ }
+ return els;
+};
\ No newline at end of file
Modified: trunk/MgDev/Doc/samples/ol2samples/tiled/index.html
===================================================================
--- trunk/MgDev/Doc/samples/ol2samples/tiled/index.html 2013-08-21 12:56:20 UTC (rev 7791)
+++ trunk/MgDev/Doc/samples/ol2samples/tiled/index.html 2013-08-21 14:00:54 UTC (rev 7792)
@@ -1,20 +1,26 @@
<html>
<head>
- <title>CreateRuntimeMap Example</title>
- <link rel="stylesheet" href="http://openlayers.org/api/2.13-rc3/theme/default/style.css" />
+ <title>Basic Sheboygan tiled map example</title>
+ <link rel="stylesheet" href="../assets/theme/default/style.css" />
<style type="text/css">
+ body { font-family: Verdana; font-size: 0.9em; }
#error { color: red; }
#wrap { width: 900; }
#map { width: 650; height: 500; float: right; }
#layers { width: 250; height: 500; overflow: auto; display: block-inline; float: left; }
#rootList { list-style-type: none; margin-left: -20px; }
#rootList li { list-style-type: none; }
+ .olControlMousePosition { background: #ffff66; font-size: 0.6em !important; padding: 2px; }
+
+ #layers { background: #6699FF; color: white; }
+ #layers .baseLayersDiv { font-size: 0.7em; }
</style>
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
- <script type="text/javascript" src="http://openlayers.org/api/2.13-rc3/OpenLayers.js"></script>
+ <script type="text/javascript" src="../assets/jquery-1.10.2.min.js"></script>
+ <script type="text/javascript" src="../assets/OpenLayers.js"></script>
<script type="text/javascript">
- var mapAgentUrl = "../mapagent/mapagent.fcgi";
+ //This sample is assumed to be hosted at http://servername/mapguide/ol2samples/tiled/index.html
+ var mapAgentUrl = "../../mapagent/mapagent.fcgi";
//Various features you can include in the CREATERUNTIMEMAP response.
var REQ_NONE = 0; //Nothing. This the default.
Modified: trunk/MgDev/Doc/samples/ol2samples/untiled/index.html
===================================================================
--- trunk/MgDev/Doc/samples/ol2samples/untiled/index.html 2013-08-21 12:56:20 UTC (rev 7791)
+++ trunk/MgDev/Doc/samples/ol2samples/untiled/index.html 2013-08-21 14:00:54 UTC (rev 7792)
@@ -1,20 +1,24 @@
<html>
<head>
- <title>CreateRuntimeMap Example</title>
+ <title>Basic Sheboygan un-tiled map example with basic legend</title>
<link rel="stylesheet" href="../assets/theme/default/style.css" />
<style type="text/css">
+ body { font-family: Verdana; font-size: 0.9em; }
#error { color: red; }
#wrap { width: 900; }
#map { width: 650; height: 500; float: right; }
#details { width: 250; height: 500; overflow: auto; display: block-inline; float: left; }
#rootList { list-style-type: none; margin-left: -20px; }
#rootList li { list-style-type: none; }
+ .olControlMousePosition { background: #ffff66; font-size: 0.6em !important; padding: 2px; }
</style>
<script type="text/javascript" src="../assets/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../assets/OpenLayers.js"></script>
+ <script type="text/javascript" src="../assets/legend.js"></script>
<script type="text/javascript">
- var mapAgentUrl = "../mapagent/mapagent.fcgi";
+ //This sample is assumed to be hosted at http://servername/mapguide/ol2samples/untiled/index.html
+ var mapAgentUrl = "../../mapagent/mapagent.fcgi";
//Various features you can include in the CREATERUNTIMEMAP response.
var REQ_NONE = 0; //Nothing. This the default.
@@ -152,75 +156,19 @@
mgLayer = new OpenLayers.Layer.MapGuide( "MapGuide (from CREATERUNTIMEMAP)", mapAgentUrl, params, options );
map.addLayer(mgLayer);
map.zoomToMaxExtent();
- var groupElMap = {};
- if (rtMapInfo.RuntimeMap.Group) {
- var remainingGroups = {};
- $("#noLayerStructure").hide();
- //1st pass, un-parented groups
- for (var i = 0; i < rtMapInfo.RuntimeMap.Group.length; i++) {
- var group = rtMapInfo.RuntimeMap.Group[i];
- if (group.ParentId) {
- remainingGroups[group.ObjectId[0]] = group;
- continue;
- }
- var el = createGroupElement(group);
- groupElMap[group.ObjectId[0]] = el;
- $("#rootList").append(el);
- }
- //2nd pass, parented groups
- var itemCount = 0;
- for (var objId in remainingGroups) {
- itemCount++;
- }
- //Whittle down
- while(itemCount > 0) {
- var removeIds = [];
- for (var objId in remainingGroups) {
- var group = remainingGroups[objId];
- //Do we have a parent?
- if (typeof(groupElMap[group.ParentId[0]]) != 'undefined') {
- var el = createGroupElement(group);
- groupElMap[group.ParentId[0]].find("ul.groupChildren").append(el);
- removeIds.push(group.ObjectId[0]);
- }
- }
- for (var i = 0; i < removeIds.length; i++) {
- delete remainingGroups[removeIds[i]];
- }
-
- itemCount = 0;
- for (var objId in remainingGroups) {
- itemCount++;
- }
- }
- }
- if (rtMapInfo.RuntimeMap.Layer) {
- $("#noLayerStructure").hide();
- for (var i = 0; i < rtMapInfo.RuntimeMap.Layer.length; i++) {
- var layer = rtMapInfo.RuntimeMap.Layer[i];
- var el = createLayerElement(layer);
- if (layer.ParentId) {
- groupElMap[layer.ParentId[0]].find("ul.groupChildren").append(el);
- } else {
- $("#rootList").append(el);
- }
- }
- }
- $("#mapName").html("MapGuide mapname: " + rtMapInfo.RuntimeMap.Name[0]);
- $("#mgSession").html("MapGuide session ID: " + sessionId);
- $("div.olMap").css("background-color", "#" + rtMapInfo.RuntimeMap.BackgroundColor[0].substring(2));
- $("input.group-checkbox").change(function() {
- var bShow = $(this).is(":checked");
- var objId = $(this).val();
- showGroup(objId, bShow);
- });
- $("input.layer-checkbox").change(function() {
- var bShow = $(this).is(":checked");
- var objId = $(this).val();
- showLayer(objId, bShow);
+ var legend = new Legend({
+ legendSelector: "#rootList",
+ stdIconRoot: "../../stdicons",
+ runtimeMap: rtMapInfo,
+ map: map,
+ mgLayerOL: mgLayer
});
+ legend.update();
+ $("#mapName").html("MapGuide mapname: " + rtMapInfo.RuntimeMap.Name[0]);
+ $("#mgSession").html("MapGuide session ID: " + sessionId);
+ $("div.olMap").css("background-color", "#" + rtMapInfo.RuntimeMap.BackgroundColor[0].substring(2));
startKeepAlive();
}
@@ -238,84 +186,6 @@
keepAlive();
}
- var req = {
- showgroups: null,
- showlayers: null,
- hidegroups: null,
- hidelayers: null
- };
-
- function resetRequest() {
- req.showgroups = null;
- req.showlayers = null;
- req.hidegroups = null;
- req.hidelayers = null;
- }
-
- function showGroup(groupId, bShow) {
- resetRequest();
- if (bShow)
- req.showgroups = groupId;
- else
- req.hidegroups = groupId;
- mgLayer.mergeNewParams(req);
- }
-
- function showLayer(layerId, bShow) {
- resetRequest();
- if (bShow)
- req.showlayers = layerId;
- else
- req.hidelayers = layerId;
- mgLayer.mergeNewParams(req);
- }
-
- function createGroupElement(group) {
- return $("<li><input type='checkbox' class='group-checkbox' value='" + group.ObjectId[0] + "' " + ((group.Visible[0] == "true") ? "checked='checked'" : "") + " /><img src='../stdicons/lc_group.gif' /> " + group.LegendLabel[0] + "<ul class='groupChildren'></ul></li>");
- }
-
- function getIconUri(iconBase64) {
- return "data:" + gMimeType + ";base64," + iconBase64;
- }
-
- function createLayerElement(layer) {
- var icon = "legend-layer.png";
- var text = layer.LegendLabel ? layer.LegendLabel[0] : "";
- var childHtml = "";
- //This is using the first scale range and the first geometry type. To do this proper you'd find the matching scale range
- //based on the current map's view scale. Then dynamically, toggle item visibility when the map scale
- //changes
- if (layer.ScaleRange) {
- if (layer.ScaleRange[0].FeatureStyle) {
- var fts = layer.ScaleRange[0].FeatureStyle[0];
- var ruleCount = fts.Rule.length;
- if (ruleCount > 1) {
- icon = "../stdicons/lc_theme.gif";
- childHtml = "<ul>";
- //Test compression
- var bCompressed = false;
- if (ruleCount > 3) {
- bCompressed = !(fts.Rule[1].Icon);
- }
- if (bCompressed) {
- childHtml += "<li><img src='" + getIconUri(fts.Rule[0].Icon[0]) + "' /> " + (fts.Rule[0].LegendLabel ? fts.Rule[0].LegendLabel[0] : "") + "</li>";
- childHtml += "<li>... (" + (ruleCount - 2) + " other theme rules)</li>";
- childHtml += "<li><img src='" + getIconUri(fts.Rule[ruleCount-1].Icon[0]) + "' /> " + (fts.Rule[ruleCount-1].LegendLabel ? fts.Rule[ruleCount-1].LegendLabel[0] : "") + "</li>";
- } else {
- for (var i = 0; i < ruleCount; i++) {
- var rule = fts.Rule[i];
- childHtml += "<li><img src='" + getIconUri(rule.Icon[0]) + "' /> " + (rule.LegendLabel ? rule.LegendLabel[0] : "") + "</li>";
- }
- }
- childHtml += "</ul>";
- } else {
- icon = getIconUri(fts.Rule[0].Icon[0]);
- }
- }
- }
- return $("<li><input type='checkbox' class='layer-checkbox' value='" + layer.ObjectId[0] + "' " + ((layer.Visible[0] == "true") ? "checked='checked'" : "") + " /><img src='" + icon + "' /> " + text + childHtml + "</li>");
- }
-
</script>
</head>
<body>
@@ -327,7 +197,6 @@
<div id="wrap">
<div id="details">
<strong>Layer and Groups</strong>
- <span id="noLayerStructure">No layer/group structure found. Probably because no additional features were specified in the CREATERUNTIMEMAP request</span>
<ul id="rootList">
</ul>
</div>
More information about the mapguide-commits
mailing list