@dlr-eoc/map-tools

@dlr-eoc/map-tools

how to use this in a ukis-angular (@dlr-eoc/core-ui) project

This repository contains 3 ui components:

1. mouse-position: shows projected coordinates of mouse pointer
   <ukis-mouse-position></ukis-mouse-position>
2. navigator: allows to insert coordinates in order to navigate the map to desired position
   <ukis-projection-switch [mapSvc]="mapSvc" [projectionList]="projections"></ukis-projection-switch>
3. projection-switch: ui element for interactive projection switch
   <ukis-map-navigator [mapState]="mapStateSvc"></ukis-map-navigator>

For examples see demo maps route-example-events

add the following dependencies to the package.json

• "@dlr-eoc/map-ol"
• "@dlr-eoc/map-tools"

add the following to the app.module.ts

import { MapOlModule } from '@dlr-eoc/map-ol';
import { MapToolsModule } from '@dlr-eoc/map-tools';

...

 imports: [
    ...
    MapOlModule,
    MapToolsModule
  ]

##Create simple map:

add the following to a route-view.component.html

<main class="content-area">
  <ukis-map-ol [layersSvc]="layersSvc" [mapState]="mapStateSvc" [controls]="controls" id="olMap"></ukis-map-ol>
</main>

add the following to a route-view.component.ts

import { LayersService } from '@dlr-eoc/services-layers';
import { MapStateService } from '@dlr-eoc/services-map-state';
import { IMapControls } from '@dlr-eoc/map-ol';

import { osm, eoc_litemap } from '@dlr-eoc/base-layers-raster';

controls: IMapControls;
  constructor(
    public layerSvc: LayersService,
    public mapStateSvc: MapStateService
) { }

ngOnInit() {
    this.addBaselayers();
}

addBaselayers() {
    const layers = [
        new osm({
        visible: false,
        legendImg: null
        }),
        new eoc_litemap({
        visible: true,
        legendImg: null
        })
    ];

    layers.map(l => this.layerSvc.addLayer(l, 'Baselayers'));
}

##To add mouse position component:

add the following to a route-view.component.html

<clr-vertical-nav [clrVerticalNavCollapsible]="true" [clr-nav-level]="2">
  <clr-vertical-nav-group [clrVerticalNavGroupExpanded]="false" class="layers" title="Coordinates">
    <clr-icon shape="compass" clrVerticalNavIcon></clr-icon>
    Coordinates
    <clr-vertical-nav-group-children class="padding title-ellipsis">
      <ukis-mouse-position></ukis-mouse-position>
    </clr-vertical-nav-group-children>
  </clr-vertical-nav-group>
</clr-vertical-nav>

##To add projection switch component (with 3 predefined projections):

add the following to a route-view.component.html

<clr-vertical-nav-group [clrVerticalNavGroupExpanded]="false" class="layers" title="Projection">
    <clr-icon shape="map" clrVerticalNavIcon></clr-icon>
    Projection
    <clr-vertical-nav-group-children class="padding title-ellipsis">
      <ukis-projection-switch [mapSvc]="mapSvc" [projectionList]="projections"></ukis-projection-switch>
    </clr-vertical-nav-group-children>
  </clr-vertical-nav-group>

add the following to a route-view.component.ts

import { IProjDef } from '@dlr-eoc/map-tools'

projections: IProjDef[];

