Description

The Map Collection enables you to display a fully interactive world map with customizable points of interest. Each point of interest is assigned a specific latitude and longitude coordinate and can be represented by any Intuiface component including buttons, assets and other collections.

Two map providers are available: Mapbox and Bing Maps.

• Mapbox is a front end to Open Street Map, requires a personal account and permits highly detailed map and satellite views plus the ability to create custom maps and map styles. For more about Mapbox, see this section below.
• Bing Maps requires a license key from Microsoft and permits map and satellite view with 20 levels of zoom as well as a choice of language options for labeling map locations. For more about Bing Maps, see this section below. NOTE: Intuiface always displays the international version of Bing Maps, not region-specific maps that may show different names or borders.

In the following graphic, Image Buttons are used to label geographic coordinates. In the Map collection, any asset or collection can be assigned to geographic coordinates. Coordinate assignment can be created manually via drag-and-drop, imported from Excel or assigned via cloud-based resources.

Selecting a Map Provider

Using Mapbox

Creating a Mapbox account and token

The use of Mapbox map services requires an "API access token", a series of numbers and letters representing your personal Mapbox account. Without this token all maps in Intuiface will display the message Invalid Access Token.

To create a Mapbox account and generate an API access token, sign up here for their Pay-As-You-Go plan. After account creation, you will find your token here.

In Intuiface, enter your token in the Access token field of the Mapbox section in the Appearance properties category.

NOTE: If you decide to include Mapbox in an Intuiface-based commercial experience - i.e. an experience you sell with your own API key embedded - then you should convert to a Commercial account at Mapbox.

Map styles

Mapbox enables you to create your own maps and map styles.

If not using a custom map or map style, simply set the Display Mode property to a map or satellite view.

You can also use pre-defined styles

• mapbox://styles/mapbox/dark-v9
• mapbox://styles/mapbox/streets-v9
• mapbox://styles/mapbox/outdoors-v9
• mapbox://styles/mapbox/light-v9
• mapbox://styles/mapbox/satellite-v9
• mapbox://styles/mapbox/satellite-streets-v9

Creating your style

Once you’ve created your account, head to Mapbox Studio.

Here you will find all the styles you’re going to create for your maps.
Click the [New Style] button in the top right. This will open a new window:

 

Mapbox offers you a list of prebuilt templates, each with some variation options (at the bottom). You can also start with a Blank template.

Let’s pick the Monochrome+Gold variation. Notice how you can preview the map on the right-hand side. Click the [Customize Monochrome] button.

 

Here you will be able to customize almost everything, from colors to font to deciding what you want to display or not.

Recommendation: On the top left, rename your Style to something relevant for you or it will have the same name as your Template. I renamed mine to “Old Scroll”.

In the left-hand menu, you can customize Components at a “macro” level or fine-tune a Layer.

 

The possibilities are infinite and only limited by your creativity and time!

For instance, in Components, you can change the font to something more “piratish”! 

… and in Layers, I changed the water layer color to something darker.

 

Publish your creation

Once you’ve made your modifications, notice how the Publish button in the upper right-hand corner is enabled. Click it.

After a quick preview, you will be asked to confirm your Publish. Just press the appropriate button.

 

Now your list has been updated and your new Style will appear on top.
Click the vertical 3 dots icon found at the end of the row for your new style to reveal options.

 

Here you will find your Style URL. Press the button to copy it into your clipboard. That’s what we’re going to use in Composer.
For instance, the Style URL I just created looks like this:
mapbox://styles/alexiscamacho/ckpfm8qnc1czj17qq06nc1ywm
And as I made it public via the menu mentioned previously, you should be able to use it in Composer too.

Use your freshly created Style in Composer

Add a Map Asset to your scene.
In Map Properties, under “Style URL”, paste in the URL you grabbed in the step above

 

Then add your Access Token (you can find it here 1) to get rid of the Map Collection warning message.

Voilà, here’s your new map with a custom style!

If you want your “Old Scroll” map feel even more Pirate, head to:

