[mapguide-commits] r9544 - in sandbox/jng/tiling_v3/Doc/samples/ol2samples: . assets hybrid
svn_mapguide at osgeo.org
svn_mapguide at osgeo.org
Wed Jun 12 06:24:10 PDT 2019
Author: jng
Date: 2019-06-12 06:24:10 -0700 (Wed, 12 Jun 2019)
New Revision: 9544
Added:
sandbox/jng/tiling_v3/Doc/samples/ol2samples/assets/legend_ol.js
sandbox/jng/tiling_v3/Doc/samples/ol2samples/hybrid/
sandbox/jng/tiling_v3/Doc/samples/ol2samples/hybrid/index.html
Log:
Add first cut of "hybrid" sample that demonstrates the various ways OpenLayers can consume a v4.0.0 RuntimeMap model. The tiling is busted atm but that is a case of porting the relevant code over from the mapguide-rest sample applications where usage of ol3+ is more prominent.
Added: sandbox/jng/tiling_v3/Doc/samples/ol2samples/assets/legend_ol.js
===================================================================
--- sandbox/jng/tiling_v3/Doc/samples/ol2samples/assets/legend_ol.js (rev 0)
+++ sandbox/jng/tiling_v3/Doc/samples/ol2samples/assets/legend_ol.js 2019-06-12 13:24:10 UTC (rev 9544)
@@ -0,0 +1,241 @@
+//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
+//NOTE: This uses the "clean" mapguide-rest JSON APIs which does not blindly array-ify every JSON property
+//Requires: OpenLayers, jQuery
+
+function Legend(options)
+{
+ var legendSelector = options.legendSelector;
+ this.map = options.map;
+ this.mgLayer = options.mgLayerOL;
+ this.mgTiledLayers = options.mgTiledLayers || {};
+ this.debug = false;
+
+ var rtMapInfo = options.runtimeMap;
+ this.dpi = rtMapInfo.RuntimeMap.DisplayDpi;
+ this.inPerUnit = rtMapInfo.RuntimeMap.CoordinateSystem.MetersPerUnit * 39.37;
+
+ this.iconMimeType = rtMapInfo.RuntimeMap.IconMimeType;
+
+ this.stdIconRoot = options.stdIconRoot || "../../stdicons";
+ this.rootEl = $(legendSelector);
+
+ var _self = this;
+
+ this.map.getView().on("change:resolution", this.update, this);
+
+ this.updateLayersAndGroups(rtMapInfo);
+
+ //$("input.group-checkbox", this.rootEl).change(function() {
+ this.rootEl.on("change", "input.group-checkbox", function() {
+ var el = $(this);
+ var bShow = el.is(":checked");
+ if (el.attr("data-is-tiled") == "true") {
+ var name = el.attr("data-group-name");
+ if (typeof(_self.mgTiledLayers[name]) != 'undefined') {
+ _self.mgTiledLayers[name].setVisible(bShow);
+ }
+ } else {
+ var objId = el.val();
+ _self.showGroup(objId, bShow);
+ }
+ });
+
+ //$("input.layer-checkbox", this.rootEl).change(function() {
+ this.rootEl.on("change", "input.layer-checkbox", function() {
+ var el = $(this);
+ var bShow = el.is(":checked");
+ var objId = el.val();
+ _self.showLayer(objId, bShow);
+ });
+
+ this.req = {
+ showgroups: null,
+ showlayers: null,
+ hidegroups: null,
+ hidelayers: null
+ };
+}
+
+Legend.prototype.updateLayersAndGroups = function(rtMapInfo) {
+ this.mapInfo = rtMapInfo;
+ var groupElMap = {};
+ this.rootEl.empty();
+ 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] = group;
+ continue;
+ }
+ var el = this.createGroupElement(group);
+ groupElMap[group.ObjectId] = 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]) != 'undefined') {
+ var el = this.createGroupElement(group);
+ groupElMap[group.ObjectId] = el;
+ groupElMap[group.ParentId].find("ul.groupChildren").append(el);
+ removeIds.push(group.ObjectId);
+ }
+ }
+ 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].find("ul.groupChildren").append(els[j]);
+ } else {
+ this.rootEl.append(els[j]);
+ }
+ }
+ }
+ }
+};
+
+Legend.prototype.resetRequest = function() {
+ this.req.showgroups = null;
+ this.req.showlayers = null;
+ this.req.hidegroups = null;
+ this.req.hidelayers = null;
+};
+
+Legend.prototype.refreshLayer = function() {
+ this.mgLayer.getSource().updateParams({ seq: (new Date()).getTime() });
+};
+
+Legend.prototype.updateMgLayer_ = function() {
+ //this.mgLayer.mergeNewParams(this.req);
+ this.mgLayer.getSource().updateParams(this.req);
+};
+
+Legend.prototype.showGroup = function(groupId, bShow) {
+ this.resetRequest();
+ if (bShow)
+ this.req.showgroups = groupId;
+ else
+ this.req.hidegroups = groupId;
+ this.updateMgLayer_();
+};
+
+Legend.prototype.showLayer = function(layerId, bShow) {
+ this.resetRequest();
+ if (bShow)
+ this.req.showlayers = layerId;
+ else
+ this.req.hidelayers = layerId;
+ this.updateMgLayer_();
+};
+
+Legend.prototype.getScale = function() {
+ return this.map.getView().getResolution() * this.dpi * this.inPerUnit;
+};
+
+Legend.prototype.update = function() {
+ var scale = this.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) || (scale >= min && max==="infinity")) {
+ 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' data-is-tiled='" + (group.Type == 2 || group.Type == 3) + "' data-group-name='" + group.Name + "' value='" + group.ObjectId + "' " + ((group.Visible) ? "checked='checked'" : "") + " /><img src='" + this.stdIconRoot + "/lc_group.gif' /> " + group.LegendLabel + "<ul class='groupChildren'></ul></li>");
+};
+
+Legend.prototype.getIconUri = function(iconBase64) {
+ return "data:" + this.iconMimeType + ";base64," + iconBase64;
+};
+
+Legend.prototype.createLayerElements = function(layer) {
+ var icon = "legend-layer.png";
+ var label = layer.LegendLabel ? layer.LegendLabel : "";
+ 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 + " - " + scaleRange.MaxScale + ")";
+ 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.Icon) + "' /> " + (fts.Rule.LegendLabel ? fts.Rule.LegendLabel : "") + "</li>";
+ childHtml += "<li>... (" + (ruleCount - 2) + " other theme rules)</li>";
+ childHtml += "<li><img src='" + this.getIconUri(fts.Rule[ruleCount-1].Icon) + "' /> " + (fts.Rule[ruleCount-1].LegendLabel ? fts.Rule[ruleCount-1].LegendLabel : "") + "</li>";
+ } else {
+ for (var i = 0; i < ruleCount; i++) {
+ var rule = fts.Rule[i];
+ childHtml += "<li><img src='" + this.getIconUri(rule.Icon) + "' /> " + (rule.LegendLabel ? rule.LegendLabel : "") + "</li>";
+ }
+ }
+ childHtml += "</ul>";
+ } else {
+ icon = this.getIconUri(fts.Rule[0].Icon);
+ }
+ var chkBoxHtml = "";
+ if (layer.Type == 1) //Dynamic
+ chkBoxHtml = "<input type='checkbox' class='layer-checkbox' value='" + layer.ObjectId + "' " + ((layer.Visible == true) ? "checked='checked'" : "") + " />";
+ els.push($("<li class='layer-node' data-layer-name='" + layer.Name + "' data-layer-selectable='" + layer.Selectable + "' data-layer-min-scale='" + scaleRange.MinScale + "' data-layer-max-scale='" + scaleRange.MaxScale + "'>" + chkBoxHtml + "<img src='" + icon + "' /> " + text + childHtml + "</li>"));
+ }
+ }
+ }
+ return els;
+};
+
+Legend.prototype.getSelectedLayerNames = function() {
+ var names = [];
+ $("li.layer-node:visible").each(function(i, e) {
+ var el = $(e);
+ if (el.data("layer-selectable") == true)
+ names.push(el.data("layer-name"));
+ });
+ return names;
+};
\ No newline at end of file
Added: sandbox/jng/tiling_v3/Doc/samples/ol2samples/hybrid/index.html
===================================================================
--- sandbox/jng/tiling_v3/Doc/samples/ol2samples/hybrid/index.html (rev 0)
+++ sandbox/jng/tiling_v3/Doc/samples/ol2samples/hybrid/index.html 2019-06-12 13:24:10 UTC (rev 9544)
@@ -0,0 +1,403 @@
+<html>
+
+<head>
+ <title>Load any map example</title>
+ <link rel="stylesheet" href="../assets/ol.css" />
+ <style type="text/css">
+ #error {
+ color: red;
+ }
+
+ #wrap {
+ width: 900;
+ }
+
+ #wrap .map {
+ width: 650;
+ height: 500;
+ float: right;
+ }
+
+ #wrap .layers {
+ width: 250;
+ height: 500;
+ overflow: auto;
+ display: block-inline;
+ float: left;
+ }
+
+ #wrap .rootList {
+ list-style-type: none;
+ margin-left: -20px;
+ }
+
+ #wrap .rootList li {
+ list-style-type: none;
+ }
+
+ #main {
+ margin-top: 50px;
+ padding-top: 20px;
+ }
+ </style>
+ <script type="text/javascript" src="../assets/jquery-1.10.2.min.js"></script>
+ <script type="text/javascript" src="../assets/ol-debug.js"></script>
+ <script type="text/javascript" src="../assets/legend_ol.js"></script>
+ <script type="text/javascript">
+
+ //This sample is assumed to be hosted at http://servername/mapguide/ol2samples/hybrid/index.html
+ var mapAgentUrl = "../../mapagent/mapagent.fcgi";
+
+ //Various features you can include in the CREATERUNTIMEMAP response.
+ var REQ_NONE = 0; //Nothing. This the default.
+ var REQ_LAYER_STRUCTURE = 1; //Information about layers and groups (required for the mask values below to have any effect)
+ var REQ_LAYER_ICONS = 2; //Icons for each layer (has no effect if REQ_LAYER_STRUCTURE is not in the bitmask)
+ var REQ_LAYER_FEATURE_SOURCE = 4; //Feature Source information for each layer (has no effect if REQ_LAYER_STRUCTURE is not in the bitmask)
+
+ var selectedMapDef = null;
+ var sessionId = null;
+ var availableMaps = [];
+
+ function createSession(username, password) {
+ return $.ajax({
+ url: mapAgentUrl,
+ method: "POST",
+ data: {
+ "OPERATION": "CREATESESSION",
+ "VERSION": "4.0.0",
+ "USERNAME": username,
+ "PASSWORD": password,
+ "CLEAN": "1"
+ }
+ });
+ }
+
+ function listResources(session, type) {
+ return $.ajax({
+ url: mapAgentUrl,
+ method: "GET",
+ data: {
+ "OPERATION": "ENUMERATERESOURCES",
+ "VERSION": "4.0.0",
+ "RESOURCEID": "Library://",
+ "SESSION": session,
+ "TYPE": type,
+ "DEPTH": "-1",
+ "COMPUTECHILDREN": "0",
+ "FORMAT": "application/json",
+ "CLEAN": "1"
+ }
+ });
+ }
+
+ var activeMap = null;
+
+ function createMap(mapDef, session, reqFeatures) {
+ $("#wrap").html("<strong>Loading: " + mapDef + "</strong>");
+ $.getJSON(mapAgentUrl, {
+ "OPERATION": "CREATERUNTIMEMAP",
+ "VERSION": "4.0.0",
+ "MAPDEFINITION": mapDef,
+ "SESSION": session,
+ "REQUESTEDFEATURES": reqFeatures,
+ //Optional parameters you can specify and/or experiment with
+ //"ICONFORMAT": "GIF", //Uncomment to override desired image format (default: PNG)
+ //"ICONWIDTH": 32, //Uncomment to override desired icon width (default: 16)
+ //"ICONHEIGHT": 32, //Uncomment to override desired icon height (default: 16)
+ //"ICONSPERSCALERANGE": 3, //Uncomment to observe theme compression for themes exceeding this number of rules (default: 25)
+ //"TARGETMAPNAME": "MyRuntimeMapForOpenLayers", //Uncomment if you require a specific map name be given (default: inferred from Map Definition)
+ "FORMAT": "application/json",
+ // This will give "clean" json responses that are more in line with their respective XML model
+ "CLEAN": "1"
+ }, function (data, textStatus, jqXHR) {
+ if (activeMap) {
+ activeMap.destroy();
+ }
+ activeMap = new MapViewModel("#wrap", data, jqXHR.responseText.length);
+ }).error(function (jqXHR, textStatus, errorThrown) {
+ $("#error").html(jqXHR.responseText);
+ });
+ }
+
+ /**
+ * A helper view model class to encapsulate all map-related
+ * view satte
+ */
+ function MapViewModel(el, rtMapInfo, size) {
+ var _this = this;
+ _this.$el = $(el);
+ _this.iconMimeType = null;
+ _this.map = null; //The ol.map
+ _this.view = null; //The ol.view
+ _this.layers = [];
+ _this.finiteScales = [];
+ _this.groupLayers = [];
+ _this.destroy = function () {
+ $("#scale").text("");
+ $("#mapName").text("");
+ $("#jsonSize").text("");
+ $("#iconFormat").text("");
+ _this.map = null;
+ _this.view = null;
+ };
+ _this.updateScale = function (scale) {
+ $("#scale").text(scale);
+ };
+ _this.$el.html("<div class='layers'><div class='legend'><strong>Base Layer Groups</strong><ul class='rootList'></ul></div></div><div class='map'></div>");
+ $("#mapName").text(rtMapInfo.RuntimeMap.Name);
+ $("#jsonSize").text(size);
+ if (rtMapInfo.RuntimeMap.IconMimeType) {
+ _this.iconMimeType = rtMapInfo.RuntimeMap.IconMimeType;
+ $("#iconFormat").html(_this.iconMimeType);
+ }
+ var extent = [
+ rtMapInfo.RuntimeMap.Extents.LowerLeftCoordinate.X,
+ rtMapInfo.RuntimeMap.Extents.LowerLeftCoordinate.Y,
+ rtMapInfo.RuntimeMap.Extents.UpperRightCoordinate.X,
+ rtMapInfo.RuntimeMap.Extents.UpperRightCoordinate.Y
+ ];
+ if (rtMapInfo.RuntimeMap.FiniteDisplayScale) {
+ for (var i = rtMapInfo.RuntimeMap.FiniteDisplayScale.length - 1; i >= 0; i--) {
+ _this.finiteScales.push(rtMapInfo.RuntimeMap.FiniteDisplayScale[i]);
+ }
+ }
+
+ //If a tile set definition is defined it takes precedence over the map definition, this enables
+ //this example to work with older releases of MapGuide where no such resource type exists.
+ var resourceId = rtMapInfo.RuntimeMap.TileSetDefinition || rtMapInfo.RuntimeMap.MapDefinition;
+ var tileWidth = rtMapInfo.RuntimeMap.TileWidth;
+ var tileHeight = rtMapInfo.RuntimeMap.TileHeight;
+ var metersPerUnit = rtMapInfo.RuntimeMap.CoordinateSystem.MetersPerUnit;
+ var dpi = rtMapInfo.RuntimeMap.DisplayDpi;
+ var projection = null;
+ if (rtMapInfo.RuntimeMap.CoordinateSystem.EpsgCode.length > 0) {
+ projection = "EPSG:" + rtMapInfo.RuntimeMap.CoordinateSystem.EpsgCode;
+ }
+ var zOrigin = _this.finiteScales.length - 1;
+ var resolutions = new Array(_this.finiteScales.length);
+ if (rtMapInfo.RuntimeMap.TileSetProvider == "XYZ") {
+ for (var i = 0; i < rtMapInfo.RuntimeMap.Group.length; i++) {
+ var group = rtMapInfo.RuntimeMap.Group[i];
+ if (group.Type != 2 && group.Type != 3) { //BaseMap or LinkedTileSet
+ continue;
+ }
+ _this.groupLayers.push(
+ new ol.layer.Tile({
+ name: group.Name,
+ source: new ol.source.XYZ({
+ attributions: [
+ new ol.Attribution({
+ html: '<img src="../../localized/PoweredBy_en.gif" title="Powered by MapGuide" />'
+ })
+ ],
+ tileUrlFunction: getTileUrlFunctionForGroup(resourceId, group.Name, zOrigin)
+ })
+ })
+ );
+ }
+ } else {
+ var inPerUnit = 39.37 * metersPerUnit;
+ for (var i = 0; i < _this.finiteScales.length; ++i) {
+ resolutions[i] = _this.finiteScales[i] / inPerUnit / dpi;
+ }
+ var mgTileGrid = new ol.tilegrid.TileGrid({
+ origin: ol.extent.getTopLeft(extent),
+ resolutions: resolutions,
+ tileSize: [tileWidth, tileHeight]
+ });
+ for (var i = 0; i < rtMapInfo.RuntimeMap.Group.length; i++) {
+ var group = rtMapInfo.RuntimeMap.Group[i];
+ if (group.Type != 2 && group.Type != 3) { //BaseMap or LinkedTileSet
+ continue;
+ }
+ _this.groupLayers.push(
+ new ol.layer.Tile({
+ name: group.Name,
+ source: new ol.source.TileImage({
+ tileGrid: mgTileGrid,
+ projection: projection,
+ tileUrlFunction: getTileUrlFunctionForGroup(resourceId, group.Name, zOrigin),
+ wrapX: false
+ })
+ })
+ );
+ }
+ }
+ /*
+ if (groupLayers.length > 0) {
+ groupLayers.push(
+ new ol.layer.Tile({
+ source: new ol.source.TileDebug({
+ tileGrid: tileGrid,
+ projection: projection,
+ tileUrlFunction: function(tileCoord) {
+ return urlTemplate.replace('{z}', (zOrigin - tileCoord[0]).toString())
+ .replace('{x}', tileCoord[1].toString())
+ .replace('{y}', (-tileCoord[2] - 1).toString());
+ },
+ wrapX: false
+ })
+ })
+ );
+ }
+ */
+
+ var overlay = new ol.layer.Image({
+ name: "MapGuide Dynamic Overlay",
+ extent: extent,
+ source: new ol.source.ImageMapGuide({
+ projection: projection,
+ url: mapAgentUrl,
+ useOverlay: true,
+ metersPerUnit: metersPerUnit,
+ params: {
+ MAPNAME: rtMapInfo.RuntimeMap.Name,
+ FORMAT: 'PNG',
+ SESSION: rtMapInfo.RuntimeMap.SessionId,
+ BEHAVIOR: 2
+ },
+ ratio: 2
+ })
+ });
+
+ // Add an OSM base layer for real-world context if EPSG:3857
+ if (projection == "EPSG:3857") {
+ _this.layers.push(new ol.layer.Tile({
+ source: new ol.source.OSM({
+ attributions: [
+ new ol.Attribution({
+ html: 'Tiles © <a href="http://www.openstreetmap.org/">' +
+ 'OpenStreetMap</a>'
+ }),
+ ol.source.OSM.ATTRIBUTION
+ ],
+ url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+ })
+ }));
+ }
+
+ for (var i = _this.groupLayers.length - 1; i >= 0; i--) {
+ _this.layers.push(_this.groupLayers[i]);
+ }
+ _this.layers.push(overlay);
+ /*
+ console.log("Draw Order:");
+ for (var i = 0; i < layers.length; i++) {
+ console.log(" " + layers[i].get("name"));
+ }
+ */
+ if (resolutions.length == 0) {
+ _this.view = new ol.View({
+ projection: projection
+ });
+ } else {
+ _this.view = new ol.View({
+ projection: projection,
+ resolutions: resolutions
+ });
+ }
+ _this.map = new ol.Map({
+ target: $(".map", _this.$el)[0],
+ layers: _this.layers,
+ view: _this.view
+ });
+ _this.view.fit(extent, _this.map.getSize());
+ _this.view.on("change:resolution", function (e) {
+ _this.updateScale(_this.view.getResolution() * dpi * inPerUnit);
+ });
+ _this.updateScale(_this.view.getResolution() * dpi * inPerUnit);
+
+ var mgTiledLayers = {};
+ for (var i = 0; i < _this.groupLayers.length; i++) {
+ var grp = _this.groupLayers[i];
+ mgTiledLayers[grp.get("name")] = grp;
+ }
+ _this.legend = new Legend({
+ legendSelector: el + " .rootList",
+ stdIconRoot: "../../stdicons",
+ runtimeMap: rtMapInfo,
+ map: _this.map,
+ mgLayerOL: overlay,
+ mgTiledLayers: mgTiledLayers
+ });
+ _this.legend.update();
+ }
+
+ function getTileUrlFunctionForGroup(resourceId, groupName, zOrigin) {
+ var urlTemplate = mapAgentUrl
+ + "?OPERATION=GETTILEIMAGE&VERSION=1.2.0&USERNAME=Anonymous"
+ + "&MAPDEFINITION=" + resourceId
+ + "&BASEMAPLAYERGROUPNAME=" + groupName
+ + "&TILEROW={x}"
+ + "&TILECOL={y}"
+ + "&SCALEINDEX={z}";
+ return function (tileCoord) {
+ return urlTemplate
+ .replace('{z}', (zOrigin - tileCoord[0]).toString())
+ .replace('{x}', tileCoord[1].toString())
+ .replace('{y}', (-tileCoord[2] - 1).toString());
+ };
+ }
+
+ $(document).ready(function () {
+ createSession("Anonymous", "").then(function (sid) {
+ sessionId = sid;
+ return listResources(sessionId, "MapDefinition");
+ }).then(function (list) {
+ for (var i = 0; i < list.ResourceList.ResourceDocument.length; i++) {
+ var doc = list.ResourceList.ResourceDocument[i];
+ availableMaps.push(doc.ResourceId);
+ }
+ return listResources(sessionId, "TileSetDefinition");
+ }).then(function (list) {
+ for (var i = 0; i < list.ResourceList.ResourceDocument.length; i++) {
+ var doc = list.ResourceList.ResourceDocument[i];
+ availableMaps.push(doc.ResourceId);
+ }
+ var html = "<select class='map-picker'>";
+ html += "<option>(Select a map/tileset)</option>";
+ for (var i = 0; i < availableMaps.length; i++) {
+ html += "<option>" + availableMaps[i] + "</option>";
+ }
+ html += "</select>";
+ html += "<button type='button' class='load-map'>Load Map</button>";
+ $("#picker").html(html);
+ $("button.load-map").attr("disabled", (selectedMapDef && selectedMapDef != "") ? null : "disabled");
+ $("button.load-map").on("click", function (e) {
+ //Have a play with the bitmask values to see the differences in JSON payload size
+ //and to see how our legend control gracefully handles such situations
+ createMap(selectedMapDef, sessionId, REQ_LAYER_STRUCTURE | REQ_LAYER_FEATURE_SOURCE | REQ_LAYER_ICONS)
+ });
+ $("select.map-picker").on("change", function (e) {
+ selectedMapDef = this.value;
+ $("button.load-map").attr("disabled", (selectedMapDef && selectedMapDef != "") ? null : "disabled");
+ });
+ })
+ });
+ </script>
+</head>
+
+<body>
+ <div id="main">
+ <div class="container">
+ <div id="picker">
+
+ </div>
+ <div id="error">
+ </div>
+ <div id="wrap">
+
+ </div>
+ <div class="clearfix"></div>
+ <div class="alert alert-info">
+ <p>Scale: 1:<span id="scale"></span></p>
+ <p>JSON payload for CREATERUNTIMEMAP is: <span id="jsonSize"></span> characters</p>
+ <p>Icon format is: <span id="iconFormat"></span></p>
+ <p id="mapName"></p>
+ <p id="mgSession"></p>
+ </div>
+ </div>
+ </div>
+</body>
+
+</html>
\ No newline at end of file
More information about the mapguide-commits
mailing list