Map Custom GIS Layer Max Zoom Level

Version

Application Scenario

Currently, the maximum zoom level for GIS Layer in FineReport is 18, but in some scenarios, you may need to customize layers to support zoom levels above 18.

You can customize GIS Layer through Map Configuration, add the maxZoom parameter in the custom URL to define the maximum zoom level, and then adjust the zoom level through the map zoom level interface in the designer.

Note:

1. The parameter added in URL support tilelayer/WMS/WMTS layers, but not support AutoNavi layer.

2. You need to confirm with the map service provider that the layer supports the corresponding zoom level.

3. The function is not supported on mobile terminal.

Template Creation

Merge required cells, select the merged cell, click the Insert Chart icon on the upper toolbar, select Area Map, and click OK, as shown in the following figure.

Map Configuration

Choose Server > Map Configuration on the upper toolbar of the designer and select Custom GIS Layer.

In this example, choose the existing Dark Blue > tilelayer and add the parameter ?maxZoom=25 after its URL, which defines the maximum zoom level of the layer as 25. Click Save to complete the setting, as shown in the following figure.

Note:

 The built-in Dark Blue layer is no longer maintained by third-party vendors and its stability cannot be guaranteed. You can select styles from the standard layers for replacement. For details, see Note in Custom TileLayer.

Map Design

Setting GIS Layer

Go back to the designer's general report page, click the map to enter the cell element, and set GIS Layer to Custom > Dark Blue, as shown in the following figure. 

Adding a Loading End Event

After modifying the map configuration, the Zoom Level setting in the map will not add options. For example, in this case, the maximum zoom level that can be selected for the Dark Blue layer is 16. After setting the maxZoom parameter, the maximum zoom level that can be selected is still 16, as shown in the following figure. 

At this time, you need to adjust the zoom level through JS events.

In a general report, add a Loading End event under Template > Web Attribute > Pagination Preview Setting. The JavaScript code is as follows:

setTimeout(function() {
var chart = FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0); //getChartWithIndex
chart.setMapZoom({ zoomLevel: 20 }); //zoomLevel: 20
}, 1000);

The following figure shows the steps.

Note:

1. In the dashboard, select the map, add an After Initialization event, and then replace cell with the map component name in the JavaScript code.

2. In the FVS template, add the following code at Template > Event After Page Load:

setTimeout(function() {
var chart =duchamp.getWidgetByName("map component name"); //getChartWithIndex
chart.setMapZoom({ zoomLevel: 6 }); //zoomLevel: 20
}, 1000);

Effect Display

The maximum zoom level for the Dark Blue layer used in this example is 16. Although the zoom level of the map in this example in this can be set to 20, no geographic information can be seen on the layer after zooming in beyond level 16 in preview due to the unavailability of map resources. Therefore, this document does not provide preview effects and template downloads. If you need, you can set according to the document.