Map Mashup Instructions

Overview

Caspio Map Mashup guides you through the process of integrating a Google map to your site and plot address centric data from your DataPages. It gives you many customization options for presentation and interactivity.

What's New in Version 7

Version 7 is a complete overhaul of the previous map mashup. It is wizard-based, uses Google's latest API, and supports many new customization options, including:

  • Multiple DataPages plotting on the same map.
  • Use different markers based on DataPage or criteria.
  • Cluster icon for grouping overlapping markers.
  • Customizable Information Window.

Note: Google now restricts the rate which non-geocoded addresses can be plotted on a map (approximately 10 addresses per second). This restriction does not apply to geocoded addresses, so we highly recommend you geocode your data. Caspio offers automatic and bulk Geocoding Services based on your table size.

This guide helps you with the creation of your Map Mashup. Below are the general steps:

  1. Prepare your DataPage(s)
  2. Use Wizard to Configure Your Map
  3. Apply the Provided Code Segments

1. Prepare your DataPage(s)

Before starting with the map mashup you must have created and deployed one or more Report DataPages. In this online HowTo site, you can learn how to import data or create tables and to create Report DataPages and deploy them to your site. Ensure the following with your DataPages:

  • Parameters Enabled – On the second screen of the DataPage wizard (DataPage Data Source), check Enable Advanced Options and Enable Parameters.Map_mashup_guide_3
  • If you are using geocoded fields (latitude and longitude), ensure six decimal points in your numbers. Open the Localization object used in your DataPage. Under Define Localization Settings section, click Formatting Standards and Number Type. Change the setting of Negative number format to –n and Digits after decimal to 6. (See image below).Map_mashup_guide_2

Also, verify that your deployed DataPages are working properly on your web page.

2. Use Wizard to Configure Your Map

To configure your Map Mashup go to https://lib.caspio.com/MapMashup/ and log in with your Caspio Bridge credentials. The wizard is designed to be self-explanatory. Only select terms and sections that are described below.

Step 1: General Map Settings

  • "Map it" and "View on map" refer to a link that map mashup allows you add to your DataPage results for each record. Depending on your setting, end users can plotted the record or bring up the InfoWindow by clicking on the link.
  • InfoWindow is the bubble of information that can be configured to popup on the map for a given point. The content of the bubble is customizable in this wizard.
  • Marker clustering automatically replaces overlapping markers with a special icon and the number of plots in the cluster.
  • Inline CSS allows advanced users format the map container.

Step 2: Configure DataPages

  • Geo-code fields and address fields – Geo-code fields refer to a pair of latitude and longitude fields that may be in your table. If your data is not geocoded don't select any fields and instead add all your address fields to the section below. Order is not important.
  • InfoWindow content – the field you choose here will be used as the content of map bubble.
  • Different markers based on criteria – You can setup any criteria and apply a marker icon to it. For example someone who may be publishing a database of businesses may use one custom icon for Gas Stations and another for Restaurants.
  • Criteria based filtering – lets your users hide or show plots for a given criteria. Using the example above, users can choose to hide all Gas Stations if this option is enabled.

Step 3: Configure Criteria

This step only appears if you have enabled criteria based markers for one or more DataPages.

  • Criteria – you can have one or more criteria for each of your DataPages. For example using the example above Gas Stations are one criteria and Restaurants are another.
  • Filters define the records that belong to the criteria. In the examples above, here you would be setting up something like BusinessType = 'Gas Station'.

3. Apply the Provided Code Segments

On the last screen of the map mashup wizard multiple code segments are provided to you. One by one apply the code segments to the appropriate place. If you use iFrame deployment, the first code snippet should be placed in HTML Header of your DataPage results. Once all code segments are applied your map mashup should become fully operational.

Map Positioning

By default, the map displays right above your DataPage. If you want to place your map in a different area of your page, place the following code there:

<div id="map"></div>

Please refer to Map Mashup Developer Reference for details about the mashup code.

Additional Enhancements:

“Map it” link now scrolls to the map
Clicking “Map it” will now automatically scroll the page to focus the user on the map.

Improved handling for Number fields
Fixed rendering issues displaying different markers based on numbers with currency and negative number formats. Also, latitude and longitude fields are no longer truncated when set to “Number” Datatype and “String” localization formatting.

Large text display on InfoWindow
Previously, Firefox and Chrome users could not view large amounts of text displayed in the InfoWindow. The InfoWindow now automatically displays as a percentage of the total window size.

WordPress deployment
Map Mashup v7 code snippets can now be deployed within WordPress.

Known issues
When using date and numeric comparisons in the Map Mashup criteria, the date and number fields should be formatted in the DataPage localization settings as follows:

  • Decimal symbols in numbers must use a period. (.)
  • Dates should be formatted as mm/dd/yyyy. Long date formatting (Month Day, Year) is only supported for American English localization. Other formats are not supported at this time.

Questions or Comments?

Submit your ideas and feedback regarding product features in the Caspio Ideabox.