Frequently Asked Question

Symptom

• Add custom PNG image as a background of a specific geojson mapline
• PNG image must be sticked to the mapline when draging/zooming/unzooming
• Using of the WebMapline component

Environment

• Windows/Linux Server
• Need4Viz : versions >= 2022.1

Resolution

To add custom PNG file in background of a WebMapline, several actions need to be done on the PNG.

We'll describe those actions, using QGIS 3.40 tool.

1. Georeference the PNG image

Open QGIS and load the geojson mapline in it :

Open the Geo Referencer tool :

Open a new raster :

and select your PNG file :

Add few points to georeference the PNG (at least 4 points, on each corner of the image)

Clic on a point on the PNG. A new popup opens, clic on "From the map canvas"

On the geojson map, select the corresponding location :

Repeat the operation on 3 or more additional points :

Now the georeferenced image can be generated :

Provide a folder & name to save the TIF image, you can store the points (to update them later if necessary) :

Once the popup is closing, run the transformation (the success message should appears) :

You can now close the Georeferencer tool popup. 

In the QGIS main frame, the new georeference TIF layer should be visible :

When you deselect the TIF layer, you can see the geojson layer, both of them should be correctly positioned :

2. Generate the XYZ tiles from the TIF georeferenced image

Once the PNG image is correctly georeferenced, the next step is to generate all the XYZ tiles used by the WebMapline component as a background of the geojson layer.

Open the Toolbox of QGIS :

In the search bar of the toolbox, search "XYZ" term and select "Raster tool / Generate XYZ tiles (folder)" :

In the popup, select the footprint calculated on the TIF layer, select also the zoom min (0) and max zoom (6) levels :

Select a destination folder and clic on "Execute" :

The next popup give the result of tiles generation :

3/ Configure the N4V server

Copy ol the folder of tiles on a Web server (for instance, you can use the N4V webapp N4VCustomElements, create a subfolder in maps_custom_tiles folder) :

Now, we'll create a new provider entry for the WebMapline component. Open the Need4Viz\nodejs\node_modules\custom_element\ce_libs\resources\list_webproviders_conf.js file with Notepad++ and add the following entry (replace "your_boe_server_URL" with the value of the URL & port used to access the BOE portal, please respect exactly the syntax) :

exports.TEST = {url: "https://your_boe_server_URL/N4VCustomElements/res/js/highcharts/maps_custom_tiles/test/{z}/{x}/{y}.png"};

Save the file. 

Now we'll add the new entry in the list of providers available in Webi. Open the Need4Viz\nodejs\node_modules\custom_element\ce_settings\lang_EN(FR)\_list_webproviders.json and add the following entry (please respect exactly the syntax) :

Now you can restart the N4V services.

Open Webi and create a new WebMapline component using the geojson original layer and the newwly created TEST webprovider :

The result is the following one :

When you drag and zoom in the map, the background image is correctly attached to the geojson layer :

You can obtain the better result with a PNG that can be exactly positioned on top of the geojson layer (this is not exactly the case in our example, that's why the PNG doesn't fit exactly the geojson layer).