Use Case 1: Styling & Icons

This tutorial will showcase the steps to create a look-alike map with nice labels, a styleset and the inclusion of icons in M.App Enterprise.

1. Data

To begin, incorporate vector data from the provided New York datasets into M.App Enterprise. Access your Studio account, navigate to Content in the left menu, and opt for Vector Data. Click on New, choose an existing connection or establish a new one, then proceed to add the needed datasets.

In this example we choose two layers: Boroughs and Railways

For further guidance on accessing the New York datasets or importing vector data, consult the tutorials provided below.

New York Test Data - Description and Use

This tutorial aims to offer test data obtained from freely available datasets from New York. Each dataset will be explained in detail for easy comprehension. Overwiew of Data Dataset name Type airports Point boroughs MulitPolygon boroughs_label Point buildings MultiPolygon crime_2023 MultiPolygon crime_history MultiPolygon incidents Point noise Point

M.App EnterpriseMarina Lanxinger

Lesson 3: Import vector data in M.App Enterprise

This tutorial will outline the steps to import vector data in M.App Enterprise and shows the options you will have to stream your data. Preliminaries Make sure to have your spatial datasets in one of the following database management systems: PostGIS, Oracle, Microsoft SQL Server, Hana Spatial indexing is

M.App EnterpriseMarina Lanxinger

In addition to the vector data in our example, we have included HERE Map. To integrate this into our map, navigate to Geoservices in the content menu and create a new HERE Map Service. You'll need an API key from the HERE developer portal for this. Then choose a name and pick type: base, layer: reduced day, map type: map tile;

Different Geoservices in M.App Enterprise

WMS, WMTS, WFS, HERE Maps, Google Maps, ECWP and TMS This tutorial offers assistance in integrating different Geoservices in your M.App Enterprise application. WMS/ WMTS/ WFS Content → Geoservices → New → WMS/WMTS/WFS Web Map Services (WMS), Web Map Tile Services (WMTS) and Web Feature Services (WFS) are added in

M.App EnterpriseMarina Lanxinger

2. Legend

Now create a legend by navigating to the content menu again and by clicking on Legend. Make sure to include both the Boroughs and Railways layer as well as the HERE Map in your legend.

Lesson 4: Create a legend

💡Each legend created is applicable across various application types without creating specific legends for a browser app, desktop app and so on. If you logged in as a Studio Administrator you can create new legends in Content → Legend → New. In this form you have different possibilities: Left hand side Datasets

M.App EnterpriseStefan Schüttenkopf

3. Styleset

To create a new styleset, navigate to the content menu and select Stylesets.

Lesson 5: Create a Style Set

In this post you get an overview how to define the styles for your vector data. The detailed post is linked at the end First and only prerequisite to make use of the Style Editor of M.App Enterprise and subsequently changing the visual representation of the data is to

M.App EnterpriseStefan Schüttenkopf

Style Wizards

Style wizards support you to get automatically eye-pleasing styles based on attributes of the vector data. It is designated for the categorization of attributes and offers two options. Content → Stylesets → Generate To use a style wizard, navigate to stylesets in the content menu of M.App Studio and click on

M.App EnterpriseStefan Schüttenkopf

Boroughs Layer

Once in the Style Editor, open the wizard by clicking on Generate and Categorize. From there, select the Boroughs layer and Boroname as the input parameters. Accept the suggested settings and click on Generate. You will now see the boroughs of New York displayed in the map view.

Adjust the following two things:

• Set the fill opacity to 70% for each borough. To do this, click on the respective borough in the rule navigator on the left. Then change the fill opacity from 100 to 70.
• Add a rule to the rule navigator and then add a text symbolizer by clicking on the plus icons.

The text symbolizer will serve as labeling text. Click on it for more settings.

The label text will be sourced from one of the dataset's attributes. When you click on the database icon, a dropdown menu with all the options will appear. Select boroname and set the font size to 25px beside it. Additionally, select text in the halo section to apply a nice halo effect to the labeling text.

Railways Layer

Now one layer is styled, choose railways from the unstyled layers' list on the left. Tick the checkbox for Filter and type [type] = "subway" in the text field, so only subway rails are included in the visualistation. Increase the stroke width to 5px.

Add a symbolizer of type line in the rule navigator. Apply the same filter and select Dashed line in the stroke section. Choose white as the stroke color and enter 8 8 in the field Dasharray.

Finally, add a third line symbolizer in the rule navigator. Apply the same filter for subway and select Graphic stroke/External graphic in the stroke section. Add a metro icon saved as a PNG file on your drive by clicking the green plus symbol to access and upload it. Set the graphic size to 25px, define a gap of 100px, and set an initial gap of 30px.

Save all the changes and move on to the next step.

5. Map View

Navigate to Browser and MapView in the Studio menu on the left and create a new MapView.

Name your Map View, enter EPSG 26918, use the correct Legend created earlier and select the appropriate Styleset. Enable the preview and zoom into New York City to set the Bounds automatically. Save it and move to the last step.

6. Browser App

Finally, create an app and assign it the correct Map View. Detailed information on creating a browser app can be found in the following tutorial.

Lesson 9: Creating a Browser App

This tutorial will lead you through the steps applicable in Studio to create a Browser App. Map Views The heart of configuring a browser application is the Map View. In there the Studio Administrator has to define how the application should look like and what should be available to the

M.App EnterpriseMarina Lanxinger