This document provides an overview of map concepts, types, description standards, providers, styling, interaction, data sources, and tools. It discusses key map elements like points, lines, polygons, projections and layers. It also summarizes common map formats, styling approaches, integration libraries, and sources for geocoding and mapping data.

1. Map Technologies
PRESENTED BY
Joerg Reichert
Licensed under cc-by v3.0 (any jurisdiction)

2. Map concepts
{
"type": "Feature",
"properties": {
"name": "Oper",
"url": "www.oper-leipzig.de/",
...
},
"geometry": {
"type": "Point",
"coordinates": [
12.381291389465332,
51.34005275863635
]
}
}
Features

3. Map concepts
Points

4. Map concepts
Labels / Hovers

5. Map concepts
Lines

6. Map concepts
Polygons

7. Map concepts
Styles

8. Map concepts
Zoom

9. Map concepts
Basemap

10. Map concepts
Projection

11. Map concepts
Layers

12. Map types
Simple

13. Map types
Category Maps

14. Map types
Choropleth Maps

15. Map types
Cluster

16. Map types
Bubbles

17. Map types
Density Maps

18. Map types
Intensity Map

19. Map types
Heat Maps

20. Map types
Raster Maps

21. Map types
Torque Maps – Animation, Transition over time

22. Map concepts
Geo Server

23. Map concepts
WFS

24. Map concepts
WMS

25. Map concepts
Tiles

26. Map description standards
Shapefile

27. Map description standards
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Style id="MyStyle">
<IconStyle><Icon><href>icon.png</href></Icon></IconStyle>
</Style>
<Placemark>
<name>Simple placemark</name>
<description>...</description>
<styleUrl>#MyStyle</styleUrl>
<Point>
<coordinates>-122.0822035425683,37.42228990140251,0</coordinates>
</Point>
</Placemark>
</kml>
KML

28. Map description standards
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "Oper",
"url": "www.oper-leipzig.de/"
},
"geometry": {
"type": "Point",
"coordinates": [
12.381291389465332,
51.34005275863635
]
}
}, ...
GeoJSON

29. Map description standards
Others

30. Map Providers
http://www.openstreetmap.org/

31. Map Providers
http://maps.google.de/

32. Map Providers
https://www.bing.com/maps

33. Map Providers
https://carto.com/

34. Map Providers
MapBox
https://www.mapbox.com/

35. Web integration
https://openlayers.org/
OpenLayers

36. Web integration
Leaflet
http://leafletjs.com/

37. Web integration
Google Maps
http://maps.google.de/

38. Web integration
Mapbox GL JS
https://www.mapbox.com/mapbox-gl-js/

39. Web integration
Carto.JS
https://carto.com/docs/carto-engine/carto-js

40. Web integration
D3.js
https://d3js.org/
https://www.phase2technology.co
m/blog/using-d3-quadtrees-to-po
wer-an-interactive-map-for-bonn
ier-corporation/

41. Map Styling
What to style
● Symbolizer
● Symbolizer rotation
● Color
● Label / Fonts
● Hatching (Fill)
● Line styles
● Decorators
● Placement
● Border
● Opacity

42. Map Styling
Influencer types
● Data driven styles
● Interaction driven styles
● Zoom
● Property values
● Zoom and property
Influencers

43. Map Styling
<FeatureTypeStyle>
<Rule>
<PointSymbolizer>
<Graphic>
<Mark>
<WellKnownName>circle</WellKnownName>
<Fill>
<CssParameter name="fill">#FF0000</CssParameter>
</Fill>
<Stroke>
<CssParameter name="stroke">#000000</CssParameter>
<CssParameter name="stroke-width">2</CssParameter>
</Stroke>
</Mark>
<Size>6</Size>
</Graphic>
</PointSymbolizer>
</Rule>
</FeatureTypeStyle>
SLD

44. Map Styling
YSLD

45. Map Styling
Carto CSS (discontinued) MapCSS

46. Map Styling
Mapbox GL JS Style API
visited.countries.forEach(function(country) {
var id = country.name.replace(' ', '-').toLowerCase();
var countryLayer = {
"id": id,
"type": "fill",
"source": "countries",
"source-layer": "countries",
"filter": ["==", "name", country.name],
"paint": {
"fill-color": "rgba(241,163,64," + alphaForYear(country.last) + ")"
},
"interactive": true
};
countryLayer["paint.selected-" + id] = {
"fill-color": "red"
};
style.layers.splice(3, 0, countryLayer);
});

47. Map Styling
D3.js

48. Map Styling
GeoJSON.IO

49. Map Interaction
Click / Hover

50. Map Interaction
● Feature (multi) selection
● Search by properties
● Filtering
● Feature property editing
● Creating new features
● Interaction with Forms
● Interaction with Diagrams
● Feature import / export
Other interactions

51. Map Interaction
Kiosk / Workbench

52. Map Data
● Google Maps
● coodinates must be shown on Google Maps
● coordinates must not be shown longer than 30 days
● if the maps are free accessible, APIs are allowed to be used free of
charge
● http://sun.exnatura.de/GM/coords.php
● OpenStreetMap
● http://wiki.openstreetmap.org/wiki/Nominatim
● http://boundingbox.klokantech.com/
● https://geocode.xyz/
Geo Coding

53. Map Data
● http://noc.to/geodecode
● http://www.geonames.org/export/reverse-geocoding.html
● https://developers.google.com/maps/documentation/javascript/examples/g
eocoding-reverse?hl=de
Reverse Geo coding

54. Map Data
● http://www.landesvermessung.sachsen.de/inhalt/aaa/alkis/alkis.html
● https://www.geomis.sachsen.de/
● www.geoportal.de/
● https://openaddresses.io/
● www.geodatenzentrum.de/geodaten/
Sources

55. Map Tools
GeoJSON.IO

56. Map Tools
Overpass Turbo

57. Map Tools
● http://overpass-api.de (Language guide)
● Finding possible keys and values to search for:
http://taginfo.openstreetmap.org/
● http://wiki.openstreetmap.org/wiki/DE:Overpass_API/Beispielsammlung
Overpass Turbo associates

58. Javascript Tools
JSFiddle

59. Javascript Tools
Bl.ocks

60. Javascript Tools
● Plunker: https://plnkr.co/
● http://codepen.io
● https://www.codeply.com/
Other tools

61. Journalism / Story telling
● https://github.com/MapStory/story-tools/
● http://webkid.io/
● https://github.com/wbkd/awesome-interactive-journalism
● http://datenjournalist.de/
● http://datadrivenjournalism.net/
● http://datajournalismhandbook.org/
● http://www.morgenpost.de/interaktiv/
● http://katalog.datenjournalismus.net/
● http://howto.ddjdach.de/
Examples