Using Multiple Markers

Using Multiple Markers

Return to Configuration Overview

Often the data that you want to map may fall into several categories and you want the marker for each location to represent the category. This is supported with the Virtual Map View Web Part.

baseball field list cropped.pngAs an example for these instructions, consider a SharePoint list that stores information about baseball fields in the USA.

You want to display National League parks with one marker type (Nmarker.png) and American League parks with another (Amarker.png).

Follow these steps to configure your map with multiple markers:

Step Action
1.

use multiple markers.pngIn the tool pane of the Virtual Map View, check the Use Multiple Markers box to use multiple marker types to denote different types of data (i.e., one marker for American League baseball parks and another marker for National League parks).

A selection list will appear next to the Use Multiple Markers box; it contains all the columns from the selected Data Source. Select the column from the data source that stores the value to determine the marker type to use.

In our example using the Baseball Fields list, this column is League.

2.

Next, you need to specify which marker to user for each value of the Use Multiple Markers column selected in Step 1 above. If you want to use custom markers, create them first.

NOTE: It doesn’t matter which Marker Type you select when planning to use multiple markers.

icon editor page.pngClick the Edit button next to the Marker Type field. An edit window appears.

For each Marker that you want to display on the map, edit the associated tag to update the MarkerType value. MarkerType should equal the value of the Use Multiple Markers column that is associated with that marker.

In our Baseball Fields example, the Use Multiple Markers column is League. The League column is set to either American League or National League for each baseball park in the list. For this baseball field example, we created two custom markers, one called NL for National League and the other called AL, for American League. After updating the MarkerType value for each, the tags for those two markers look like this:

 <AL IconName = "Amarker.png" IconWidth = "45" IconHeight = "45" MarkerType = "American League" />
 <NL IconName = "Nmarker.png" IconWidth = "45" IconHeight = "45" MarkerType = "National League" />

When edits are complete, click Save to save changes and close the edit window. Otherwise, click Cancel to close the window without saving any changes.

3. After clicking Apply and then OK in the tool pane, a portion of the configured map will look like this:
baseball final example.png

Return to Configuration Overview

Using Marker Tabs

Using Marker Tabs

Return to Configuration Overview

popup tab display1.pngThe Marker Tabs appear when a marker on the map is clicked. An example with two tabs (General and Stats) configured is shown here.

NOTE: The Bing MapTM display shows the pages of the popup slightly different than the Google MapTM display. The one shown here is the Bing MapTM display.

Other popup1.pngAnother pop-up display, called Item Description, appears when the end user hovers over the list of items on the left side of the Virtual Map View display. An example is shown here.

To configure both displays, follow these steps:

Step Action
1.

tab titles1.pngIn the Virtual Map View tool pane, decide how many tabs you want to use. Enter a Title for each.

NOTE: If you don’t want to use a tab, leave the Title blank.

In the example shown here, we use two tabs and label them General and Stats.

2.

example with two tabs with num.pngNext, decide what column values from the list to display on each tab.

  1. Select a column from the Available Columns list that you want on the first tab. All columns from the list should be displayed.
  2. Click on the arrow > button to move the column from the Available Columns list (left box) into the Display Columns list (right box) and it will be positioned under the first tab.
  3. For subsequent tabs, highlight a tab label in the Display Columns list on the right side before selecting an available column and moving it to the right. It will be positioned beneath the highlighted tab.

To remove a column from the Display Columns list, select the column from the list, and click the left arrow button. The column you highlighted will be removed from that list.

To move the columns up or down once they appear in the Display Columns list, highlight the column in the Display Columns list and click the up (up arrow.png) or down (down arrow.png) arrow. The highlighted column will move one position.

NOTE: You cannot move a column from one tab to another; you can only shift positions of columns within the tab group. To move a column to another tab, remove it from a tab group and follow the procedure above to move it into the appropriate tab group.

3.

column alias1.pngRename a displayed column. Sometimes the actual column name may be too long or not descriptive. Rather than displaying the actual name of the column, it is possible to use a column alias for display in the marker tab on the map.

To create an alias, double-click on the column name in the Display Columns list. An Edit Column Name section appears below the web part highlighted in bright pink. Type the new name in the Rename to field. click Save to save your change. After saving the column name, you will see it change in the Display Columns window.

NOTE: The column is not renamed in the source list. This change is only an alias used on the map display.

4.

