Skip to main content

Tutorial 13 WebApp Layer WMS Display according to elastic scrolling

Introduction​

Using the WebApp Layer mechanism, you can connect to a web service and dynamically display map content according to the display area. We will use the same GEBCO Web Service as in Tutorial 12.

  • Click on wms2.html to see it in action .
    • (Note: It may take some time for the WMS to generate and distribute the map.)

Source Code Directory​

  • Source code directory
  • Gets the display area parameters each time you scroll.
  • Use this parameter to construct a query URL to the WMS.
  • The image element places the data retrieved from the WMS.
  • The previous image element is deleted.

Tutorial​

We will use a WMS (Web Map Service) to implement a layer as a WebApp Layer that can display a map of the displayed area in response to elastic scrolling . As a WMS, we will continue to use the GEBCO Web Service from Tutorial 12.

wms2.html​

There's nothing particularly different from before.

Container.svg​

There's nothing particularly different from before.

wms_dynamic.svg​

  • data-controller="wmsController.html" This layer is linked to the WebApp ("wmsController.html").
    • The WebApp performs DOM manipulation to display WMS content every time you scroll.
  • The image element is a dummy (it is not displayed because it does not have an xlink:href attribute).
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="120,-50,30,30" data-controller="wmsController.html#exec=appearOnLayerLoad">
 <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)"/>
 <image id="wmsImage" preserveAspectRatio="none" opacity="0.5" />
</svg>

wmsController.html, wmsController.js​

  • onload A function called immediately after the webApp is loaded.
    • svgMap.refreshScreen() preRenderFunction This will cause the map to be refreshed immediately after the webapp is loaded .
  • preRenderFunction This is a callback function that is executed when redrawing occurs. It is also called when redrawing occurs during elastic scrolling.
    • prevImageElement.remove() Delete the image from WMS one step before (just before the telescopic scroll occurs)
    • svgMap.getGeoViewBox() Get the display area in geographic coordinates
    • getScreenSize() Get the size of the map display screen
    • getWMSreq(GEBCOurl, GEBCOlayer, geoViewBox, screenSize)
      • A function that generates a request URL to GEBCO WMS based on parameters such as display area and screen size.
      • For details on how to set query parameters, see the explanation about WMS in Tutorial 12.
    • getSvgImage(req, geoViewBox) A function that generates an image element based on the request URI to the WMS generated above and the area information of the map data.
    • svgImage.documentElement.appendChild(newImage) Place the generated Image element in the SVG content

wmsController.js

onload=function(){
	svgMap.refreshScreen();
}

var GEBCOurl="https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv";
was GEBCOlayer="GEBCO_LATEST";

where crsAD=1;

function preRenderFunction(){
	var prevImageElement = svgImage.getElementById("wmsImage");
	prevImageElement.remove();
	
	var geoViewBox = svgMap.getGeoViewBox();
	var screenSize = getScreenSize();
	var req = getWMSreq(GEBCOurl, GEBCOlayer, geoViewBox, screenSize);

	var newImage = getSvgImage(req, geoViewBox);
	svgImage.documentElement.appendChild(newImage);
}

function getSvgImage( imageUrl, geoViewBox){
	var imageElement = svgImage.createElement("image");
	imageElement.setAttribute("opacity", 0.5);
	imageElement.setAttribute("preserveAspectRatio", "none");
	imageElement.setAttribute("id", "wmsImage");
	imageElement.setAttribute("xlink:href", imageUrl);
	imageElement.setAttribute("x", geoViewBox.x * crsAD);
	imageElement.setAttribute("y", -(geoViewBox.y+geoViewBox.height) * crsAD); // Set north edge for axis inversion
	imageElement.setAttribute("width", geoViewBox.width * crsAD);
	imageElement.setAttribute("height", geoViewBox.height * crsAD);
	return(imageElement);
}

function getWMSreq(baseUrl, layerName, geoArea, screenSize){
	var wmsArea_x0=geoArea.x;
	var wmsArea_y0=geoArea.y;
	var wmsArea_x1=geoArea.x+geoArea.width;
	var wmsArea_y1=geoArea.y+geoArea.height;
	
	var ans = `${baseUrl}?
	request=GetMap&
	service=WMS&
	version=1.1.1&
	layers=${layerName}&
	srs=EPSG:4326&
	bbox=${wmsArea_x0},${wmsArea_y0},${wmsArea_x1},${wmsArea_y1}&
	width=${screenSize.width}&
	height=${screenSize.height}&
	format=image%2Fpng`;
	
	ans = ans.replace(/\s/g,""); // Remove blank text (including line breaks)
	return ( ans );
}

function getScreenSize(){
	var gvb = svgMap.getGeoViewBox();
	var scale = svgImageProps.scale;
	return {
		width : Math.round(gvb.width * scale),
		height: Math.round(gvb.height * scale),
	}
}