CN

One of the great new features in MashZone 2.0 is the possibilty to embed maps from Google Maps into a MashApp. This provides you with an extended form of viewing maps. Using the longitude and latitude, MashZone helps you find locations for display on the map. It is also possible to highlight the defined positions with the typical Google Maps pop-ups and flags. In this tutorial I will create a sightseeing MashApp, that represents the sights in Paris, London and Berlin.

Before we start, we have to overcome a few obstacles. We need a Professional or an Enterprise license that can be ordered at release, in order to incorporate Google Maps maps. We also need the API key provided by Google. Without this key it is not possible to select a Google Maps map in the MashZone Composer and then display it in the MashApp.

Now, we will switch to the administration area and open the server settings. The new option "Google Maps API key" appears, where we are asked to enter the API key.

To do so, we open the link "Register for Google Maps API". The following window is displayed:

First, accept the terms and conditions. The most important rule here is that the map material must be publically available for everyone. Of course, it is possible to create private MashApps, however a Google sales representative must be contacted before doing so.

In addition, we must enter the web site the MashZone server is active on. After reading and accepting the conditions, we click on "Generate API Key". We then receive a key that is unique for the domain as output. This key remains the same every time it is generated.

After successfully generating the key we open the feed editor. Once there, we select an Excel source and load the prepared file. It contains different locations with the respective zoom level and the longitudes and latitudes.

How do we get the coordinates we need? Unfortunately, Google Maps doesn't display them automatically. I have however, found two pages that make it easy to find exact positions. Simply open http://www.getlatlon.com/ or http://www.brandt.ch/bcc_geocoding.html, enter the desired address and the current geoinformation is displayed. If you keep the mouse button pressed on the map you can change the position and receive the geoinformation for the respective point on the map.

 

Now we can create an Excel table that for example, may look like this:

Each row stands for a certain point on the Google Maps map. It contains a position name, that is ideal for display in the tooltip. Of course, it is also possible to enter other values, such as the KPI. In addition, there are two columns with the latitude and longitude. Both coordinates are required to display a position.

If the standard settings are activated MashZone automatically zooms to the specified location. This can be circumvented by deactivating the setting and then setting the zoom level manually in the data feed. Please note that a value range from 1 – 18 is provided. However, for some cities images with a higher resolution may be available, which is why you can also enter higher values.

You could, for example create a selection box where the user can select directly from various zoom levels. Or, as in this example, you can use the manual entry if the automatic settings don't meet your requirements.

In order to switch from one sight to the next like a slide show, you must use a spin control and filter its name with the name of the Google Maps map. In the settings for this you can automatically start the selection and then have it change every few seconds. To allow the user to switch between cities you can insert a selection box that compares the current city with the city in the spin control.

 

Here is the final result:

For Fullscreen, click here.

Note: See this post for a list of other articles about MashZone 2.0. You might be also interested to join the ARIS MashZone group at ARIS Community.

File attachments
by Tobias Blickle
Posted on Wed, 09/15/2010 - 09:44

This is more than awesome! The MashApp live in the post! Really brilliant!

0
by Christian Neu Author
Posted on Wed, 09/15/2010 - 10:34

Yes, indeed! You can also remove the MashZone branding border and only display your mashup.

0
by Joerg Klueckmann
Posted on Wed, 09/15/2010 - 10:42

Hi Chris, this is really cool. Eric would have needed this last friday ;-)

0
by Roy Batista
Posted on Tue, 06/05/2012 - 17:49

Hi Christian,

I'm new at MashZone. Is it possible to change the makers of the map for one personalized? :)

thanks 

0
by Colleen Maxwell
Posted on Fri, 10/05/2012 - 04:17

This is a great app. I have a need to creat a few world maps with the regions colored in green. 

Nouth and South America

EU 

North America and the EU

I see how this can be done with Lat and Longs but is there a wy to create one without putting in 1000's of points?

Thanks, 

Colleen

 

0

Featured achievement

Rookie
Say hello to the ARIS Community! Personalize your community experience by following forums or tags, liking a post or uploading a profile picture.
Recent Unlocks

Leaderboard

|
icon-arrow-down icon-arrow-cerulean-left icon-arrow-cerulean-right icon-arrow-down icon-arrow-left icon-arrow-right icon-arrow icon-back icon-close icon-comments icon-correct-answer icon-tick icon-download icon-facebook icon-flag icon-google-plus icon-hamburger icon-in icon-info icon-instagram icon-login-true icon-login icon-mail-notification icon-mail icon-mortarboard icon-newsletter icon-notification icon-pinterest icon-plus icon-rss icon-search icon-share icon-shield icon-snapchat icon-star icon-tutorials icon-twitter icon-universities icon-videos icon-views icon-whatsapp icon-xing icon-youtube icon-jobs icon-heart icon-heart2 aris-express bpm-glossary help-intro help-design Process_Mining_Icon help-publishing help-administration help-dashboarding help-archive help-risk icon-knowledge icon-question icon-events icon-message icon-more icon-pencil forum-icon icon-lock