Merge pull request #352 from mapbox/update-versions

Upgrade Mapbox libraries and sanitize user-HTML inputs

capabilities.json

@@ -218,27 +218,27 @@
  {
  "value": "mapbox:\/\/styles\/mapbox\/light-v10?optimize=true",
  "displayName": "Light",
- "displayNameKey": "light_v9"
+ "displayNameKey": "light_v10"
  },
  {
  "value": "mapbox:\/\/styles\/mapbox\/dark-v10?optimize=true",
  "displayName": "Dark",
- "displayNameKey": "dark_v9"
+ "displayNameKey": "dark_v10"
  },
  {
  "value": "mapbox:\/\/styles\/mapbox\/streets-v11?optimize=true",
  "displayName": "Streets",
- "displayNameKey": "streets_v10"
+ "displayNameKey": "streets_v11"
  },
  {
  "value": "mapbox:\/\/styles\/mapbox\/outdoors-v11?optimize=true",
  "displayName": "Outdoors",
- "displayNameKey": "outdoors_v10"
+ "displayNameKey": "outdoors_v11"
  },
  {
  "value": "mapbox:\/\/styles\/mapbox\/satellite-streets-v11?optimize=true",
  "displayName": "Satellite Streets",
- "displayNameKey": "satellite_streets_v10"
+ "displayNameKey": "satellite_streets_v11"
  },
  {
  "value": "mapbox:\/\/styles\/mapbox\/satellite-v9?optimize=true",
@@ -248,12 +248,12 @@
  {
  "value": "mapbox:\/\/styles\/mapbox\/navigation-preview-day-v4?optimize=true",
  "displayName": "Traffic Light",
- "displayNameKey": "navigation_preview_day_v2"
+ "displayNameKey": "navigation_preview_day_v4"
  },
  {
  "value": "mapbox:\/\/styles\/mapbox\/navigation-preview-night-v4?optimize=true",
  "displayName": "Traffic Dark",
- "displayNameKey": "navigation_preview_night_v2"
+ "displayNameKey": "navigation_preview_night_v4"
  },
  {
  "value": "custom",

package.json

@@ -1,11 +1,10 @@
 {
  "name": "mapboxgl-powerbi",
- "version": "1.2.4",
+ "version": "1.5.0",
  "description": "Mapbox Visual for Power BI",
  "main": "index.js",
  "scripts": {
  "pbi": "pbiviz",
- "pbicert": "pbiviz --create-cert",
  "pbicerti": "pbiviz --install-cert",
  "package": "pbiviz package",
  "pretest": "pbiviz package --resources --no-minify --no-pbiviz --no-plugin",
@@ -16,8 +15,8 @@
  "author": "Ryan Baumann",
  "license": "MIT",
  "dependencies": {
- "@mapbox/mapbox-gl-draw": "^1.1.1",
- "@mapbox/mapbox-gl-geocoder": "^3.1.1",
+ "@mapbox/mapbox-gl-draw": "^1.1.2",
+ "@mapbox/mapbox-gl-geocoder": "^4.4.2",
  "@turf/bbox": "^6.0.1",
  "@turf/bbox-polygon": "^6.0.1",
  "@turf/boolean-contains": "^6.0.1",
@@ -29,9 +28,10 @@
  "@types/geojson": "^1.0.6",
  "@types/mapbox-gl": "^0.51.4",
  "chroma-js": "^1.3.5",
- "mapbox-gl": "0.53.0",
+ "mapbox-gl": "1.4.0",
  "powerbi-client": "^2.6.7",
- "powerbi-visuals-tools": "^1.13.1",
+ "powerbi-visuals-api": "^2.6.1",
+ "powerbi-visuals-tools": "^2.6.0",
  "powerbi-visuals-utils-dataviewutils": "^1.5.0",
  "powerbi-visuals-utils-formattingutils": "^3.1.0",
  "powerbi-visuals-utils-testutils": "^1.3.2",

pbiviz.json

@@ -4,7 +4,7 @@
  "displayName": "Mapbox Visual",
  "guid": "PBI_CV_EB3A4088_75C5_4746_9D8B_255A7B7ECD6C",
  "visualClassName": "MapboxMap",
- "version": "1.4.0",
+ "version": "1.5.0",
  "description": "Visualize massive location data with custom map styles, using circle, heatmap, choropleth, and cluster layers.",
  "supportUrl": "www.mapbox.com/help",
  "gitHubUrl": "https://github.com/mapbox/mapboxgl-powerbi"
@@ -35,6 +35,5 @@
  ],
  "style": "style/visual.less",
  "capabilities": "capabilities.json",
- "dependencies": "dependencies.json",
  "stringResources": []
 }

src/ts/datasources/cluster.ts

@@ -63,7 +63,7 @@ module powerbi.extensibility.visual.data {
 
  createCluster() {
  const self = this
- return supercluster({
+ return ({
  radius: 50,
  maxZoom: 12,
  initial: function() {
@@ -112,7 +112,7 @@ module powerbi.extensibility.visual.data {
  this.cluster.options.maxZoom = settings.clusterMaxZoom;
  return this.cluster.getClusters(constants.WORLD_BOUNDS, Math.floor(map.getZoom()) ).
  map( feature => {
- // Remove built-in supercluster properties
+ // Remove built-in properties
  // as they are not needed and are ruining our tooltips
  delete feature.properties.cluster;
  delete feature.properties.cluster_id;

src/ts/legendControl.ts

@@ -68,26 +68,31 @@ module powerbi.extensibility.visual {
  }
 
  createLegendElement(title: string, data: ColorStops, format: string): HTMLElement {
- const legend = document.createElement('div')
- legend.className = "mapbox-legend mapboxgl-ctrl-group"
+ const d = document;
+ const legend = d.createElement('div');
+ legend.setAttribute("class", "mapbox-legend mapboxgl-ctrl-group");
 
- const titleElement = document.createElement('div');
- titleElement.innerHTML = title
+ const titleElement = d.createElement('div');
+ const titleText = d.createTextNode(title);
  titleElement.className = 'mapbox-legend-title';
+ titleElement.appendChild(titleText);
  legend.appendChild(titleElement)
 
  data.forEach(({colorStop, color}) => {
- const item = document.createElement('div');
- const colorElement = document.createElement('span');
- colorElement.className = 'mapbox-legend-color middle';
- colorElement.style.backgroundColor = color;
+ const item = d.createElement('div');
+ const colorElement = d.createElement('span');
+ colorElement.setAttribute("class", "mapbox-legend-color middle");
+ colorElement.setAttribute("style", "backgroundColor: color;");
 
  const valueElement = document.createElement('span');
- valueElement.className = 'mapbox-legend-value middle'
+ valueElement.setAttribute("class", "mapbox-legend-value middle");
+
  if (typeof colorStop === "number") {
- valueElement.innerHTML = valueFormatter.format(colorStop, format || LegendControl.DEFAULT_NUMBER_FORMAT);
+ const valueText = d.createTextNode(valueFormatter.format(colorStop, format || LegendControl.DEFAULT_NUMBER_FORMAT));
+ valueElement.appendChild(valueText);
  } else {
- valueElement.innerHTML = colorStop;
+ const valueText = d.createTextNode(colorStop);
+ valueElement.appendChild(valueText);
  }
 
  item.appendChild(colorElement);

src/ts/mapboxMap.ts

@@ -195,14 +195,12 @@ module powerbi.extensibility.visual {
  }
 
  private validateOptions(options: VisualUpdateOptions) {
- this.errorDiv.style.display = 'none';
- this.errorDiv.innerText = '';
-
- //check for GL Support
- // if (!mapboxgl.supported()) {
- // this.errorDiv.innerHTML = Templates.noGlSupport
- // return false;
- // }
+
+ // Hide div and remove any child elements
+ this.errorDiv.setAttribute("style", "display: none;");
+ while (this.errorDiv.hasChildNodes()) { 
+ this.errorDiv.removeChild(this.errorDiv.firstChild) 
+ }
 
  // Check for Access Token
  if (!this.settings.api.accessToken) {

src/ts/settings.ts

@@ -36,7 +36,7 @@ module powerbi.extensibility.visual {
 
  export class APISettings {
  public accessToken: string = "";
- public style: string = "mapbox:\/\/styles\/mapbox\/light-v9?optimize=true";
+ public style: string = "mapbox:\/\/styles\/mapbox\/light-v10?optimize=true";
  public styleUrl: string = "";
  public zoom: number = 0;
  public startLong: number = 0;

tsconfig.json

@@ -3,11 +3,13 @@
  "allowJs": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
- "target": "es5",
+ "target": "ES5",
  "sourceMap": true,
+ "out": "./.tmp/build/visual.js",
  "typeRoots": [
  "src/types",
- "node_modules/@types"
+ "node_modules/@types/geojson",
+ "node_modules/@types/mapbox-gl"
  ]
  },
  "exclude": [

tslint.json

@@ -75,4 +75,4 @@
  "react-iframe-missing-sandbox": true,
  "react-no-dangerous-html": true
  }
-}
+}