Skip Navigation LinksHome > Mapped Content View control
Follow the functional description on the live demo page: Cities of British Columbia

Interactive Mapped ContentThe Mapped Content View control allows us to location-enable any generic content item and display it on an interactive Google map, with a synchronized sidebar, and relate it to other location enabled items, resulting in drill-down, multiple-level navigation. The location marker can use Google standard icons or custom icons. Labeled icons are supported and dynamically generated based on the item ordinal, from A to Z.

 

The location specific item information - such as location name, address, description, thumbnail image, directions link - is displayed on both the sidebar and marker info-window. The full item content is displayed in a maximized map info-window.

 

  • Sitefinity compatibility: versions 3.6, 3.7 (all service packs) with support for both Standard and Community editions
  • .NET Framework: 2.0, 3.5, 4.0
  • Browser compatibility: Firefox, IE (6.x and up), Chrome, Safari, Opera.
  • Current release: version 1.2 on November 9, 2010

The public view consists of four functional areas:

 

  • > Interactive Google Map: as the core component of the public view, the map is always visible. Main features are: zoom-level is set dynamically to properly fit all markers displayed on the map; returns automatically to the initial position and zoom level on closing the marker info-window; map type control; mouse scroll-wheel zoom; location info (name, address, description, thumbnail image) is shown in the marker info-window; full content displayed in maximized info-window; links are dynamically generated at the bottom of the info-window for getting directions, and navigation to related items.
  • > Sidebar : the sidebar is synchronized with the map and can be displayed on the left or the right side of the map. Main features are: on item click the item is highlighted and related marker info-window is displayed; visibility control for address; description; thumbnail image; directions link; dynamically generated drill-down links for navigation to related items.
  • > Navigation Path: implements breadcrumb-like functionality for easy navigation back to the upper-level parent categories. The navigation path is especially useful when 3 or more drill-down levels are implemented and allows for quick return to one of the previous parent views, or the top-level view.
  • > Height Optimization Link: adjusts the height of the map and sidebar in accordance with the browser window height resulting in an improved user experience.

 

The administration view, integrated with the standard forms for item creation and update, allows us to maintain all location-specific attributes:

 

  • > Summary info: location name; description, thumbnail image
  • > Child Categories: add, edit or remove categories that can be used to relate other location-enabled items to the current item and achieve drill-down navigation capabilities. A child category is displayed in the public view (marker info-window, and sidebar item) only if there's at least one item assigned to it.
  • > Parent Categories: lists all categories defined for other location enabled items and allows us to assign the current item to one or more of these categories.
  • > Map info: controls all attributes needed to display the location marker on the map: address or geo-coordinates, flags for controlling the visibility of the address and directions link on the public view  info-window and sidebar, marker icon, geo-coding and map preview. The marker icon can be a Google standard icon (dot, or labeled automatically from A-Z,  with 7 colors available), or custom. Use one of the custom icons that ship with the control (Google-like, iPhone-like, Pushpin) or create and use your own!