Skip to main content

Explore our maps

Read this first
  • Make sure you completed the installation process, if you ran into issues try following the installation guide.
  • Did you already create an app template in one of the previous tasks? Then you can continue to implementing the map.

Set up the app template​

When you start creating a new app the first thing you need to do is to create an app template. The required steps depend on the chosen installation method.

Would you like to watch a short video?

  1. Create a new folder for your app

    Add a new folder in your filesystem (e.g. C:\Users\<username>\viktor-apps\my-app) and open it in your code editor of choice

  1. In your terminal enter the following command and hit enter:

    viktor-cli create-app --app-type editor

    This will make all the necessary files in your app folder for you.

  2. Install the app and it's dependencies and start it in your development workspace by using the following command in the terminal:

    viktor-cli clean-start

    If all went well, your app is installed and running in your development workspace:

    INFO    :  __      __ __  __  __
    INFO    :  \ \    / / | | | |/ /
    INFO    :   \ \  / /  | | | ' /
    INFO    :    \ \/ /   | | |  <
    INFO    :     \  /    | | | . \
    INFO    :      \/     |_| |_|\_\
    INFO    :   _______   ____    _____
    INFO    :  |__   __| / __ \  |  __ \
    INFO    :     | |   | |  | | | |__) |
    INFO    :     | |   | |  | | |  _  /
    INFO    :     | |   | |__| | | | \ \
    INFO    :     |_|    \____/  |_|  \_\
    INFO    : VIKTOR connector vX.Y.Z
    INFO    : VIKTOR SDK vX.Y.Z
    INFO    : Connecting to platform...
    INFO    : Connection is established: <URL>  <---- here you can see your app
    INFO    : The connection can be closed using Ctrl+C
    INFO    : App is ready

    Do not close the terminal as this will break the connection with your app.

  3. Open your development workspace if you are not in it yet

    You can now navigate to the URL shown in the terminal (as highlighted above), and enter your Development workspace by clicking the open button.

Add a map to your app​

Restarting your app
  • The app will update automatically after adding your code and saving the app.py file, as long as you don't close the terminal.
  • Did you close your code editor? Use viktor-cli start to start the app again. No need to run the install and clear commands.
  • Once your app is started you will be able to interact with it in your Development workspace

In this section we will be displaying interesting data on a map, and we look into some interactive features that VIKTOR offers out of the box!

Open app.py, this is where we will place all the code for our app. Before we start building the app let's add all the imports to the top of the file:

from viktor.parametrization import ViktorParametrization, Text, GeoPointField, GeoPolygonField
from viktor.views import MapPolygon, MapResult, MapPoint, MapView

Let's begin the app building process by adding a simple map that we can look around, and use to zoom in on our favourite cities. In the Controller class we can add the highlighted block of code below.

class Controller(ViktorController):
    label = 'My Entity Type'
    parametrization = Parametrization

    @MapView("Map", duration_guess=1)
    def starter_guide_map(self, params, **kwargs):
        features = []
        return MapResult(features)

After adding the code to your app open your development workspace and click the Map tab. You will notice that with just 4 lines of code, we created our own map!

Add some places of interest​

Before we make it interactive, let's add some features to make it more interesting. You may copy list of features from the snippet below. You only need to add or change the highlighted lines of code.

class Controller(ViktorController):
    label = 'My Entity Type'
    parametrization = Parametrization

    @MapView("Map", duration_guess=1)
    def starter_guide_map(self, params, **kwargs):
        features = [
            MapPoint( 52.5200, 13.4050, title='Berlin, Germany'),
            MapPoint(47.6062, -122.3321, title='Seattle, USA'),
            MapPoint(53.3498, -6.2603, title='Dublin, Ireland'),
            MapPoint(43.6511, -79.3470, title='Toronto, Canada'),
            MapPoint(41.3851, 2.1734, title='Barcelona, Spain'),
            MapPoint(-34.6037, -58.3816, title='Buenos Aires, Argentina'),
            MapPoint(-33.9249, 18.4241, title='Cape Town, South Africa')
        ]
        return MapResult(features)

If you refresh your browser you will see that markers have been added for each city in the list. You can click on a marker to inspect the name of the city.

Let's make it interactive!​

To make an app interactive, you can add inputs to the Parametrization class. No need to make a new class, simply add the fields and titles underneath the class you already have. We will add a title to our parameters using the Text class, and we will add two map parameters. The first is a polygon, we can use the GeoPolygonField which we imported at the start. Then we will do the same for a point! You only need to add the highlighted lines of code.

class Parametrization(ViktorParametrization):
    text_map = Text('## Map inputs')
    map_polygon = GeoPolygonField('Draw a polygon on the map')
    map_point = GeoPointField('Add a point to the map')

If we want our changes to become visible on the map, we need to add them to the features just like we added the list with cities. The inputs you defined on the Parametrization are passed to the MapView method with the params argument. For example, to use the value of the GeoPointField you can reference it by its variable name params.map_point. Since the map_polygon and map_point need to be selected by a user first, we will use an if-statement to check if something has been selected and use that to make the polygon/point on the map! Let's also change the color of the point we select to blue so that we can distinguish it from all the other points we made earlier! You only need to add or change the highlighted lines of code.

class Controller(ViktorController):
    label = 'My Entity Type'
    parametrization = Parametrization

    @MapView("Map", duration_guess=1)
    def starter_guide_map(self, params, **kwargs):
        features = [
            MapPoint( 52.5200, 13.4050, title='Berlin, Germany'),
            MapPoint(47.6062, -122.3321, title='Seattle, USA'),
            MapPoint(53.3498, -6.2603, title='Dublin, Ireland'),
            MapPoint(43.6511, -79.3470, title='Toronto, Canada'),
            MapPoint(41.3851, 2.1734, title='Barcelona, Spain'),
            MapPoint(-34.6037, -58.3816, title='Buenos Aires, Argentina'),
            MapPoint(-33.9249, 18.4241, title='Cape Town, South Africa')
        ]
        if params.map_point:
            features.append(MapPoint.from_geo_point(params.map_point, color=Color.blue()))
        if params.map_polygon:
            features.append(MapPolygon.from_geo_polygon(params.map_polygon))
        return MapResult(features)

When you refresh the browser you should now see the inputs appear on the left and the same map we made earlier on the right. You can now select the pencil icon to create a polygon on the map.

Next we can add a blue marker to the map by clicking the location icon and placing it on the map. The result will look similar to the image below.

You now know how to add basic maps to your VIKTOR app.

If you want to start learning more about what you can do with maps, feel free to try out the full tutorial.

Continue the next section or come back tomorrow to spread the workload!