Raster tile setup

If you have existing raster map illustration that you would like to use for the project, or you have created some following this tutorial, there are a few more steps to get them correctly linked to your Proximi.io account is very simple.

Turning raster image into map tiles with MapTiler

This step is usually taken care of by the Proximi.io team. These instructions are here only in case you want to host your own tiles for some reason. 

1. Install MapTiler desktop Engine at https://www.maptiler.com/engine/download/ . Note that you need a paid license for creating the tiles according to the specifications ofthis tutorial. Make sure to connect your license key to the software under "Account".
2. Select the PDF or PNG file of the map image from your computer.

1. The software asks how you would like to assign the geographical location. There are 2 ways to do this: assigning the visually on top of the map or utilizing existing coordinates. The best approach depends on whether you are also going to be visualizing some geoJSON data or if for some other reason you have already the exact coordinates at hand.

   

Approach 1: Assign location visually

Select the option "Assign location visually (georeferencer)":

The default view is the "Side by side" view, which is the best view to use for this task. You will see both a world map and the illustrated map next to each other, and identify same exact locations/features on both of them. MapTiler will use these points to the georeference the image correctly.

Start by zooming to the right location.

Select a notable, clear feature on the world map. Make sure this feature is something that was drawn exactly on the illustrated map. Buildings and streets are good landmarks to use for that. Click on that feature and move the aim to the exact location. The more exact you can be at this, the better the results will be.

Select the same point on the illustrated map and move the aim to the exact location.

Once you are happy, click somewhere else on the map to save the points. These are now saved as your first coordinate pair.

Repeat the process for a few more points. It's a good idea to use points that are in different parts of the covered area. It's good to do at least 5 coordinate pairs.

When you are done, click on "Continue" on the bottom-right corner.

Approach 2: Using readymade coordinates

It may be that you already have the coordinates, for example because you have been utilizing QGIS in the project already. Then the easiest approach is to select "Corners (East1 North1 East2 North2 East3 North3)

If you are using QGIS, save the corner coordinates of the illustrated image in this order: left-top, right-top, right-bottom. Export them in 3857 projection. The coordinates are then in the right format to be posted here.

Search for the correct projection (3857):

After either approach:

Either you use approach 1 or 2, you will end up in this view:

Note: if you have multiple venues that you need to visualize in the same project, just click "Open a file" and add them here.

The above settings are correct, if your illustrated map is a square or if the area that should be transparent is transparent already.

If you need to add in transparency, select Transparency: Select a colour and select the correct colour on the map image.

Select option "Folder with tiles" and click "Continue".

Change to these settings: You can even use max zoom 22 if you want to enable zooming even closer. And min zoom 10, if you want to enable even further zoom.

Click Render to select the folder, where you want to save the project. The rendering will then start. The rendering time depends on the size of the image and the processing power of your computer. If the file is very large, the processing may take even a couple of hours.

Once the rendering is done, the result will look like this, with each zoom level as their own folder:

Now you need to host these tiles on your selected hosting service. As a part of standard deliveries, Proximi.io will also take care of the hosting.

Connecting the map tiles to your Proximi.io account

Navigate to Developer info ► Config and fill in your tile URL. The format needs to be:  https://your_tile_hosting_address_here/{z}/{x}/{y}.png . Rest of the fields can be left empty.

That's it!

Note that you sometimes want to block the angle, pitch, zoom levels etc for your project - especially if you have created the map from an isometric angle. This is done on the application level. Therefore you will still be able to rotate and move the map in the wayfinding view.

Additional tips:

You might want to hide some parts of the map tiles temporarily, e.g. due to renovation work going on, or part of the venue being closed seasonally. 

You can use the polygon tool on the Wayfinding view to create these. 

1. Create a polygon as usual: 

   

2. Ensure that "routable" is disabled and "segment" is enabled: 

   

3. Edit the style of the project, following these instructions. Add a new style layer, and call it for example "blocked". Determine the colour as you please. Either grey or black with some opacity tends to look good.
4. Make another API call extracting the features of your project. For the correct polygon, add in  "type": "blocked", and post an update: 
5. And you are done! 
6. The polygon can be edited or deleted in the Wayfinding view if needed.