Skip to content

How To Change Default World Map Provider

Asaf edited this page Feb 19, 2019 · 1 revision

add custom map adapter, for example:

import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import { ICaseMapState } from '@ansyn/core';
import { ImageryMapSource } from '@ansyn/imagery';
import { OpenLayersMapSourceProvider, OpenLayersMap } from '@ansyn/plugins';

export const OpenLayerOSM_customSourceProviderSourceType = 'OSM_Custom';


@ImageryMapSource({
  sourceType: OpenLayerOSM_customSourceProviderSourceType,
  supported: [OpenLayersMap]
})
export class OpenLayerOSMCustomSourceProvider extends OpenLayersMapSourceProvider {
  create(metaData: ICaseMapState): any[] {
    const osmLayer = new TileLayer({
      source: new OSM()
    });

    const source = new OSM(<any>{
      attributions: [
        'All maps © <a href="http://www.openseamap.org/">OpenSeaMap</a>',
        OSM.ATTRIBUTION
      ],
      opaque: false,
      url: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png'
    });

    const openSeaMapLayer = new TileLayer({ source });
    return [osmLayer, openSeaMapLayer];
  }
}

Inject the map provider at the app.module

imports: [
     BrowserModule,
     AnsynModule.component(),
     ImageryModule.provide({
       maps: [],
       plugins: [],
       mapSourceProviders: [
         OpenLayerOSMCustomSourceProvider
       ]
     }),

change the configuration data at the main.ts worldView.sourceType to OSM_Custom

const mergeChanges = { 'casesConfig': { 'defaultCase': { 'state': { 'facets': { 'showOnlyFavorites': false, 'filters': [ { 'metadata': { 'displayTrue': true, 'displayFalse': true } } ] }, "maps": { "layout": "layout1", "data": [ { "data": { "position": { "extentPolygon": { "type": "Polygon", "coordinates": [ [ [ -117.94293165339445, 33.82040324951603 ], [ -117.88739896579649, 33.82040324951603 ], [ -117.88739896579649, 33.80000526593916 ], [ -117.94293165339445, 33.80000526593916 ], [ -117.94293165339445, 33.82040324951603 ] ] ] }, "projectedState": { "center": [ -13126256.030144267, 4003347.018056854 ], "projection": { "code": "EPSG:3857" }, "resolution": 3.3780713146372543, "rotation": 0, "zoom": 15.5 } } }, "flags": {}, "worldView": { "mapType": "openLayersMap", "sourceType": "OSM_Custom" }, "id": "af3b94d2-03ff-44e6-9f73-10d386aff493" } ], "activeMapId": "af3b94d2-03ff-44e6-9f73-10d386aff493" } } } }, 'coreConfig': { 'noInitialSearch': true }, 'menuConfig': { 'menuItems': [ 'Filters', 'Tools' ] } };