Principe

Ingrédients :

  • Des données Openstreetmap en .pbf
  • Une base PostGre
  • Mapnik, un outil qui permet de générer des tuiles de carte
  • OpenLayers (ou Leaflet, ou MapboxJS), pour afficher la carte, une bibliothèque JavaScript. On peut, grâce à cette bibliothèque, afficher des données en .geojson, rendues directement dans le navigateur, au dessus des tuiles bitmap générées par Mapnik. On peut faire tout un tas de trucs avec ces éléments (animation, style, texte).

Installation

sudo apt-get install postgresql ## PostGreSQL
sudo apt-get install pgadmin3 ## Gestionnaire graphique de BDD
sudo apt-get install postgresql-9.5-postgis-2.2 ## Capsule spatiale PostGis pour notre version de PostGre

configurer $PGDATA env variable (voir configurer variable d’environnement dans mint.installation.md)

PGDATA="/var/lib/postgresql/9.5/main"
PGHOST="localhost"
PGPORT="5432"
PGLOG="/var/log/postgresql"
sudo pluma ~/.bashrc #et ajouter les lignes ci_dessus dans le fichier
  • Créer le serveur
  • Créer le user ‘patjennnings’ dans postgres patjennings/********* (mdp habituel OS)
  • Avec PGAdmin 3

Se connecter à la base dans PGAdmin III (ou en CLI)

# Se connecter en superuser postgres
sudo -i -u postgres
# se logout
logout

En superuser, après s’être connecté à la base en faisant psql gis

# Supersuer
gis=#
# Pas superuser
gis=>

En superuser, faire gis=# CREATE EXTENSION postgis; # Crée l’extension PostGis dans PostGre

Download the planet file from planet.openstreetmap.org

Fichier complet planet.osm.pbf sur DD LaCie. Sinon, on peut télécharger les données par continent, pays, région, etc. sur https://download.geofabrik.de/

Import into a PostGIS database using osm2pgsql

J’en suis là. J’ai ramené le fichier osm.pbf du Centre /home/patjennings/Documents/Ressources/Data/Maps/centre-latest.osm.pbf. Reste à l’importer dans la base PostGre

Savoir comment échapper à ERROR: Error: Connection to database failed: fe_sendauth: no password supplied quand je tente d’importer avec lcommandes du dessous : https://stackoverflow.com/questions/17996957/fe-sendauth-no-password-supplied#17997528 Réponse : tout est rentré dans l’ordre quand $PGDATA fut initialisé

pg_hba.conf > https://stackoverflow.com/questions/12452073/trying-to-set-up-postgres-for-ror-app-getting-error-fe-sendauth-no-password Puis reload la conf /usr/lib/postgresql/9.5/bin/pg_ctl reload

PGDATA variable d’environnement ? voir plus haut

osm2pgsql -H localhost -r pbf /home/patjennings/Documents/Ressources/Data/Maps/centre-latest.osm.pbf # Importe les données dans PostGre (par défaut dans la base gis)

Import w/ osm2pgsql (fichier schwaben-latest.osm.pbf)

Problème de connexion jusqu’à ce que je mette ## -H localhost

osm2pgsql schwaben-latest.osm.pbf -H localhost -r pbf

Creating tiles using Mapnik

This is the method used by, for example, the OSM cycle map. Its main advantage is that nothing needs to run on the webserver - it just needs a directory of image files. So, for example, you can install all the software on your home PC, and transfer the tiles to your webhost when you’re finished.

Exemples de requêtes sur la base importée
SELECT * FROM public.planet_osm_roads WHERE name='Vorarlberg'

Copy the files osm.xml, generate_image.py and generate_tiles.py from SVN

Voir http://svn.openstreetmap.org/applications/rendering/mapnik/

Set up mapnik and test using osm.xml and the generate_image.py

Installer Mapnik : https://github.com/mapnik/mapnik/wiki/UbuntuInstallation

Installer python-mapnik (Python bindings pour Mapnik) : https://github.com/mapnik/python-mapnik

Puis : https://github.com/mapnik/mapnik/wiki/GettingStartedInPython

Problèmes

avec Boost ?

export BOOST_PYTHON_LIB=boost_python

https://github.com/mapnik/python-mapnik/issues/168


et cette erreur ?

/home/patjennings/mapnik-3.x/mason_packages/.link/include/boost/python/detail/wrap_python.hpp:50:11: fatal error: 'pyconfig.h' file not found
# include <pyconfig.h>
          ^

alors, on fait

export MASON_BUILD=true

Voir https://wiki.openstreetmap.org/wiki/Creating_your_own_tiles#Creating_tiles_using_Mapnik_and_generate_tiles.py

When everything works, use generate_tiles.py to create 1000s of tiles in a special hierarchy of folders

Styler une carte en Wysiwyg avec Tilemill

Installer Tilemill

https://tilemill-project.github.io/tilemill/docs/linux-install/

Utiliser Tilemill

Tilemill permet de styler la map, avec du pseudo-CSS, et une zone de visualisation qui montre les changements graphiques au fur et à mesure. Cet outil permet un export en Mapnik XML, sur lequel on peut baser une génération de tuiles stylées.

Manipuler la carte avec OpenLayers

http://openlayers.org Quelques exemples d’utilisation >

  • https://openlayers.org/en/latest/examples/
  • http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example

Setup de base.

<script src="js/ol.js"></script>

Intégration concrète de la map. On intègre ici, quelques éléments directement rendus dans le navigateur, grâce à OpenLayers.

// tableau des positions des objets à disposer sur la carte
var positions = [
  [-1.5517,
    47.2057
  ],
  [-1.5567,
    47.2107
  ],
  [-1.5417,
    47.2063
  ]
]

// Styles des objets
var stroke = new ol.style.Stroke({
  color: 'white',
  width: 2
});
var fill = new ol.style.Fill({
  color: 'red'
});

var features = new Array(positions.length); // tableau des formes à positionner, basé sur les positions du tableau positions[]

for (var i = 0; i < positions.length; ++i) {
  var coordinates = WMTransform([positions[i][0], positions[i][1]]);
  features[i] = new ol.Feature(new ol.geom.Point(coordinates));
  // documenter : comment créer des shapes
  // https://openlayers.org/en/latest/examples/regularshape.html?q=shapes
  features[i].setStyle(
    new ol.style.Style({

      image: new ol.style.RegularShape({
        fill: fill,
        stroke: stroke,
        points: 3,
        radius: 10,
        rotation: Math.PI / 4,
        angle: 0
      })
    })
  );
}

// features (va dans >) source (va dans >) layer (va dans >) map
// Layer créé dans le code (ci-dessus)
var source = new ol.source.Vector({
  features: features
});

var vectorLayer = new ol.layer.Vector({
  source: source
});


var geojsonObject = {
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "name": "EPSG:3857"
  },
  "generator": "JOSM",
  "features": [{
    "type": "Feature",
    "properties": {},
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [-180177.38782396686,
          5983683.358914002
        ],
        [-176887.05234348233,
          5976429.6888966365
        ],
        [-181897.8629904501,
          5971299.57323386
        ],
        [-182554.04057466853,
          5967481.812739435
        ],
        [-179871.6397109653,
          5966255.71646547
        ],
        [-177185.3148819658,
          5965871.195031838
        ],
        [-174739.56206573333,
          5967959.032801011
        ],
        [-170660.9778027581,
          5968892.793940673
        ],
        [-166418.7227322177,
          5968778.138398349
        ],
        [-162291.1232050269,
          5966905.431205709
        ],
        [-158010.6496207787,
          5975504.596886215
        ],
        [-158775.01990383922,
          5981160.9369801795
        ],
        [-160456.63452590434,
          5983224.7367434995
        ],
        [-162367.56023355556,
          5983912.66999898
        ],
        [-166265.8486762735,
          5982231.055376843
        ],
        [-169246.2445187245,
          5983824.103247442
        ],
        [-169934.82603340538,
          5985785.377192253
        ],
        [-174138.86258912485,
          5985021.00690919
        ],
        [-180177.38782396686,
          5983683.358914002
        ]
      ]
    }
  }]
};

// Source créée à partir du GeoJSON (via JOSM)
var zoneSource = new ol.source.Vector({
  features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)

});

// Layer utilisant la source vectorielle GeoJSON
var zoneVectorLayer = new ol.layer.Vector({
  source: zoneSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'blue',
      lineDash: [4],
      width: 3
    }),
    fill: new ol.style.Fill({
      color: 'rgba(0, 0, 255, 0.1)'
    })
  })
});

// fonction qui transforme les coordonnées latitude/longitude habituelles en coordonnées correctes pour le système d'OpenLayers (WebMercator)
function WMTransform(lontlag) {
  var wm = ol.proj.fromLonLat(lontlag);
  return wm;
}

// Création de la map
var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      // là, on a les tuiles OpenStreetMap de base
      // source: new ol.source.OSM()

      // Ici, c'est ce qui charge les tuiles custom
      source: new ol.source.OSM({
        url: 'tiles/{z}/{x}/{y}.png'
      })
    }),
    vectorLayer,
    zoneVectorLayer
  ],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions: {
      collapsible: false
    }
  }),
  view: new ol.View({
    center: WMTransform([-1.5517, 47.2057]),
    zoom: 14,
    minZoom: 13,
    maxZoom: 18
  })
});

Utils

  • https://code.google.com/p/mapnik-utils/
  • https://github.com/mapnik/mapnik/wiki/MapnikTutorials

OSM own tiles

  • http://wiki.openstreetmap.org/wiki/Map_Features
  • http://wiki.openstreetmap.org/wiki/Creating_your_own_tiles
  • http://wiki.openstreetmap.org/wiki/Deploying_your_own_Slippy_Map#Your_own_map_tiles
  • http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Lon..2Flat._to_tile_numbers_2
  • https://github.com/mapnik/mapnik/wiki/UsingCustomFonts