Map Mashup Version 7 – Beta

 

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.

Yahoo! maps are not supported in this version.

Google now restricts non-geo-coded addresses to about 10 per map. This restriction does not seem to apply to pre-geocoded addresses. Consider geo-coding your data. Caspio offers geo-coding as an add-on service.

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 "Search and Report" DataPages. Elsewhere on this site you can learn how to import data or create tables and how to create Search and Report DataPages and deploy them to your site. Ensure the following with your DataPages:

  • Parameters Enabled – On the second screen of the DataPage wizard, check the box next to Enable Advanced Options and then check the box for Enable Parameters.
  • If using geocoded fields (latitude and longitude) ensure six decimal points in your numbers. Open the Localization object used in your DataPage and in Formatting Standards change the setting of Negative number format to –n and Digits after decimal to 6. (See image below).
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 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. 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.