constructor(
    public layerSvc: LayersService,
    public mapStateSvc: MapStateService
) { 

    let arcticPolarStereographic:IProjDef = {
      code: 'EPSG:3995',
      proj4js: '+proj=stere +lat_0=90 +lat_ts=71 +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs',
      title: 'Arctic Polar Stereographic',
      extent: [-20048966.10, -20048966.10, 20048966.10, 20048966.10],
      worldExtent: [-180.0, 60.0, 180.0, 90.0],
      global: false,
      units: 'm'
    };

    let antarcticPolarStereographic:IProjDef = {
      code: `EPSG:3031`,
      proj4js: '+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs',
      title: 'Antarctic Polar Stereographic',
      extent: [-20048966.10, -20048966.10, 20048966.10, 20048966.10],
      worldExtent: [-180.0, -90.0, 180.0, -60.0 ],
      global: false,
      units: 'm'
    };

    let webMercator:IProjDef = {
      code: `EPSG:3857`,
      proj4js: '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs',
      title: 'Spherical Mercator',
      extent: [-20026376.39, -20048966.10, 20026376.39, 20048966.10],
      worldExtent: [-180.0, -85.06, 180.0, 85.06],
      global: true,
      units: 'm'
    };

    this.projections=[webMercator, arcticPolarStereographic, antarcticPolarStereographic];
}

##To add navigator component:

add the following to a route-view.component.html

<clr-vertical-nav-group [clrVerticalNavGroupExpanded]="true" class="layers" title="Navigator">
    <clr-icon shape="compass" clrVerticalNavIcon></clr-icon>
    Navigator
    <clr-vertical-nav-group-children class="padding title-ellipsis">
      <ukis-map-navigator [mapState]="mapStateSvc"></ukis-map-navigator>
    </clr-vertical-nav-group-children>
  </clr-vertical-nav-group>

===

This library was generated with Angular CLI version 8.2.14.

Code scaffolding

Run ng generate component component-name --project map-tools to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project map-tools.

Note: Don't forget to add --project map-tools or else it will be added to the default project in your angular.json file.

Build

Run ng build map-tools to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test map-tools to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Changelog

11.0.0 (2023-05-05) (Openlayers Update and map-ol)

Breaking Changes

• Update Openlayers to ^v7.1.0 and ol-mapbox-style to ^9.2.1. Issue #157.

• @dlr-eoc/map-ol:

  • Styles from OpenLayers are no longer included in this component e3e98c1. You have to add them to your application manually see @dlr-eoc/map-ol/README.md.
  • The function vectorOnEvent now needs two parameters more layer: olLayer and feature: olFeature | olRenderFeature.
  • Refactor function layersOnMapEvent. Due to the removal of map.forEachLayerAtPixel in OpenLayers 7, the function works completely differently now. Iterate over all layers and test for feature or getData instead of just testing for color at a pixel. This also fixes Issue #120.

Features

• @dlr-eoc/map-ol:

  • The function zoomInOut now accepts an optional object with callback, duration, easing and zoomStep.
  • Add types for FitOptions on setExtent.
  • Add function hideAllPopups which adds a css class to the popup element Issue #120.
  • The function layerOnEvent (for popups) now accepts an optional feature as the last parameter.
  • The function getLayerGroups is now public to retrieve the LayerGroups and Collections from the map.
  • Use hideAllPopups on layer.visible change and add css styles Issue #120.
  • Add groupID from CustomLayer or StackedLayer to the layers from there ol/layer/Group. So you can get the LayerGroup later e.g. in map.getAllLayers().

• @dlr-eoc/utils-maps:

  • Add function getCollectionItem from ol/Collection. This returns the item and the index of the item if found otherwise null.
  • Add function layerOrGroupSetZIndex. Can set the zIndex for ol/layer/Group and all layers in the group.
  • Add function layerOrGroupSetOpacity. Can set the opacity for ol/layer/Group and all layers in the group.
  • Add function layerOrGroupSetVisible. Can set the visibility for ol/layer/Group and all layers in the group.
  • Add function collectionItemSetIndex. Moves an item in the ol/Collection to the index.

Bug Fixes

• @dlr-eoc/map-ol:
  • Use applyBackground() from 'ol-mapbox-style' when creating vector tile layers.
  • Remove LayerGroups from map before add baselayerGroup, layersGroup and overlayGroup.
  • Set bbox for olLayerGroup layers in create_custom_layer.
  • Show popups on transparent features Issue #120.
  • Adjust to style changes of ol-control from OpenLayers 7.