• Latitude 19.1711128597815
• Longitude -71.7242431640625
• Zoom 8.7

Using Bing Maps

The use of Bing Maps requires a license key provided by Microsoft. Without this key:

• on Windows: All maps will display the message Invalid Credentials.
• on iPad, Android and Samsung SSP: All maps will be blank.

In some cases this license key can be provided free of charge. It depends on the way you intend to use Bing Maps and on the status of your company.

Please visit the following sites to get more information about the acquisition of Bing Maps licenses:

• How to create a Bing Maps account
• How to get a Bing Maps key
• Bing Maps Portal for creating accounts and keys

Once you have an Account ID, use the Bing Maps “Create or View Keys” option to produce a license key. The key consists of a long series of numbers and letters. Enter your key in the Bing Maps key field in the Appearance properties category of the Map collection.

How to add a point of interest to a map

Every button, asset or collection added to a map inherits two new properties: Latitude and Longitude. These properties appear in the General Properties panel at the top of the*Properties panel.*

These Latitude and Longitude properties can either be manually specified directly in the Properties panel or linked to an outside source through the use of binding. With binding, the location of your points of interest do not need to be known at design time.

Outside data sources can be accessed through an Excel file, a .Net DLL or a REST Web Service

You can open a Sample directly in Composer.

How to pan and zoom a map

While in Edit Mode, a double-click on the Map collection will enable you to interact with the map directly. Left-click-and-drag to pan the map, use your mouse wheel to zoom in and out. This is a quick method for setting up the exact view your require in your map.

To ensure map interactivity while in Play Mode, make sure the map's Container property is set to Static or to Pin with the Pinned button active.

Supported geocoordinate formats

There are multiple geographic coordinate notation systems, from E6 notation - e.g. 40782710,-73965310 - to Degrees-Minutes-Seconds (DMS) notation - e.g. N40°46′57.756″ W73°57′55.116″. (These two previous examples represent the same exact location on a map.)

Manual entry of latitude and longitude coordinates for a map or map item in a Map Collection, using the Properties panel, must obey Decimal Degrees notation. In Decimal Degrees notation, the number of degrees is represented before the decimal point and the number of minutes and seconds is represented as a multi-digit fraction after the decimal point. For example, Central Park in New York City is found at the latitude/longitude coordinate of 40.7821987, -73.9668703.

When entering geocoordinates via binding - using Microsoft Excel, a Web API or a C# dll as the geocoordinate source - all recognized formats are supported by Intuiface. This means your data source could adopt any of the following formats (formats highlighted here in Wikipedia):

• 40:26:46.302N 079:56:55.903W
• 40°26′47″N 079°58′36″W
• 40d 26′ 47″ N 079d 58′ 36″ W
• 40.446195N 79.948862W
• 40.446195, -79.948862
• 40° 26.7717, -79° 56.93172
• N40:26:46.302 W079:56:55.903
• N40°26′47″ W079°58′36″
• N40d 26′ 47″ W079d 58′ 36″
• N40.446195 W79.948862

In fact, through binding, Intuiface's geocoordinate format support is flexible enough to extract coordinates from sentences, sentence fragments and garbled notation as long as latitude precedes longitude. Any of the following would be interpreted correctly by Intuiface if passed in through binding:

• (48.866667;2.3265)
• (51° 31' 17,54'' N,0° 4'42,85'' W)
• It's here : 38°53′42.37″N 77°2′11.64″W
• Buenos Aires (-34.608331°, -58.371151°)
• coord = (15:48:00 S 47:54:00 W)
• "N19° 25′ 57.16″; W 99° 7′ 53.89″"
• Beijing = 39903546;116387578
• S41.298734 E174.781237
• (35 d 18' 29,86" S, 149 d 7' 27,8" E)
• Parlement [S33d55'31" ;E18d25'26"]
• (-1.137387, 36.84009)
• -121.929894116772,37.3885586168933,0
• 37.4411509194609,-122.156298769629,0.0

Properties, Triggers & Actions

Properties

Triggers

Actions