Karo
Senior Software Engineer
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 !!
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>
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])
};
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>Source code
Let's roll!
Thanks!
Good luck with your maps!
Maps, maps, maps!
By Karo
Maps, maps, maps!
There are plenty of apps, which core functionality is based on geolocation. We all know, who has one of the most developed API to use in your projects ;) But have you ever wondered about alternatives for those paid solutions? This talk will walk thorugh some opensource map libraries including OpenLayers and Leaflet, which are available as Angular modules. This is a talk for https://www.meetup.com/pl-PL/Angular-Dragons/events/257708165/
