Bing Maps – V8 Web Control
After Microsoft announced and released new Bing Map V8 Web control, Bing Maps Ajax Control V7 will no longer be supported after 30th of June 2017.
Since all current Bing maps web parts in Kentico (Basic Bing maps, Bing maps, Static Bing map) use Ajax Control V7, we released Kentico 10.0.27 hotfix, which adds support for the new control. For Kentico version 9 and older versions (8, 8.1, 8.2) it is necessary to copy attached files to your project and follow these steps:
- Backup your project files (or web parts only)
- Copy BasicBingV8Maps.cs file anywhere into the CMS folder and include it in the project CMSApp_AppCode (a web application project) or just copy it into the App_Code folder if you have a website project.
- Edit ~/CMSWebParts/Maps/Basic/BasicBingMaps.ascx.cs file:
- Add using CMS;
- Replace line private readonly BasicBingMaps BasicBingMaps = new BasicBingMaps(); with private readonly BasicBingV8Maps BasicBingMaps = new BasicBingV8Maps();
- Edit ~/CMSWebParts/Maps/Documents/BingMaps.ascx file:
- Add <%@ Register TagPrefix="cms" Namespace="CMS" Assembly="CMSAppAppCode" %> after @Control directive (for a web application project) or <%@ Register TagPrefix="cms" Namespace="CMS" %> (for a web site project)
- Change the line <cms:BasicBingMaps ID="ucBingMap" runat="server" /> to <cms:BasicBingV8Maps ID="ucBingMap" runat="server" />
- Edit ~/CMSWebParts/Maps/Static/StaticBingMaps.ascx.cs file:
- Add using CMS;
- Locate invocation of BasicBingMaps.RegisterMapScripts(...) method in OnPreRender method and replace BasicBingMaps with BasicBingV8Maps
- Locate invocation of BasicBingMaps.GenerateMap(...) method in LoadMap method and replace BasicBingMaps with BasicBingV8Maps
- Copy and replace the BingMaps.js file into folders ~/CMSWebParts/Maps/Static/StaticBingMaps_files, ~/CMSWebParts/Maps/Documents/BingMaps_files and ~/CMSWebParts/Maps/Basic/BasicBingMaps_files
As new V8 Web Control introduces several breaking changes, after applying the hotfix (or after completing mentioned instructions) there are some additional key notes to take into consideration:
keydown event on Map object was deprecated
Enable keyboard shortcuts property of the web part became unused. We recommend to remove the property from the web part definition to prevent confusion.
Properties height and width of InfoboxOptions object were deprecated.
Infobox in V8 grows to fit the content. This fact may cause design break so it is recommended to revise the transformations used for the Infobox custom markup. The outer element in the transformation should declare its dimensions as absolute values. You may also set InfoboxOptions properties maxWidth and maxHeight to define maximal dimensions. To do so, edit the ~/CMSWebParts/Maps/*/(Static)BingMaps_files/BingMaps.js file and locate this code in the showInfo function:
var infoboxOptions = { title: pushpin.title, description: pushpin.description };
And add the maxWidth and maxHeight properties:
var infoboxOptions = {
title: pushpin.title,
description: pushpin.description,
maxWidth: 350,
maxHeight: 200
};
Additional action is required to force the custom pushpin to point at the correct place
When using custom ushpin icon (defined via Icon field property) it is necessary to edit BingMaps.js in the respective web part folder and locate this code in addBingMarker function:
if (iconURL) {
var pushpinOptions = { icon: iconURL, textOffset: offset };
}
Add the anchor option with X and Y coordinates, which is used to specify what part of the image should be anchored to the location of the pushpin:
if (iconURL) {
var pushpinOptions = { icon: iconURL, textOffset: offset, anchor: new Microsoft.Maps.Point(X, Y) };
}
You can find more information related to the migration between Ajax Control V7 and V8 here.