Maps, maps, maps!

by Karolina

Cracow, 22 Jan 2019

Agenda

Geographic Information System
Apps craving for maps
Angular map tools
Angular app demo

Cartography...

You can

visualise and read things...

... is a basis for

... but here you can also

capture,

store,

analyse,

question,

interpret,

manipulate

them.

Geographic Information System

Apps craving for maps

Comparison map: Berlin 1928 and today (Leaflet)
Satellite imagery viewer: Sentinel Playground (Leaflet)
EPSG database: EPSG.io (OpenLayers)
Old topographic maps database: Mapire (OpenLayers)
Shop browser: Serenada Shopping Centre (Mapbox)
Weather forecast portal: Ventusky (Canvas API)

!! 3D enhancement: Cesium + Angular !!

OpenLayers

ngx-openlayers

2-clause BSD License

MPL-2.0

<aol-map [width]="'100%'" [height]="'40rem'">
  <aol-interaction-default></aol-interaction-default>
  <aol-control-defaults></aol-control-defaults>
  <aol-view [zoom]="16">
    <aol-coordinate
      [x]="19.948039"
      [y]="50.064218"
      [srid]="'EPSG:4326'"
    ></aol-coordinate>
  </aol-view>
  <aol-layer-tile>
    <aol-source-osm></aol-source-osm>
  </aol-layer-tile>
</aol-map>

Leaflet

ngx-leaflet

2-clause BSD License

MIT

<div leaflet style="height: 40rem;" [leafletOptions]="options"></div>

options: MapOptions = {
  layers: [
    tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Open Street Map'
    })
  ],
  zoom: 16,
  center: latLng([50.064218, 19.948039])
};

Mapbox

ngx-mapbox-gl

limited

MIT

<mgl-map
  [style]="'mapbox://styles/mapbox/streets-v9'"
  [zoom]="[9]"
  [center]="[-74.50, 40]"
>
  <mgl-layer
  id="state-borders"
  type="line"
  [source]="states"
  [paint]="{
    'line-color': '#627BC1',
    'line-width': 2
  }"
  ></mgl-layer>
</mgl-map>