Mettre en ligne une carte sans utiliser Google¶
(session 2)
Midis du Pôle Image - Juin 2018
Violaine Jurie - Matthieu Viry
Plan de la séance¶
- Utiliser QGIS2web pour exporter son projet
- Export depuis un interpréteur R
- Export depuis un interpréteur Python
- Bonus : publier/héberger sa carte interactive
Données utilisées dans les exemples : ICI!
QGIS2web¶
Exemple de résultat :¶
ou ICI! (plus léger, sans les orthophotos!)
Prérequis pour utiliser QGIS2Web:¶
- Disposer de QGIS (idéalement 2.18 ou 3)
- Pouvoir installer l'extension QGIS2Web
Étapes importantes :¶
- Ajouter un ou plusieurs fournisseurs de données de type "XYZ Tiles"
(il s'agit de tuiles au format PNG - on peut notamment trouver une liste de fournisseurs aux adresses suivantes : https://wiki.openstreetmap.org/wiki/Tile_servers et http://leaflet-extras.github.io/leaflet-providers/preview/)
- Les ajouter au projet en cours
- Mettre le projet dans la projection des tuiles à afficher (généralement EPSG:3857 dans le cas des tuiles OSM par exemple)
- Choisir les champs qu'on voudra afficher dans une popup
(par défaut tous les champs le seront, il faut explicitement sélectionner "caché" pour ne pas les afficher)
- Préparer le champs contenant éventuellement le chemin de la photo correspondant à chaque item
- Une requête simple dans la calculatrice de champs peut aider :
- Ouvrir QGIS2web et paramétrer les différentes options proposées : affichage de la légende actif, présence du nom du champ dans les popup, possibilité d'avoir un outil permettant de mesurer des distances, regroupement des points (cluster) lorsque le niveau de zoom n'est pas assez important, etc.
- Choisir un emplacement pour exporter la page web créée (et éventuellement déplacer les images vers ce dossier)
Depuis un interpréteur R¶
Exemple de résultat :¶
Prérequis :¶
- Installer le package
leaflet
install.packages('leaflet', dependencies=TRUE)
Import des bibliothèques nécessaires :¶
# Construction de la carte
library(leaflet)
# Export de la carte
library(htmlwidgets)
# Ouverture/préparation des données
library(rgdal)
library(rgeos)
Préparation des données :¶
# Ouverture d'une couche de polygones et création des centroides
data = readOGR('cantons_bretagne.geojson')
data$centroids <- gCentroid(data, byid = TRUE)
## Taille des rayons des cercles à afficher (en pixels)
data$size <- sqrt(as.numeric(as.character(data$population)) * 4 / pi)
## Label des cercles (ce qui apparait quand on click dessus)
data$label <- paste0("", data$nom, "",
"
Population du canton : ",
data$population, ' habitants')
## Initialisation de la carte leaflet
m <- leaflet(padding = 0)
m <- addProviderTiles(map = m,
provider = providers$Stamen.Watercolor)
## Ajout des cantons bretons
m <- addPolygons(map = m, data = data, opacity = 100,
color = "#FAFCFA",
weight = 0.25,
popup = NULL,
options = list(clickable = FALSE),
fill = T, fillColor = "pink",
fillOpacity = 75,
stroke = T)
# Ajout de markers correspondants au centroide avec
# un popup contenant le nom de l'entité
m <- addCircleMarkers(map = m,
lng = data$centroids$x, lat = data$centroids$y,
radius = data$size / 30, weight = 0.25,
stroke = T, opacity = 100,
fill = T, fillColor = "purple",
fillOpacity = 100,
popup = data$label,
color = "white")
## Centrage de la carte
m <- fitBounds(map = m,
lng1 = data@bbox[1],
lat1 = data@bbox[2],
lng2 = data@bbox[3],
lat2 = data@bbox[4])
## Dimensions de la carte
m$width <- 700
m$height <- 500
# Export de la carte en html
saveWidget(m, 'map.html', selfcontained = TRUE)
Le package s'utilise facilement dans un notebook R :¶
De nombreuses autres fonctionnalités de Leaflet sont disponibles.
- Création de "Marker"
- Dessin de lignes
- ...
La documentation du package pour plus d'informations :
https://rstudio.github.io/leaflet/
Un exemple sur le blog RGeomatic :
https://rgeomatic.hypotheses.org/550
Depuis un interpréteur Python¶
Exemple de résultat :¶
Prérequis :¶
- Installer le package
folium
- Installer le package
geopandas
pip install folium geopandas
Fond OSM + fichier GeoJSON¶
### Exporter un fond OSM centré + une couche GeoJSON
### en surimposition :
import folium
# On créé l'objet Map
m = folium.Map(location=[48.87, 2.38],
zoom_start=11,
tiles='Stamen Terrain')
# On ajoute une couche GeoJSON et on choisi son nom pour la "légende"
folium.GeoJson(
'IRIS_LOGEMENT_HABITAT.geojson',
name='IRIS'
).add_to(m)
# On ajoute la "légende" (controle de visibilité des couches)
folium.LayerControl().add_to(m)
# On exporte le résultat
m.save('/tmp/index2.html')
Carte chroplèthe (montrée en exemple) :¶
### Exporter un fond OSM + une couche GeoJSON
### utilisée pour faire une carte choroplèthe :
import folium
m = folium.Map(location=[48.87, 2.38],
zoom_start=10.4,
width=960,
height=600)
m.choropleth(
geo_data=gdf,
data=gdf,
columns=['OBJECTID', 'TX12_RP_LO'],
key_on='feature.properties.OBJECTID',
line_opacity=0.2,
fill_color='PuBu',
highlight=True,
legend_name='Part des locataires dans le parc de résidences principales')
folium.LayerControl().add_to(m)
m.save('/tmp/index2.html')
De nombreuses autres fonctionnalités de Leaflet sont disponibles
Voir la documentation du package pour plus d'informations :
http://python-visualization.github.io/folium/
Comme le package leaflet avec les notebook R, folium s'intègre parfaitement aux notebook jupyter/IPython.
Bonus : publier/héberger sa carte interactive sans avoir de site internet¶
Prérequis :¶
- Avoir exporter une carte avec une des méthodes précédente
- Disposer d'un compte github (ou s'en créer un)
Comment faire ?¶
- On créé un nouveau repository (on choisissant de créer un fichier README.md directement)
- On active le service "Github pages" dans l'onglet "settings" de ce repository
- On téléverse nos fichiers (en les faisant glisser par exemple)
- On peut accéder à notre carte à l'adresse
https://{{pseudo_github}}.github.io/{{nom_du_repository}}/
Dans notre cas on peut voir le résultat à l'adresse :
https://mthh.github.io/example-carte-qgis/qgis2web_paris2