Naar inhoud
Smaakverkenners Kennisbank
Inloggen

Plattegrond kaart SVG maken

Hier een workflow om een plattegrond van de stad in de juiste stijl te krijgen.

Vectorkaarten exporteren via Overpass Turbo & Mapshaper

Doel: Specifieke vectorelementen (gebouwen, water, parken, bruggen) uit OpenStreetMap (OSM) exporteren als lichte, gestijlde en gescheiden lagen voor Adobe Illustrator. Dit is het alternatief voor de standaard OpenStreetMap SVG-export, die tegenwoordig platte afbeeldingen en ongestructureerde geometrie bevat.

Stap 1: Vectordata ophalen (Overpass Turbo)

  1. Ga naar overpass-turbo.eu.
  2. Navigeer op de kaart naar het gewenste gebied.
  3. Plak de volgende Overpass QL-code in het linkerpaneel:


[out:json][timeout:90];

(

/* Water */

way["natural"="water"]({{bbox}});

relation["natural"="water"]({{bbox}});

way["waterway"]({{bbox}});

relation["waterway"]({{bbox}});


/* Groen / Parken */

way["leisure"]({{bbox}});

way["landuse"="park"]({{bbox}});

way["landuse"="grass"]({{bbox}});

way["landuse"="forest"]({{bbox}});

way["natural"="wood"]({{bbox}});


/* Gebouwen */

way["building"]({{bbox}});

relation["building"]({{bbox}});


/* Bruggen */

way["bridge"]({{bbox}});

way["man_made"="bridge"]({{bbox}});

);

(._;>;);

out body;


Opmerking: We gebruiken [out:json] in plaats van XML, omdat GeoJSON in Mapshaper betrouwbaarder werkt met eigenschappen van meerdere lagen.
  1. Klik linksboven op Uitvoeren (Run).
  2. Klik op ExporterenDataGeoJSON en sla het bestand op je computer op.


Stap 2: Lagen scheiden, herprojecteren & stijlen (Mapshaper)

  1. Ga naar mapshaper.org.
  2. Sleep het gedownloade .geojson-bestand naar het scherm en klik op Import.
  3. Open de console door rechtsboven op Console te klikken.
  4. Voer de onderstaande opdrachten uit in de console (dit kan regel voor regel of als één reeks):

Console-commando's


# 1. Herprojecteer naar Web Mercator (corrigeert de vervorming van geografische coördinaten naar een platte kaart, mocht de kaart vervormd zijn)

-proj EPSG:3857


# 2. Splits de functies op in aparte lagen op basis van OSM-eigenschappen

-split 'this.properties.bridge || this.properties["man_made"] == "bridge" ? "bridge" : (this.properties.building ? "building" : (this.properties.natural == "water" || this.properties.waterway ? "water" : (this.properties.leisure || this.properties.landuse ? "park" : "other")))'


# 3. Pas kleur en stijl toe per laag

-style target=building fill="#f9c197" stroke="none"

-style target=water fill="#7990a9" stroke="none"

-style target=park fill="#60b0a2" stroke="none"

-style target=bridge fill="#b8b8b8" stroke="#333333" stroke-width=1


Stap 3: Schone SVG exporteren

  1. Klik rechtsboven in Mapshaper op Export.
  2. Selecteer het formaat SVG.
  3. Controleer of alle gewenste lagen (building, water, park, bridge) zijn geselecteerd.
  4. Klik op Export.



Stap 4: Nabewerken in Adobe Illustrator

  1. Open het gedownloade .svg-bestand in Adobe Illustrator.
  2. Lagenstructuur: Elke laag die in Mapshaper is aangemaakt, wordt netjes als een afzonderlijke laag of groep geïmporteerd.
  3. Afwerking:
  4. Verwijder of verberg de laag other als deze ongewenste elementen bevat.
  5. Pas eventueel vullingen aan, of pas de laatste dingen aan om het een nette kaart te maken.