[mapguide-commits] r9845 - in trunk/MgDev/Doc/samples/clientsamples: assets hybrid mixed mvt utfgrid wms xyz
svn_mapguide at osgeo.org
svn_mapguide at osgeo.org
Tue Jun 8 03:53:17 PDT 2021
Author: jng
Date: 2021-06-08 03:53:16 -0700 (Tue, 08 Jun 2021)
New Revision: 9845
Added:
trunk/MgDev/Doc/samples/clientsamples/mixed/index_ol.html
Modified:
trunk/MgDev/Doc/samples/clientsamples/assets/legend_ol.js
trunk/MgDev/Doc/samples/clientsamples/hybrid/index.html
trunk/MgDev/Doc/samples/clientsamples/mvt/index.html
trunk/MgDev/Doc/samples/clientsamples/utfgrid/index.html
trunk/MgDev/Doc/samples/clientsamples/wms/index.html
trunk/MgDev/Doc/samples/clientsamples/xyz/index_ol.html
Log:
#2810: Update samples in light of ol.js switch. Also add OL equivalent of the mixed example.
Modified: trunk/MgDev/Doc/samples/clientsamples/assets/legend_ol.js
===================================================================
--- trunk/MgDev/Doc/samples/clientsamples/assets/legend_ol.js 2021-06-01 10:00:22 UTC (rev 9844)
+++ trunk/MgDev/Doc/samples/clientsamples/assets/legend_ol.js 2021-06-08 10:53:16 UTC (rev 9845)
@@ -23,7 +23,7 @@
var _self = this;
- this.map.getView().on("change:resolution", this.update, this);
+ this.map.getView().on("change:resolution", function(e) { _self.update(); });
this.updateLayersAndGroups(rtMapInfo);
Modified: trunk/MgDev/Doc/samples/clientsamples/hybrid/index.html
===================================================================
--- trunk/MgDev/Doc/samples/clientsamples/hybrid/index.html 2021-06-01 10:00:22 UTC (rev 9844)
+++ trunk/MgDev/Doc/samples/clientsamples/hybrid/index.html 2021-06-08 10:53:16 UTC (rev 9845)
@@ -1,7 +1,6 @@
<html>
-
<head>
- <title>Load any map example</title>
+ <title>Load almost any map or tileset example</title>
<link rel="stylesheet" href="../../viewerfiles/ol.css" />
<style type="text/css">
#error {
@@ -34,14 +33,9 @@
#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="../../viewerfiles/ol-debug.js"></script>
+ <script type="text/javascript" src="../../viewerfiles/ol.js" charset="utf-8"></script>
<script type="text/javascript" src="../assets/legend_ol.js"></script>
<script type="text/javascript">
@@ -119,7 +113,7 @@
if (activeMap) {
activeMap.destroy();
}
- if (TILE_IMAGE_FORMATS.indexOf(data.RuntimeMap.TileFormat) >= 0) {
+ if (!data.RuntimeMap.TileFormat || TILE_IMAGE_FORMATS.indexOf(data.RuntimeMap.TileFormat) >= 0) {
activeMap = new MapViewModel("#wrap", data, jqXHR.responseText.length);
$("#error").html("");
} else {
@@ -202,9 +196,7 @@
name: group.Name,
source: new ol.source.XYZ({
attributions: [
- new ol.Attribution({
- html: '<img src="../../localized/PoweredBy_en.gif" title="Powered by MapGuide" />'
- })
+ '<img src="../../localized/PoweredBy_en.gif" title="Powered by MapGuide" />'
],
url: getTileUrlTemplate(resourceId, group.Name, true),
tilePixelRatio: retinaScale
@@ -283,10 +275,7 @@
_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>'
- }),
+ 'Tiles © <a href="http://www.openstreetmap.org/">' + 'OpenStreetMap</a>',
ol.source.OSM.ATTRIBUTION
],
url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
@@ -370,10 +359,13 @@
function getTileUrlFunctionForGroup(resourceId, groupName, zOrigin) {
var urlTemplate = getTileUrlTemplate(resourceId, groupName, false);
return function (tileCoord) {
+ var z = tileCoord[0];
+ var x = tileCoord[1];
+ var y = tileCoord[2]; //NOTE: tileCoord format changed in OL 6.0, no longer need to negate and subtract by 1
return urlTemplate
- .replace('{z}', (zOrigin - tileCoord[0]).toString())
- .replace('{x}', tileCoord[1].toString())
- .replace('{y}', (-tileCoord[2] - 1).toString());
+ .replace('{z}', (zOrigin - z).toString())
+ .replace('{x}', x.toString())
+ .replace('{y}', (y).toString());
};
}
@@ -418,6 +410,7 @@
<body>
<div id="main">
<div class="container">
+ <p>This example demonstrates how any Map Definition and image-based Tile Set Definitions can be viewed in OpenLayers. The map is created with CREATERUNTIMEMAP</p>
<div id="picker">
</div>
Added: trunk/MgDev/Doc/samples/clientsamples/mixed/index_ol.html
===================================================================
--- trunk/MgDev/Doc/samples/clientsamples/mixed/index_ol.html (rev 0)
+++ trunk/MgDev/Doc/samples/clientsamples/mixed/index_ol.html 2021-06-08 10:53:16 UTC (rev 9845)
@@ -0,0 +1,271 @@
+<html>
+ <head>
+ <title>Basic Sheboygan mixed map (tiled and untiled) example</title>
+ <link rel="stylesheet" href="../../viewerfiles/ol.css" />
+ <style type="text/css">
+ #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; }
+ #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="../../viewerfiles/ol.js" charset="utf-8"></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/clientsamples/mixed/index_ol.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 gMimeType = null;
+ var map = null;
+ var layers = [];
+
+ $(document).ready(function() {
+ //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(REQ_NONE);
+ //createMap(REQ_LAYER_STRUCTURE);
+ createMap(REQ_LAYER_STRUCTURE | REQ_LAYER_FEATURE_SOURCE | REQ_LAYER_ICONS);
+ });
+
+ function createMap(reqFeatures) {
+ $.getJSON(mapAgentUrl, {
+ "OPERATION": "CREATERUNTIMEMAP",
+ "VERSION": "4.0.0",
+ "MAPDEFINITION": "Library://Samples/Sheboygan/Maps/SheboyganMixed.MapDefinition",
+ "USERNAME": "Anonymous", //Or you can use "SESSION": "<my session id>"
+ "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) {
+ $("#jsonSize").html(jqXHR.responseText.length);
+ loadMap(data);
+ }).error(function (jqXHR, textStatus, errorThrown) {
+ $("#error").html(jqXHR.responseText);
+ });
+ }
+
+ function getTileUrlTemplate(resourceId, groupName, isXYZ) {
+ var urlTemplate = mapAgentUrl
+ + "?OPERATION=GETTILEIMAGE"
+ + "&VERSION=1.2.0"
+ + "&USERNAME=Anonymous"
+ + "&MAPDEFINITION=" + resourceId
+ + "&BASEMAPLAYERGROUPNAME=" + groupName;
+ if (isXYZ) {
+ urlTemplate += "&TILEROW={x}&TILECOL={y}";
+ } else {
+ urlTemplate += "&TILEROW={y}&TILECOL={x}";
+ }
+ urlTemplate += "&SCALEINDEX={z}";
+ return urlTemplate;
+ }
+
+ function getTileUrlFunctionForGroup(resourceId, groupName, zOrigin) {
+ var urlTemplate = getTileUrlTemplate(resourceId, groupName, false);
+ return function (tileCoord) {
+ var z = tileCoord[0];
+ var x = tileCoord[1];
+ var y = tileCoord[2]; //NOTE: tileCoord format changed in OL 6.0, no longer need to negate and subtract by 1
+ return urlTemplate
+ .replace('{z}', (zOrigin - z).toString())
+ .replace('{x}', x.toString())
+ .replace('{y}', (y).toString());
+ };
+ }
+
+ function updateScale(scale) {
+ $("#scale").text(scale);
+ }
+
+ function loadMap(rtMapInfo) {
+ if (rtMapInfo.RuntimeMap.IconMimeType) {
+ gMimeType = rtMapInfo.RuntimeMap.IconMimeType;
+ $("#iconFormat").html(gMimeType);
+ }
+ var extent = [
+ rtMapInfo.RuntimeMap.Extents.LowerLeftCoordinate.X,
+ rtMapInfo.RuntimeMap.Extents.LowerLeftCoordinate.Y,
+ rtMapInfo.RuntimeMap.Extents.UpperRightCoordinate.X,
+ rtMapInfo.RuntimeMap.Extents.UpperRightCoordinate.Y
+ ];
+ var finiteScales = [];
+ if (rtMapInfo.RuntimeMap.FiniteDisplayScale) {
+ for (var i = rtMapInfo.RuntimeMap.FiniteDisplayScale.length - 1; i >= 0; i--) {
+ 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;
+ //On MGOS 2.6 or older, tile width/height is never returned, so default to 300x300
+ var tileWidth = rtMapInfo.RuntimeMap.TileWidth || 300;
+ var tileHeight = rtMapInfo.RuntimeMap.TileHeight || 300;
+ var metersPerUnit = rtMapInfo.RuntimeMap.CoordinateSystem.MetersPerUnit;
+ var dpi = rtMapInfo.RuntimeMap.DisplayDpi;
+ var projection = null;
+ var zOrigin = finiteScales.length - 1;
+ var inPerUnit = 39.37 * metersPerUnit;
+ var resolutions = new Array(finiteScales.length);
+ for (var i = 0; i < finiteScales.length; ++i) {
+ resolutions[i] = finiteScales[i] / inPerUnit / dpi;
+ }
+
+ if (rtMapInfo.RuntimeMap.CoordinateSystem.EpsgCode.length > 0) {
+ projection = "EPSG:" + rtMapInfo.RuntimeMap.CoordinateSystem.EpsgCode;
+ }
+
+ var tileGrid = new ol.tilegrid.TileGrid({
+ origin: ol.extent.getTopLeft(extent),
+ resolutions: resolutions,
+ tileSize: [tileWidth, tileHeight]
+ });
+
+ var groupLayers = [];
+ 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;
+ }
+ groupLayers.push(
+ new ol.layer.Tile({
+ name: group.Name,
+ source: new ol.source.TileImage({
+ tileGrid: tileGrid,
+ 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
+ })
+ });
+
+ for (var i = groupLayers.length - 1; i >= 0; i--) {
+ layers.push(groupLayers[i]);
+ }
+ layers.push(overlay);
+ /*
+ console.log("Draw Order:");
+ for (var i = 0; i < layers.length; i++) {
+ console.log(" " + layers[i].get("name"));
+ }
+ */
+ var view = null;
+ if (resolutions.length == 0) {
+ view = new ol.View({
+ projection: projection
+ });
+ } else {
+ view = new ol.View({
+ projection: projection,
+ resolutions: resolutions
+ });
+ }
+ map = new ol.Map({
+ target: "map",
+ layers: layers,
+ view: view
+ });
+ view.fit(extent, map.getSize());
+ view.on("change:resolution", function(e) {
+ updateScale(view.getResolution() * dpi * inPerUnit);
+ });
+ updateScale(view.getResolution() * dpi * inPerUnit);
+
+ var mgTiledLayers = {};
+ for (var i = 0; i < groupLayers.length; i++) {
+ var grp = groupLayers[i];
+ mgTiledLayers[grp.get("name")] = grp;
+ }
+ var legend = new Legend({
+ legendSelector: "#rootList",
+ stdIconRoot: "../../stdicons",
+ runtimeMap: rtMapInfo,
+ map: map,
+ mgLayerOL: overlay,
+ mgTiledLayers: mgTiledLayers
+ });
+ legend.update();
+ }
+ </script>
+ </head>
+ <body>
+ <p>This example demonstrates loading a Map Definition with both tiled and untiled layers. The map is created with CREATERUNTIMEMAP</p>
+ <p>Sample not loading? <a href="../data/load.php">Check that the required resources have been loaded</a></p>
+ <div id="error">
+ </div>
+ <div id="wrap">
+ <div id="layers">
+ <div id="legend">
+ <strong>Base Layer Groups</strong>
+ <ul id="rootList">
+ </ul>
+ </div>
+ </div>
+ <div id="map">
+ </div>
+ </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>
+ </body>
+</html>
\ No newline at end of file
Modified: trunk/MgDev/Doc/samples/clientsamples/mvt/index.html
===================================================================
--- trunk/MgDev/Doc/samples/clientsamples/mvt/index.html 2021-06-01 10:00:22 UTC (rev 9844)
+++ trunk/MgDev/Doc/samples/clientsamples/mvt/index.html 2021-06-08 10:53:16 UTC (rev 9845)
@@ -18,11 +18,6 @@
float: left;
border: 1px solid black;
}
-
- #main {
- margin-top: 50px;
- padding-top: 20px;
- }
</style>
<script type="text/javascript" src="../../viewerfiles/ol.js"></script>
<script type="text/javascript" src="../assets/jquery-1.10.2.min.js"></script>
Modified: trunk/MgDev/Doc/samples/clientsamples/utfgrid/index.html
===================================================================
--- trunk/MgDev/Doc/samples/clientsamples/utfgrid/index.html 2021-06-01 10:00:22 UTC (rev 9844)
+++ trunk/MgDev/Doc/samples/clientsamples/utfgrid/index.html 2021-06-08 10:53:16 UTC (rev 9845)
@@ -32,11 +32,11 @@
background-color: white;
}
</style>
- <script type="text/javascript" src="../../viewerfiles/ol-debug.js"></script>
+ <script type="text/javascript" src="../../viewerfiles/ol.js"></script>
<script type="text/javascript" src="../assets/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
- var gridSource = new ol.source.TileUTFGrid({
+ var gridSource = new ol.source.UTFGrid({
tileJSON: {
scheme: "xyz",
grids: [
Modified: trunk/MgDev/Doc/samples/clientsamples/wms/index.html
===================================================================
--- trunk/MgDev/Doc/samples/clientsamples/wms/index.html 2021-06-01 10:00:22 UTC (rev 9844)
+++ trunk/MgDev/Doc/samples/clientsamples/wms/index.html 2021-06-08 10:53:16 UTC (rev 9845)
@@ -6,9 +6,8 @@
#error { color: red; }
#wrap { width: 900; }
#map { width: 400; height: 300; float: left; border: 1px solid black; }
- #main { margin-top: 50px; padding-top: 20px; }
</style>
- <script type="text/javascript" src="../../viewerfiles/ol-debug.js"></script>
+ <script type="text/javascript" src="../../viewerfiles/ol.js"></script>
<script type="text/javascript" src="../assets/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
@@ -25,10 +24,7 @@
new ol.layer.Tile({
source: new ol.source.OSM({
attributions: [
- new ol.Attribution({
- html: 'Tiles © <a href="http://www.openstreetmap.org/">' +
- 'OpenStreetMap</a>'
- }),
+ 'Tiles © <a href="http://www.openstreetmap.org/">OpenStreetMap</a>',
ol.source.OSM.ATTRIBUTION
],
url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
Modified: trunk/MgDev/Doc/samples/clientsamples/xyz/index_ol.html
===================================================================
--- trunk/MgDev/Doc/samples/clientsamples/xyz/index_ol.html 2021-06-01 10:00:22 UTC (rev 9844)
+++ trunk/MgDev/Doc/samples/clientsamples/xyz/index_ol.html 2021-06-08 10:53:16 UTC (rev 9845)
@@ -6,9 +6,8 @@
#error { color: red; }
#wrap { width: 900; }
#map { width: 400; height: 300; float: left; border: 1px solid black; }
- #main { margin-top: 50px; padding-top: 20px; }
</style>
- <script type="text/javascript" src="../../viewerfiles/ol-debug.js"></script>
+ <script type="text/javascript" src="../../viewerfiles/ol.js"></script>
<script type="text/javascript" src="../assets/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
@@ -25,10 +24,7 @@
new ol.layer.Tile({
source: new ol.source.OSM({
attributions: [
- new ol.Attribution({
- html: 'Tiles © <a href="http://www.openstreetmap.org/">' +
- 'OpenStreetMap</a>'
- }),
+ 'Tiles © <a href="http://www.openstreetmap.org/">OpenStreetMap</a>',
ol.source.OSM.ATTRIBUTION
],
url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
More information about the mapguide-commits
mailing list