Other popup1.pngThe order of the tabs and columns configured for the Marker Tabs in Step 3 impacts the order that columns appear in the Item Description pop-up shown here. The tab Titles don’t appear here, but the columns do.

NOTE: If the column appears in the Marker Tab, it also appears in the Item Description pop-up. If you created a column alias, it will appear in both pop-ups.

Return to Configuration Overview

Select a column to display

Select a column to display

Return to Configuration Overview

Follow these steps to configure the left side display of the Virtual Map View:

Step Action Result
1. Select a column to display in map. Select a column name from the drop-down list to be displayed in the Map View under the Select View option.

tool6a.png

The column you select here shows up on the interface here.
column to display.png
2.

Records per page. You can specify the number of records to be displayed on the map. The additional records can be viewed by the Next and Previous buttons at display time. If this value is left blank, the web part default is to display 20 records at a time.

tool6b.png

Icon-Tip Displaying icons in pages may speed you page load times since only the items in the first page are loaded initially.

If your list has more records than your limit, the web part displays numbers next to the navigation drop-down menu to help navigate to more records.

Icon-Tip To display all the icons, regardless fot he Records per Page, select View All from the selection list at the bottom of the list.
view all.png

Return to Configuration Overview

Overview of Virtual Map Configuration

Overview of Virtual Map Configuration

shadow HW31 toolpane with 8 numbers.png Configuring Virtual Map View offers a variety of options from the type of data source to the type of maps and markers to display.

Each of the sections within the configuration tool pane window is divided for ease of use when configuring the web part.

  1. Data Source for Virtual Map View
  2. Geocoding
  3. Select the Map Provider and choose a marker type
  4. Use Multiple or Custom Markers
  5. Using Marker Tabs
  6. Select a column to display and the number of items per page
  7. Language
  8. CSS for Virtual Map View

Select the Map Provider and Marker Type

Select the Map Provider and Marker Type

Return to Configuration Overview

Select Google MapsTM or Bing MapsTM web services option to display your data source. Depending on the selected web services, you can choose a default view from the available options listed in the Default map view drop-down (such as road map, satellite imagery, or street map with terrain for Google Maps).

NOTE: Select Virtual Earth (the earlier name of Microsoft’s mapping platform) to use Bing MapsTM.

Once you have selected a provider, use the table below to configure the available parameters specific to the provider.

Google MapsTM Bing MapsTM
Default Views Select the view to display as a default when users arrive at the page. Once on the page, users can choose other views. default views for google.png
Street Map example:google map view without terrain1.png
Satellite Imagery example:google sat view with labels1.png
Street Map with Terrain example:google map view with terrain1.png
default views for bing.png
Road View example:bing road view1.png
Aerial View example:bing arial view1.png
Display Options Choose the marker type for the displayed locations.

MarkerType.jpg

  • Default default marker.png
  • House house marker.png
  • Plus plus marker.png
  • Point point marker.png
  • Sun sun marker.png
  • Red red marker.png
  • Blue blue marker.png
  • Yellow yellow marker.png

Icon-Tip If none of these markers suit your situation, you can create your own marker. See Create your own marker for more information.

To show you the differences, we have included a few sample views below:

DefaultDefault.jpg
This is the default marker on a street map.
House Marker
House.jpg
Notice when selecting the street map with terrain, you see buildings and trees within the view.
Top
Point marker on street maps
VE-Point.jpg
This view uses a Point symbol on a street map; this map is a Virtual Earth map or Bing map. Below is a Google map using the Point marker as well. GooglePoint.jpg
Point Marker on Satellite Views
PointOnAerial.jpg
Using the Point marker on a satellite view may not be bad, but consider your end users zooming in on this map. Point.jpg
A Point marker may not work best for a close-up view with buildings; it blends in and becomes less visible.
Top
Sun Marker
Sun.jpg
A Sun marker on a street map may be a good marker to use.
Red Marker on Satellite View
Red.jpg
Choosing satellite terrain, does not give as much detail in the view.
Top
Blue Marker
Blue.jpg
A Blue marker helps pinpoint a location on a street view.
Yellow Marker on Street View
Yellow.jpg
This view uses a Yellow indicator on a street view that is very close up. These are the choices made on the tool pane to get this view:
Choices.jpg
Top

Return to Configuration Overview

Geocoding

Geocoding

Return to Configuration Overview

