Maps/vector tiles

src/legacy/core_plugins/tile_map/common/ems_client.js

@@ -139,6 +139,7 @@ export class EMSClient {
       const url = extendUrl(manifestUrl, { query: this._queryParams });
       result = await this._fetchWithTimeout(url);
     } catch (e) {
+      console.log('e', manifestUrl);
       if (!e) {
         e = new Error('Unknown error');
       }
@@ -147,6 +148,7 @@ export class EMSClient {
       }
       throw new Error(`Unable to retrieve manifest from ${manifestUrl}: ${e.message}`);
     } finally {
+      console.log('re', result);
       return result ? await result.json() : null;
     }
   }

src/legacy/core_plugins/tile_map/common/tms_service.js

@@ -21,24 +21,26 @@ import _ from 'lodash';
 import { ORIGIN } from './origin';
 
 export class TMSService {
-  _getTileJson = _.once(
-    async url => this._emsClient.getManifest(this._emsClient.extendUrlWithParams(url)));
+
+  _getEmsJson = _.once(async url => {
+    return this._emsClient.getManifest(this._emsClient.extendUrlWithParams(url));
+  });
 
   constructor(config,  emsClient) {
     this._config = config;
     this._emsClient = emsClient;
   }
 
-  _getRasterFormats(locale) {
+  _getRasterFormats(locale, formatType) {
     return this._config.formats.filter(format => {
-      return format.locale === locale && format.format === 'raster';
+      return format.locale === locale && format.format === formatType;
     });
   }
 
   _getDefaultStyleUrl() {
-    let rasterFormats = this._getRasterFormats(this._emsClient.getLocale());
+    let rasterFormats = this._getRasterFormats(this._emsClient.getLocale(), 'raster');
     if (!rasterFormats.length) {//fallback to default locale
-      rasterFormats = this._getRasterFormats(this._emsClient.getDefaultLocale());
+      rasterFormats = this._getRasterFormats(this._emsClient.getDefaultLocale(), 'raster');
     }
     if (!rasterFormats.length) {
       throw new Error(`Cannot find raster tile layer for locale ${this._emsClient.getLocale()} or ${this._emsClient.getDefaultLocale()}`);
@@ -49,9 +51,41 @@ export class TMSService {
     }
   }
 
+  async _getVectorStyleFileUrl() {
+
+    let vectorFormats = this._getRasterFormats(this._emsClient.getLocale(), 'vector');
+    if (!vectorFormats.length) {//fallback to default locale
+      vectorFormats = this._getRasterFormats(this._emsClient.getDefaultLocale(), 'vector');
+    }
+    if (!vectorFormats.length) {
+      throw new Error(`Cannot find raster tile layer for locale ${this._emsClient.getLocale()} or ${this._emsClient.getDefaultLocale()}`);
+    }
+    const defaultStyle = vectorFormats[0];
+    if (defaultStyle && defaultStyle.hasOwnProperty('url')) {
+      return defaultStyle.url;
+    }
+
+
+  }
+
+  async getVectorStyle() {
+    const url = await this._getVectorStyleFileUrl();
+    console.log('vsu', url);
+
+    const extendedUrl = this._emsClient.extendUrlWithParams(url);
+    console.log('eu', extendedUrl);
+    // const json = await this._emsClient.getManifest(extendedUrl);
+    const response = await fetch(extendedUrl);
+    const json = await response.json();
+    console.log('ejs', json);
+    return json;
+
+  }
+
   async getUrlTemplate() {
     const defaultStyle = this._getDefaultStyleUrl();
-    const tileJson = await this._getTileJson(defaultStyle);
+    //is this buggy (?)
+    const tileJson = await this._getEmsJson(defaultStyle);
     return this._emsClient.extendUrlWithParams(tileJson.tiles[0]);
   }
 
@@ -91,12 +125,12 @@ export class TMSService {
   }
 
   async getMinZoom() {
-    const tileJson = await this._getTileJson(this._getDefaultStyleUrl());
+    const tileJson = await this._getEmsJson(this._getDefaultStyleUrl());
     return tileJson.minzoom;
   }
 
   async getMaxZoom() {
-    const tileJson = await this._getTileJson(this._getDefaultStyleUrl());
+    const tileJson = await this._getEmsJson(this._getDefaultStyleUrl());
     return tileJson.maxzoom;
   }
 

x-pack/legacy/plugins/maps/common/ems_util.js

@@ -37,11 +37,18 @@ export  async function getEMSResources(emsClient, includeElasticMapsService, lic
       url: useRelativePathToProxy ?   `../${GIS_API_PATH}/${EMS_DATA_FILE_PATH}?id=${encodeURIComponent(fileLayer.getId())}` : fileLayer.getDefaultFormatUrl(),
       format: format, //legacy: format and meta are split up
       meta: meta, //legacy, format and meta are split up,
-      emsLink: fileLayer.getEMSHotLink()
+      emsLink: fileLayer.getEMSHotLink(),
+      fileLayer: fileLayer
     };
   });
 
   const tmsServices = await Promise.all(tmsServicesObjs.map(async tmsService => {
+
+    // eslint-disable-next-line max-len
+    const rasterUrl = useRelativePathToProxy ?   `../${GIS_API_PATH}/${EMS_DATA_TMS_PATH}?id=${encodeURIComponent(tmsService.getId())}&x={x}&y={y}&z={z}` : await tmsService.getUrlTemplate();
+
+    // const vectorUrl = useRelativePathToProxy ?
+
     return {
       name: tmsService.getDisplayName(),
       origin: tmsService.getOrigin(),
@@ -50,8 +57,9 @@ export  async function getEMSResources(emsClient, includeElasticMapsService, lic
       maxZoom: await tmsService.getMaxZoom(),
       attribution: tmsService.getHTMLAttribution(),
       attributionMarkdown: tmsService.getMarkdownAttribution(),
-      // eslint-disable-next-line max-len
-      url: useRelativePathToProxy ?   `../${GIS_API_PATH}/${EMS_DATA_TMS_PATH}?id=${encodeURIComponent(tmsService.getId())}&x={x}&y={y}&z={z}` : await tmsService.getUrlTemplate()
+      url: rasterUrl,
+      tmsService: tmsService,
+      vectorStyle: await tmsService.getVectorStyle()
     };
   }));
 

x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js

@@ -8,6 +8,7 @@ import _ from 'lodash';
 import mapboxgl from 'mapbox-gl';
 import chrome from 'ui/chrome';
 import { MAKI_SPRITE_PATH, MB_SOURCE_ID_LAYER_ID_PREFIX_DELIMITER } from '../../../../common/constants';
+import React from 'react';
 
 function relativeToAbsolute(url) {
   const a = document.createElement('a');
@@ -17,6 +18,7 @@ function relativeToAbsolute(url) {
 
 export async function createMbMapInstance({ node, initialView, scrollZoom }) {
   const makiUrl = relativeToAbsolute(chrome.addBasePath(MAKI_SPRITE_PATH));
+
   return new Promise((resolve) => {
     const options = {
       attributionControl: false,
@@ -25,7 +27,9 @@ export async function createMbMapInstance({ node, initialView, scrollZoom }) {
         version: 8,
         sources: {},
         layers: [],
-        sprite: makiUrl
+        sprite: makiUrl,
+        // sprite: 'https://tiles.maps.elastic.co/styles/osm-bright/sprite',
+        glyphs: 'https://tiles.maps.elastic.co/fonts/{fontstack}/{range}.pbf'
       },
       scrollZoom,
       preserveDrawingBuffer: chrome.getInjected('preserveDrawingBuffer', false)
@@ -34,7 +38,7 @@ export async function createMbMapInstance({ node, initialView, scrollZoom }) {
       options.zoom = initialView.zoom;
       options.center = {
         lng: initialView.lon,
-        lat: initialView.lat
+        lat: <initialView className="lat">  </initialView>
       };
     }
     const mbMap = new mapboxgl.Map(options);
@@ -46,6 +50,7 @@ export async function createMbMapInstance({ node, initialView, scrollZoom }) {
     mbMap.on('load', () => {
       resolve(mbMap);
     });
+    window._mbMap = mbMap;
   });
 }
 
@@ -74,7 +79,9 @@ export function removeOrphanedSourcesAndLayers(mbMap, layerList) {
 }
 
 export function syncLayerOrder(mbMap, layerList) {
+
   if (layerList && layerList.length) {
+
     const mbLayers = mbMap.getStyle().layers.slice();
 
     //This assumes that:
@@ -85,6 +92,7 @@ export function syncLayerOrder(mbMap, layerList) {
 
     const newLayerOrder = layerList.map(l => l.getId())
       .filter(layerId => currentLayerOrder.includes(layerId));
+
     let netPos = 0;
     let netNeg = 0;
     const movementArr = currentLayerOrder.reduce((accu, id, idx) => {

x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js

@@ -494,12 +494,6 @@ export class MBMapContainer extends React.Component {
 
   };
 
-  _getLayerById(layerId) {
-    return this.props.layerList.find((layer) => {
-      return layer.getId() === layerId;
-    });
-  }
-
   _getLayerByMbLayerId(mbLayerId) {
     return this.props.layerList.find((layer) => {
       const mbLayerIds = layer.getMbLayerIds();

x-pack/legacy/plugins/maps/public/layers/sources/ems_tms_source/ems_tms_source.js

@@ -9,6 +9,7 @@ import chrome from 'ui/chrome';
 import React from 'react';
 import { AbstractTMSSource } from '../tms_source';
 import { TileLayer } from '../../tile_layer';
+import { VectorTileLayer } from '../../vector_tile_layer';
 
 import { getEmsTMSServices } from '../../../meta';
 import { EMSTMSCreateSourceEditor } from './create_source_editor';
@@ -90,14 +91,14 @@ export class EMSTMSSource extends AbstractTMSSource {
   }
 
   _createDefaultLayerDescriptor(options) {
-    return TileLayer.createDescriptor({
+    return VectorTileLayer.createDescriptor({
       sourceDescriptor: this._descriptor,
       ...options
     });
   }
 
   createDefaultLayer(options) {
-    return new TileLayer({
+    return new VectorTileLayer({
       layerDescriptor: this._createDefaultLayerDescriptor(options),
       source: this
     });
@@ -130,6 +131,12 @@ export class EMSTMSSource extends AbstractTMSSource {
     });
   }
 
+
+  async getVectorStyle() {
+    const emsTmsMeta = await this._getEmsTmsMeta();
+    return emsTmsMeta.vectorStyle;
+  }
+
   async getUrlTemplate() {
     const emsTmsMeta = await this._getEmsTmsMeta();
     return emsTmsMeta.url;