Create a buildingplan



  1. tariff: free
  2. con4gis brick: con4gis/maps (MapsBundle)

1. create base card

To create a building plan, you must first create a base map. The name of the base map is also the name in the Starboard, unless an alternative name is specified. Next the field georeferenced image must be selected, now you can select your image from the file manager there.

To provide the image with a georeference, please use the tool "".

With this tool you can easily place your image on the map. Open the link above and click on "Select file" and select your image from your files. Then click on "Georef" and your picture will be placed on the left half of the website, on the right half there is an OSM map.

As a simple example we use an image of the coastline of the North Sea, but it also works with images of buildings, landscapes or old maps you want to georeference.

For best results you should use the OSM overlay to see clear structures on the map. For this you can use the overlay settings from our example.

To place your image exactly on the map, click on distinctive points that are visible on both sides. You need at least two points that match on the map and your picture.

If you have chosen two points on both sides, your picture will be placed on the map. The more points you place on both sides, the more exactly the image will be referenced. To make it easier to place the points, you can reduce the opacity of your image in the overlay settings. If your image is well placed you can display the geo data by clicking on the "Georef-Button" on the left side of the screen.

Then you can copy the data and paste it into the field "JSON for georeferencing" in the backend.

If you want to map a building with several floors, you must create a base map for each floor. In step "4. Create map profile" you then merge all floors into one map profile. But more about that later.


2. create card layout

The next step is to create a card layout. In the map layout you can define the main colours of your con4gis map and design them according to your wishes. To make the layout settings effective, please click on the checkbox "Set settings globally".

Optionally, you can also store your own css files here, which are used instead of the standard.


3. create location styles

To fill the map with life, you create location styles. Here you define how individual points you create on the map are displayed. You can choose between different display styles, e.g. point, square, star or also pixel or vector graphics.

Since zoom levels and scaling are used later in the map in the frontend, vector graphics are useful for custom icons. The icon is always clearly visible and never seems pixelated. You should always specify the original size in the fields "Size of icon" first. The size on the map is then controlled by the field "Scale icon".
The "Initial zoom level" indicates at which zoom level the icon should have the maximum specified size and the "Scaling factor" describes how strongly the icon should be scaled per zoom level.

Recommendation: In order to find the perfect settings for your icon here, you should check your settings again and again in the frontend. If the size of the icon is similar to our example, you can use our settings first.


4. create map profile

Now you create the map profile. Here you have to assign the previously created card layout and the base card. As mentioned before, you can select several base cards to display buildings with different floors. If all floors are selected here, you can jump back and forth between the floors in the frontend using the base maps in the starboard.

In the map profile you can configure further settings such as navigation, starboard, map information, map search etc.. You only need the default settings for the time being.
Optional: Here you have the possibility to provide your visitors with useful functions. It's best to have a look at what you want to make possible for the people who visit your site.


5. create map structure


5.1 Create structural element for map display

Click on New map structure element, select your map profile and click on the checkbox "Use as map". Now you can define a starting point for the map, which you can select by Geopicker. Also enter a zoom level. Here you can also limit the map section so that your building is always in the section of the map.


5.2 Create a structural element to represent a location style on the map

Under this map structure element you can add your locations. Click on "new map structure element" and arrange it under the previously created map structure element, which you use as a map. Select a name and the map profile and select "single geo-coordinate" under Location.

Then select your base map on which you want the point to be displayed and position the point on your building map using the Geopicker. Now choose a location style that represents this point. You can also add information to the point by clicking on the "Activate popup" button and entering the desired additional information such as address, contact details or photos in the text field.

Note: The function "Offer route calculation in popup" is only available after installing "con4gis-Routing".


6. embed map on your page

In the last step, you will embed the card on your page. In the Contao menu item "Articles" on your desired page, create a new element with "Element type" "Map (con4gis)". There you choose your "map structure" as well as your "standard base map". If required, you can also define the "width and height of the map". After saving, your map will be in the desired position on the page.

Your building plan and your created locations will now be visible in the frontend.

Have fun with your building plan!