Geocoding is the process of finding associated geographic coordinates (i.e., latitude, longitude) from other geographic data, such as street addresses. In order to display data on a map, some geographic information is required. If your data contains address information only, the mapping service you select will perform the geocoding to convert the addresses to geographic coordinates. Sometimes geocoding results vary, depending on the service used.

Icon-Tip If you have latitude and longitude information for your data points, your map may display more quickly since no geocoding is required. Geocoding is performed to generate the latitude and longitude for the addresses provided.

hw31032_2013.jpgRegardless of your data source, select the columns for Address, City, State/Province, and Country/Region. If your data already contains geographic coordinates, select the columns that contain Latitude, Longitude, and optionally, Altitude.

Icon-WarningIMPORTANT: If you configure list columns for Longitude, Latitude, and optionally Altitude, these coordinates will be used for mapping and Address, City, State, and Country information will NOT be used. It is not necessary to configure Address/City/State/Country if you have configured Longitude/Latitude/Altitude. If a location has address information but no values for Lat/Long and the Longitude/Latitude/Altitude was configured in the web part tool pane, the location will not be plotted. In other words, it is not currently possible to map some locations using Lat/Long and others using address information.

Icon-Tip If you map using geographic coordinates (i.e., latitude, longitude) you may consider displaying address information on the map using marker tabs.

Longitude is Eastward: Indicates whether the coordinates for longitude are east (selected check box) or westward facing (unselected check box). The default is westward facing.

Return to Configuration Overview

Data Source for Virtual Map View

Data Source for Virtual Map View

Return to Configuration Overview

Select whether you would like to display data from:

See the configuration details of each option below.

SharePoint List

hw31028_2013.jpgSelect this option to access the available SharePoint lists/libraries on the current site.

NOTE: You can pick only lists from the site where the web part resides.

Fill in the following fields in the Select List to Display in Map option:

  • List: Select a SharePoint list or library where the data to be displayed resides.
  • Default View: Select the default list view that includes the data users see when the web part is first accessed.

    Icon-Tip Specifying a list view with a filter is a way to display a subset of all the items in the list/library.

The displayed data can be filtered by end users on-the-fly using one or more views in the Runtime Filtering Views drop-down list by checking in the Allow Runtime Filtering box. When this box is checked, additional configuration parameters appear:

  • Available Views: Shows all the views for the selected list or library. Select the view(s) from this column and click the right arrow button to move it to the Runtime Filtering Views column.
  • Runtime Filtering Views: The Select View drop-down in the web part user interface shows the list views selected in this box. End users can click the views displayed to control the data that is displayed on the map.

Icon-Tip Typically, the views made available for runtime filtering are those that filter the display. Using runtime filtering is a way to reduce the number of items displayed in each view to potentially increase performance if there are lots of points to be mapped.

Top

SQL Server Table or View

hw31030_2013.jpgSelect this option to indicate whether or not to use a SQL Server Table or View

  • Use Trusted Connection: Select this check box if you are connecting to a database that resides on the same SharePoint Server. If you select this option, you only need to provide the name of the Server, click Show Databases, and then select the database from the Database drop-down list.
    • Server: Type the name of the server you want to connect to.
    • Show Databases: Click this button to populate the Database drop-down list.
    • Database: Select the database you want from the drop-down list.

not a trusted connection1.pngIf you want to use a database located on another server, and thus, will not use a trusted connection, additional configuration parameters will appear:

  • User Name: Type the user name of the access account who has read permission to the database specified in the Server field.
  • Password: Type the password for the access account who has access to the database specified in the Server field.

Select table or view.pngIn the Select Table or View to Display in Map section of the tool pane, choose the Table or View that contains the data to be displayed on the map.

Top

MashPoint/BDC

hw31_MashPoint_new_2013.jpgSelect this option to access databases, web services or Custom Providers through Bamboo MashPoint or with a source configured via Microsoft Business Data Catalog (BDC).

Once MashPoint/BDC is selected, the Select Entity to display in map box appears in the tool pane.

hw31_ExtType_new_2013.jpgTo select the entity from the available content types, click on the Select External Content Type icon (Select External Content Type icon.png) to open the External Content Type Picker window where you can find the external data source with the data to display on the map. Select the appropriate one and click OK to close the window.

Alternatively, enter the name of the source in the Select Entity to display in map box and click the Check External Content Type icon (check external content type icon.png) to make sure you entered it correctly.

Top

Return to Configuration Overview

CSS for Virtual Map View

CSS for Virtual Map View

