Cross-origin access

When integrating with external web services, you need to understand and handle cross-origin access depending on the external service.

When a map layer in a bit image requires a projection transformation, or when accessing a web service (web API) on a different domain than the site where the web application resides using XMLHttpRequest or fetch, cross-origin access restrictions may cause errors. These errors cannot be resolved solely on the web application side; server-side configuration adjustments are necessary.

Overview

Because SVGMap has a hyper-layering architecture, the client SVGMap framework web app consisting of the root html document basically needs to access a server of a different origin. This means that a process commonly known as " Cross-Origin Resource Sharing (CORS)" may be performed, and at this time, CORS errors may occur due to the native functionality of the web browser.

The table below shows cross-origin access cases and the possibility of CORS errors occurring.

Error due to cross-origin access in svgmapjs

Types of content accessed cross-origin	Content Processing	Possible CORS error
Bitimage (including tiles)	Overlay	Does not occur
Bitimage (including tiles)	Overlay with nonlinear projection transformation	Possible occurrence
Bitimage (including tiles)	Geospatial information processing, etc.	Possible occurrence
Data other than bit images, such as vector data and JSON	Overlay	Possible occurrence
Data other than bit images, such as vector data and JSON	Geospatial information processing, etc.	Possible occurrence
All types of content and data	3D display using Cesium extension	Possible occurrence

How to check for errors

Open the SVGMap page in a web browser and check the console or network screen of the developer tools to see if there is an error (such as a message about being blocked by CORS policy).

Server (service side): Configure to return CORS response headers

• Configure your server to return an Access-Control-Allow-Origin * (or a specified origin) response header.
  • Apache example
  • etc
• Services that are designed to be accessed from outside have this setting (e.g., Geospatial Information Authority maps and gitHubPages sites), so there is no need to use the proxy below.

Prepare a proxy service and route traffic through it

• Implementation using node.js
  • CORS Anywhere ( Setup Notes )
• Implementation using php
  • php-cross-domain-proxy ( fork of svgmap.org )
  • Simple proxy implementation example

SVGMap.js support for easier cross-origin access through proxies

SVGMap.js has several features that make it easier to support cross-origin access through proxies.

There are three main cases where SVGMap.js requires cross-origin access:

1. Projection conversion of bit image (including tiles) data
2. Raster GIS
3. Proprietary communication in the webApp layer

(1) and (2) require cross-origin access to be performed under the management of SVGMap.js, and an API is provided to configure cross-origin access (proxy settings for cross-origin access) when SVGMap.js is initialized.

• Manual#Proxy settings
• Reference#setProxyURLFactory
• Manual#setImageProxy

Examples of initialization using these APIs are explained in the next chapter.

Cross-Origin Access in the WebApp Layer

On the other hand, case 3 is a case where each layer's webApp ( webApp Layer ) performs cross-origin access (using fetch, XMLHttpRequest, etc.) to obtain data (for example, custom data in JSON format) to generate the layer's content, and strictly speaking, this is a process that does not involve SVGMap.js. Care for this type of cross-origin access must basically be taken by the developer of each individual layer's webApp.

However, when accessing via a proxy, it is possible that the proxy used for cases 1 and 2 above will also be used as a proxy common to all layers, and in this case there is a function that can call the proxy set during SVGMap.js initialization using a common function.

• Reference#getCORSURL

We will show how to use getCORSURL in a later chapter.

Initializing SVGMap.js

• Using the above mentioned functions, we will introduce the steps to initialize the root HTML document to easily enable cross-origin access . See the next chapter for corsProxy.js.
  • Full implementation of the root HTML document: GitHub

<!doctype html>
<html>
...
<script type="module">
import { CorsProxy } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/CorsProxyModule.js';
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
var corsProxy = new CorsProxy();

// プロキシの設定
var proxyPath = "https://..url..of../simpleCORSproxy.php?file=";

corsProxy.setService(proxyPath, null, true, true); // 第4パラメータをtrueにするとアクセス先URLをエンコードする
window.corsProxy = corsProxy;
svgMap.setProxyURLFactory(null,null,null, corsProxy.getURLfunction(), true); // ビットイメージ非線形図法変換の時のみプロキシを使う
</script>
...
</html>

corsProxyMoule.js

Here is a library to make initialization easier. gitHub

• corsProxy.setService(pxUrl , directURLls , useAnonProxy, requireEncoding)
  • pxUrl: Proxy URL
  • directURLls: [List of URLs that do not use the proxy]
  • useAnonProxy: Whether to assign anonymous attribute
  • requireEncoding: Whether to URL encode the URL passed to the proxy service
• corsProxy.getURLfunction : Gets the function to get the URL via the proxy

Cross-origin access at the webApp layer

The getCORSURL API can be used in webApps of each layer that are registered in the root HTML document (SVGMap page) where SVGMap.js has been initialized for cross-origin access.

This API is a function that allows you to obtain a URL that enables access to the URL of the service you want to access via a commonly prepared cross-origin access server. For example, it can be used as follows:

var dataResponse = await fetch( svgMap.getCORSURL( serviceURL ) );

On the other hand, if the root HTML document (SVGMap page) does not initialize cross-origin access , the webApps in each layer must resolve cross-origin access independently. For example, if https://[myproxy.mydomain.com]/proxy/ a proxy is provided as a proxy for cross-origin access and ?targetURL=serviceURL the destination service is accessed with a query parameter, it would look like this: var dataResponse = await fetch( "https://[myproxy.mydomain.com]/proxy/?targetURL=" + serviceURL );

Nonlinear projection transformation

Projection conversions between Mercator projection and equirectangular projection, etc., involve coordinate transformations that cannot be performed using a linear affine transformation (matrix (a, b, c, d, e, f)).