When configuring the web part, the bottom of the configuration tool pane contains a button to customize the style sheet. With a few minor updates to the style sheet, you can change the user interface to match elements of your corporate brand. The style sheet for the Virtual Map View allows you to control how the map is displayed to users. This section shows each of the main Map View sections and lists the corresponding style sheet parameters that control the section’s presentation in the web part.

CSS.jpgTo access the style sheet editing option in the tool pane, select Custom CSS from the Select a Style Sheet drop-down button, and then click Edit. The style sheet editor opens.

Class Name Sample
VirtualMapViewBackground hw31052_2013.jpg
This is the background for the web part; use hexadecimal color codes to update the color.
VirtualMapViewToolTipBody ToolTipCode.jpg
Tool tips appear when a user hovers over a selection on the left navigation. In our example we changed the background color to green and the font to red; use colors that are relevant to your corporate brand.
ToolTipColors.jpg
VirtualMapViewWPHeader hw31056_2013.jpg
VirtualMapViewEditItemName hw31058_2013.jpg
VirtualMapViewTD hw31060_2013.jpg
VirtualMapViewInfoWindowTabs (for Google Map) hw31062_2013.jpg
VirtualMapViewNoWrap (for Google Map) hw31063_2013.jpg
VirtualMapViewInfoBox (for Bing, which was previously called Virtual Earth) hw31065_2013.jpg
VirtualMapViewTitle (for Bing, which was previously called Virtual Earth) hw31067_2013.jpg
Virtual Earth Limitation hw31077_2013.jpg
You cannot change the font size of text in these tabs.
Google Map Limitation hw31071_2013.jpg
You cannot change the font size of text in these Tabs.

Create your own marker

Create your own marker

Return to Select the Map Provider

If the markers provided out-of-the-box with the Virtual Map View Web Part aren’t sufficient for your situation, you can create your own markers. See an example of a map with customer markers here.

Follow these steps to add a custom marker:

Step Action
1.

Create icon files for your custom markers using your preferred graphic design tool. The supported file formats are GIF, JPG, and PNG.

Icon-Tip The recommended size for the markers is 18 to 48 pixels square.

2.

Copy your marker icon files to the resource directory on your SharePoint server(s). The resource directory is typically found at this path:

c:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions
   wpresourcesBamboo.VirtualMapViewxxx

Where xxx is a code for the version of the product you have installed.

Icon-WarningIMPORTANT: The files will need to be copied to all Web Front End (WFE) servers that run the Microsoft SharePoint Foundation Web Application.

Icon-Tip You will know you are in the right place when you see the files for the out-of-the-box markers (i.e., house.png, plus.png, default.png)

Icon-WarningIMPORTANT: Don’t overwrite the existing, out-of-the-box markers. They will be updated when you upgrade your Virtual Map View web part. Always give your custom markers unique names.

3.

edit for custom marker.pngIn the web part tool pane, click Edit next to the Marker Type selection. A window will appear where you can edit information about the available marker types.

icon editor page.png

For each marker available, there is an XML tag like this:

<House IconName = "house.png" IconWidth = "32" IconHeight = "32" MarkerType = "1" />

You need to edit the code in the window to add a tag for your custom marker and insert it in the file before the ending </Icons> tag. As an example, consider a custom marker called Amarker.png that is 45 pixels wide and 45 pixels high. The tag for it would be:

<AL IconName = "Amarker.png" IconWidth = "45" IconHeight = "45" MarkerType = "1" />

Where:

  • MyCustomMarker is a name of the marker type. It will appear in the Marker Type selection list.
  • IconName is the filename of the icon file
  • IconWidth is the width of the image
  • IconHeight is the height of the image
  • MarkerType is used if you are displaying multiple markers on your map

    Icon-WarningIMPORTANT: Unless you are using multiple markers, it won’t matter much what you set Marker Type to. However, it is best to set it to a value that hasn’t been used in any of the other marker type tags in the file.

Once the new tag is added, click Save to close the window and save your change. Otherwise, click Cancel to close the window without saving any changes.

4.

custom marker is selectable.pngOnce the tag for your custom marker is saved, it will be available in the Marker Type selection list. Select it in order to see it displayed on your map.

Icon-WarningIMPORTANT: Although the custom marker file has been copied to the SharePoint server(s), only the current instance of the Virtual Map View knows about it. To use this custom marker in other instances, repeat Steps 3-4 for those instances.

Return to Select the Map Provider