3.0.5

Co-authored-by: David Larlet <david@larlet.fr>

.eslintrc.json

@@ -5,7 +5,7 @@
     "es6": true
   },
   "parserOptions": {
-    "ecmaVersion": 2020,
+    "ecmaVersion": 2021,
     "sourceType": "module"
   }
 }

.github/workflows/close-issues.yml

@@ -0,0 +1,23 @@
+# Doc: https://github.com/marketplace/actions/close-stale-issues
+name: Close inactive issues
+on:
+  schedule:
+    - cron: "30 1 * * *"
+
+jobs:
+  close-issues:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - uses: actions/stale@v5
+        with:
+          days-before-issue-stale: 30
+          days-before-issue-close: 14
+          stale-issue-label: "stale"
+          stale-issue-message: "This issue is stale because it has been open for 30 days with no activity."
+          close-issue-message: "This issue was closed because it has been inactive for 14 days since being marked as stale."
+          days-before-pr-stale: -1
+          days-before-pr-close: -1
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          any-of-labels: need infos,support

.github/workflows/release-helm.yml

@@ -0,0 +1,26 @@
+name: Release Charts
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  release:
+    # depending on default permission settings for your org (contents being read-only or read-write for workloads), you will have to add permissions
+    # see: https://docs.github.com/en/actions/security-guides/automatic-token-authentication#modifying-the-permissions-for-the-github_token
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Publish Helm charts
+        uses: stefanprodan/helm-gh-pages@v1.7.0
+        with:
+          charts_dir: charts
+          linting: off
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test-docs.yml

@@ -4,7 +4,9 @@ on:
   push:
     branches: [master]
   pull_request:
-    branches: [master]
+    path:
+      - umap/*
+      - pyproject.toml
 
 jobs:
   tests:
@@ -12,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     services:
       postgres:
-        image: postgis/postgis:12-2.5
+        image: postgis/postgis:14-3.4
         ports:
           - 5432:5432
         env:
@@ -20,7 +22,11 @@ jobs:
           POSTGRES_PASSWORD: postgres
           POSTGRES_DB: postgres
         options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5
-
+      redis:
+        image: redis
+        options: --health-cmd "redis-cli ping" --health-interval 10s --health-timeout 5s --health-retries 5
+        ports:
+          - 6379:6379
     strategy:
       fail-fast: false
       matrix:
@@ -28,9 +34,9 @@ jobs:
         database: [postgresql]
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up Python ${{ matrix.python-version }}
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: ${{ matrix.python-version }}
           cache: 'pip'
@@ -40,20 +46,24 @@ jobs:
           sudo apt update
           sudo apt install libgdal-dev
           python -m pip install --upgrade pip
-          make develop installjs vendors
+          make develop
+          npm install mocha
       - name: run tests
         run: make test
         env:
           DJANGO_SETTINGS_MODULE: 'umap.tests.settings'
           UMAP_SETTINGS: 'umap/tests/settings.py'
+          PLAYWRIGHT_TIMEOUT: '20000'
+          REDIS_HOST: localhost
+          REDIS_PORT: 6379
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
-          python-version: '3.11'
+          python-version: '3.12'
       - name: Install dependencies
         run: |
           python3 -m pip install -e .[test,dev]
@@ -64,18 +74,3 @@ jobs:
 
       - name: Run Docs
         run: make docs
-
-  docs:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Set up Python
-        uses: actions/setup-python@v4
-        with:
-          python-version: '3.11'
-      - name: Install dependencies
-        run: |
-          python3 -m pip install -r docs/requirements.txt
-
-      - name: Run Docs
-        run: mkdocs build

.gitignore

@@ -4,13 +4,13 @@ umap/settings/local/*
 docs/_build
 umap/remote_static
 tmp/*
-umap/static/umap/vendors
 site/*
 .pytest_cache/
 node_modules
 umap.conf
-data
-./static
+/data
+/static
+package-lock.json
 
 ### Python ###
 # Byte-compiled / optimized / DLL files
@@ -22,3 +22,11 @@ dist/
 *.egg-info/
 playwright/.auth/
 test-results/
+
+### Transifex ###
+tx
+
+# Helm
+charts/*/charts
+helmfile.yaml
+charts/*/Chart.lock

Dockerfile

@@ -1,24 +1,9 @@
-FROM node:alpine AS vendors
-
-RUN apk add git
-
-WORKDIR /srv/umap
-
-COPY package.json .
-
-RUN npm install
-
-COPY . .
-
-RUN npm run vendors
-
 # This part installs deps needed at runtime.
-FROM python:3.11-slim as common
+FROM python:3.12-slim AS common
 
 RUN apt-get update && \
     apt-get install -y --no-install-recommends \
         tini \
-        uwsgi \
         sqlite3 \
         libpq-dev \
         gdal-bin \
@@ -28,7 +13,7 @@ RUN apt-get update && \
     rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
 
 # This part adds deps needed only at buildtime.
-FROM common as build
+FROM common AS build
 
 RUN apt-get update && \
     apt-get install -y --no-install-recommends \
@@ -53,13 +38,12 @@ WORKDIR /srv/umap
 
 COPY . /srv/umap
 
-RUN /venv/bin/pip install .[docker]
+RUN /venv/bin/pip install .[docker,s3,sync]
 
 FROM common
 
 COPY --from=build /srv/umap/docker/ /srv/umap/docker/
 COPY --from=build /venv/ /venv/
-COPY --from=vendors /srv/umap/umap/static/umap/vendors /srv/umap/umap/static/umap/vendors
 
 WORKDIR /srv/umap
 

Makefile

@@ -1,7 +1,5 @@
 .DEFAULT_GOAL := help
 
-JS_TEST_URL := http://localhost:8001/umap/static/umap/test/index.html
-
 .PHONY: install
 install: ## Install the dependencies
 	python3 -m pip install --upgrade pip
@@ -9,21 +7,21 @@ install: ## Install the dependencies
 
 .PHONY: develop
 develop: ## Install the test and dev dependencies
-	python3 -m pip install -e .[test,dev]
+	python3 -m pip install -e .[test,dev,sync,s3]
 	playwright install
 
 .PHONY: format
 format: ## Format the code and templates files
-	djlint umap/templates --reformat &&\
-	isort --profile black . &&\
-	ruff format --target-version=py310 .
+	-djlint umap/templates --reformat
+	-isort --profile black umap/
+	-ruff format --target-version=py310 umap/
 
 .PHONY: lint
 lint: ## Lint the code and template files
-	npx eslint umap/static/umap/ &&\
-	djlint umap/templates --lint &&\
-	isort --check --profile black umap/ &&\
-	ruff format --check --target-version=py310 umap/ &&\
+	npx eslint umap/static/umap/js/
+	djlint umap/templates --lint
+	isort --check --profile black umap/
+	ruff format --check --target-version=py310 umap/
 	vermin --no-tips --violations -t=3.10- umap/
 
 docs: ## Compile the docs
@@ -48,6 +46,13 @@ docker: ## Create a new Docker image and publish it
 	docker build -t umap/umap:${VERSION} .
 	docker push umap/umap:${VERSION}
 
+.PHONY: helm
+helm: ## Build the helm chart and publish it
+	$(eval VERSION=$(shell hatch version))
+	$(eval PACKAGE=$(shell helm package --dependency-update --app-version ${VERSION} ./charts/umap | grep "Successfully packaged" | awk '{print $$NF}'))
+	@echo "Successfully packaged helm chart in: ${PACKAGE}"
+	helm push ${PACKAGE} oci://registry-1.docker.io/umap
+
 .PHONY: build
 build: ## Build the Python package before release
 	@hatch build --clean
@@ -57,11 +62,13 @@ publish: ## Publish the Python package to Pypi
 	@hatch publish
 	make clean
 
-test:
-	pytest -xv umap/tests/
+test: testpy testjs
+
+testpy:
+	pytest -vv umap/tests/ --dist=loadgroup --reruns 1 --maxfail 10
 
 test-integration:
-	pytest -xv umap/tests/integration/
+	pytest -xv umap/tests/integration/ --dist=loadgroup
 
 clean:
 	rm -f dist/*
@@ -77,29 +84,21 @@ vendors:
 installjs:
 	npm install
 testjs: node_modules
-	@{ \
-		trap 'kill $$PID; exit' INT; \
-		python -m http.server 8001 & \
-		PID=$$!; \
-		sleep 1; \
-		echo "Opening $(JS_TEST_URL)"; \
-		if command -v python -m webbrowser > /dev/null 2>&1; then \
-			python -m webbrowser "$(JS_TEST_URL)"; \
-		else \
-			echo "Please open $(JS_TEST_URL) in your web browser"; \
-		fi; \
-		wait $$PID; \
-	}
+	node_modules/mocha/bin/mocha.js umap/static/umap/unittests/
 tx_push:
 	tx push -s
 tx_pull:
 	tx pull
+changelog:
+	$(eval VERSION=$(shell hatch version))
+	@# Bearer token is readonly
+	@printf $(shell curl -sL -X POST -H "Authorization: Bearer ${GITHUB_TOKEN}" https://api.github.com/repos/umap-project/umap/releases/generate-notes  -d '{"target_commitish":"master","previous_tag_name":"", "tag_name": "${VERSION}"}' | jq .body | sed 's/https:\/\/github.com\/umap-project\/umap\/pull\//#/g' | sed 's/`/\\`/g')
 
 jsdir = umap/static/umap/js/
 filepath = "${jsdir}*.js"
 .PHONY: pretty
-pretty: ## Apply PrettierJS to all JS files (or specified `filepath`)
-	./node_modules/prettier/bin-prettier.js --write ${filepath}
+pretty: ## Apply Biome to all JS files (or specified `jsdir`)
+	./node_modules/@biomejs/biome/bin/biome check --write ${jsdir}
 
 .PHONY: lebab
 lebab: ## Convert JS `filepath` to modern syntax with Lebab, then prettify

biome.json

@@ -0,0 +1,52 @@
+{
+  "files": {
+    "include": ["umap/static/umap/js/**"],
+    "ignore": ["umap/static/umap/vendors/**"]
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "ignore": [],
+    "attributePosition": "auto",
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 88
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "style": {
+        "useBlockStatements": "off",
+        "noShoutyConstants": "warn",
+        "noParameterAssign": "off"
+      },
+      "complexity": {
+        "noForEach": "off"
+      },
+      "performance": {
+        "noDelete": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "arrowParentheses": "always",
+      "bracketSameLine": false,
+      "bracketSpacing": true,
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "quoteStyle": "single",
+      "semicolons": "asNeeded",
+      "trailingCommas": "es5"
+    }
+  },
+  "json": {
+    "formatter": {
+      "trailingCommas": "none"
+    }
+  },
+  "organizeImports": {
+    "enabled": true
+  }
+}

charts/umap/.helmignore

@@ -0,0 +1,23 @@
+# Patterns to ignore when building packages.
+# This supports shell glob matching, relative path matching, and
+# negation (prefixed with !). Only one pattern per line.
+.DS_Store
+# Common VCS dirs
+.git/
+.gitignore
+.bzr/
+.bzrignore
+.hg/
+.hgignore
+.svn/
+# Common backup files
+*.swp
+*.bak
+*.tmp
+*.orig
+*~
+# Various IDEs
+.project
+.idea/
+*.tmproj
+.vscode/

charts/umap/Chart.yaml

@@ -0,0 +1,16 @@
+apiVersion: v2
+name: umap
+description: A Helm chart to deploy umap on Kubernetes
+
+type: application
+
+version: 0.1.0
+
+appVersion: "2.7.2"
+
+dependencies:
+  - name: cnpg-cluster
+    version: 2.0.1
+    repository: https://charts.enix.io/
+    alias: cnpg
+    condition: cnpg.enabled

charts/umap/templates/_helpers.tpl

@@ -0,0 +1,73 @@
+{{/*
+Expand the name of the chart.
+*/}}
+{{- define "umap.name" -}}
+{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Create a default fully qualified app name.
+We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).
+If release name contains chart name it will be used as a full name.
+*/}}
+{{- define "umap.fullname" -}}
+{{- if .Values.fullnameOverride }}
+{{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- $name := default .Chart.Name .Values.nameOverride }}
+{{- if contains $name .Release.Name }}
+{{- .Release.Name | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" }}
+{{- end }}
+{{- end }}
+{{- end }}
+
+{{/*
+Create chart name and version as used by the chart label.
+*/}}
+{{- define "umap.chart" -}}
+{{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Common labels
+*/}}
+{{- define "umap.labels" -}}
+helm.sh/chart: {{ include "umap.chart" . }}
+{{ include "umap.selectorLabels" . }}
+{{- if .Chart.AppVersion }}
+app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
+{{- end }}
+app.kubernetes.io/managed-by: {{ .Release.Service }}
+{{- end }}
+
+{{/*
+Selector labels
+*/}}
+{{- define "umap.selectorLabels" -}}
+app.kubernetes.io/name: {{ include "umap.name" . }}
+app.kubernetes.io/instance: {{ .Release.Name }}
+{{- end }}
+
+{{/*
+Create the name of the service account to use
+*/}}
+{{- define "umap.serviceAccountName" -}}
+{{- if .Values.serviceAccount.create }}
+{{- default (include "umap.fullname" .) .Values.serviceAccount.name }}
+{{- else }}
+{{- default "default" .Values.serviceAccount.name }}
+{{- end }}
+{{- end }}
+
+{{/*
+Get the name of the persistent volume claim
+*/}}
+{{- define "umap.pvcName" -}}
+  {{- if .Values.persistence.existingClaim -}}
+    {{- printf "%s" (tpl .Values.persistence.existingClaim $) -}}
+  {{- else -}}
+      {{- printf "%s" (include "umap.fullname" .) -}}
+  {{- end -}}
+{{- end -}}

charts/umap/templates/deployment.yaml

@@ -0,0 +1,110 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ include "umap.fullname" . }}
+  labels:
+    {{- include "umap.labels" . | nindent 4 }}
+spec:
+  replicas: {{ .Values.replicaCount }}
+  selector:
+    matchLabels:
+      {{- include "umap.selectorLabels" . | nindent 6 }}
+  template:
+    metadata:
+      annotations:
+        checksum/config: {{ include (print $.Template.BasePath "/secret-config.yaml") . | sha256sum }}
+        checksum/env: {{ include (print $.Template.BasePath "/secret-env.yaml") . | sha256sum }}
+      {{- with .Values.podAnnotations }}
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      labels:
+        {{- include "umap.labels" . | nindent 8 }}
+        {{- with .Values.podLabels }}
+        {{- toYaml . | nindent 8 }}
+        {{- end }}
+    spec:
+      {{- with .Values.imagePullSecrets }}
+      imagePullSecrets:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      serviceAccountName: {{ include "umap.serviceAccountName" . }}
+      securityContext:
+        {{- toYaml .Values.podSecurityContext | nindent 8 }}
+      containers:
+        - name: {{ .Chart.Name }}
+          securityContext:
+            {{- toYaml .Values.securityContext | nindent 12 }}
+          image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
+          imagePullPolicy: {{ .Values.image.pullPolicy }}
+          ports:
+            - name: http
+              containerPort: {{ .Values.service.port }}
+              protocol: TCP
+          startupProbe:
+            httpGet:
+              path: /stats
+              port: http
+          livenessProbe:
+            httpGet:
+              path: /stats
+              port: http
+          readinessProbe:
+            httpGet:
+              path: /stats
+              port: http
+          resources:
+            {{- toYaml .Values.resources | nindent 12 }}
+          {{- if .Values.cnpg.enabled }}
+          env:
+          - name: DATABASE_URL
+            valueFrom:
+              secretKeyRef:
+                name: {{ .Release.Name }}-cnpg-app
+                key: uri
+          - name: UMAP_SETTINGS
+            value: /etc/umap/umap.conf
+          {{- end }}
+          envFrom:
+          - secretRef:
+              {{- if .Values.umap.envFromSecret }}
+              name: {{ .Values.umap.envFromSecret }}
+              {{- else }}
+              name: {{ include "umap.fullname" . }}-env
+              {{- end }}
+          volumeMounts:
+            - name: config
+              mountPath: /etc/umap/
+              readOnly: true
+            - name: statics
+              mountPath: /srv/umap/static
+          {{- if .Values.persistence.enabled }}
+            - name: data
+              mountPath: /srv/umap/uploads/
+          {{- end }}
+      volumes:
+        - name: config
+          secret:
+            {{- if .Values.umap.configFromSecret }}
+            secretName: {{ .Values.umap.configFromSecret }}
+            {{- else }}
+            secretName: {{ include "umap.fullname" . }}-config
+            {{- end }}
+        - name: statics
+          emptyDir: {}
+      {{- if .Values.persistence.enabled }}
+        - name: data
+          persistentVolumeClaim:
+            claimName: {{ include "umap.pvcName" . }}
+      {{- end }}
+      {{- with .Values.nodeSelector }}
+      nodeSelector:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.affinity }}
+      affinity:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.tolerations }}
+      tolerations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}

charts/umap/templates/ingress.yaml

@@ -0,0 +1,31 @@
+{{- if .Values.ingress.enabled -}}
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: {{ include "umap.fullname" . }}
+  {{- with .Values.ingress.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+spec:
+  ingressClassName: {{ .Values.ingress.className }}
+  tls:
+    - hosts:
+        {{- range .Values.ingress.hosts }}
+        - {{ . | quote }}
+        {{- end }}
+      secretName: {{ include "umap.fullname" . }}-tls
+  rules:
+    {{- range .Values.ingress.hosts }}
+    - host: {{ . | quote }}
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: {{ include "umap.fullname" $ }}
+                port:
+                  number: {{ $.Values.service.port }}
+    {{- end }}
+{{- end }}

charts/umap/templates/pvc.yaml

@@ -0,0 +1,24 @@
+{{- if and (.Values.persistence.enabled) (not .Values.persistence.existingClaim) }}
+kind: PersistentVolumeClaim
+apiVersion: v1
+metadata:
+  {{- if .Values.persistence.annotations }}
+  annotations:
+    {{- toYaml .Values.persistence.annotations | nindent 4 }}
+  {{- end }}
+  name: {{ include "umap.pvcName" . }}
+  labels:
+    {{- include "umap.labels" . | nindent 4 }}
+spec:
+  accessModes:
+  {{- range .Values.persistence.accessModes }}
+    - {{ . | quote }}
+  {{- end }}
+  {{- with .Values.persistence.resources }}
+  resources:
+  {{- toYaml . | nindent 4 }}
+  {{- end }}
+  {{- if .Values.persistence.storageClassName }}
+  storageClassName: {{ .Values.persistence.storageClassName | quote }}
+  {{- end }}
+{{- end }}

charts/umap/templates/secret-config.yaml

@@ -0,0 +1,11 @@
+{{ if not .Values.umap.configFromSecret }}
+apiVersion: v1
+kind: Secret
+metadata:
+  name: {{ include "umap.fullname" . }}-config
+  labels:
+    {{- include "umap.labels" . | nindent 4 }}
+type: Opaque
+data:
+  umap.conf: {{ .Values.umap.config | b64enc }}
+{{- end }}

charts/umap/templates/secret-env.yaml

@@ -0,0 +1,13 @@
+{{ if not .Values.umap.envFromSecret }}
+apiVersion: v1
+kind: Secret
+metadata:
+  name: {{ include "umap.fullname" . }}-env
+  labels:
+    {{- include "umap.labels" . | nindent 4 }}
+type: Opaque
+data:
+{{- range $key, $value := .Values.umap.environment }}
+  {{ $key }}: "{{ $value | b64enc }}"
+{{- end }}
+{{- end }}

charts/umap/templates/service.yaml

@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ include "umap.fullname" . }}
+  labels:
+    {{- include "umap.labels" . | nindent 4 }}
+spec:
+  type: {{ .Values.service.type }}
+  ports:
+    - port: {{ .Values.service.port }}
+      targetPort: http
+      protocol: TCP
+      name: http
+  selector:
+    {{- include "umap.selectorLabels" . | nindent 4 }}

charts/umap/templates/serviceaccount.yaml

@@ -0,0 +1,13 @@
+{{- if .Values.serviceAccount.create -}}
+apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: {{ include "umap.serviceAccountName" . }}
+  labels:
+    {{- include "umap.labels" . | nindent 4 }}
+  {{- with .Values.serviceAccount.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+automountServiceAccountToken: {{ .Values.serviceAccount.automount }}
+{{- end }}

charts/umap/values.yaml

@@ -0,0 +1,125 @@
+# Default values for umap.
+# This is a YAML-formatted file.
+# Declare variables to be passed into your templates.
+
+replicaCount: 1
+
+image:
+  repository: umap/umap
+  pullPolicy: IfNotPresent
+  # Overrides the image tag whose default is the chart appVersion.
+  tag: ""
+
+imagePullSecrets: []
+nameOverride: ""
+fullnameOverride: ""
+
+serviceAccount:
+  # Specifies whether a service account should be created
+  create: true
+  # Automatically mount a ServiceAccount's API credentials?
+  automount: true
+  # Annotations to add to the service account
+  annotations: {}
+  # The name of the service account to use.
+  # If not set and create is true, a name is generated using the fullname template
+  name: ""
+
+podAnnotations: {}
+podLabels: {}
+
+podSecurityContext:
+  runAsUser: 1000
+  runAsGroup: 1000
+  fsGroup: 1000
+
+securityContext:
+  capabilities:
+    drop:
+    - ALL
+  readOnlyRootFilesystem: true
+  runAsNonRoot: true
+  runAsUser: 1000
+
+service:
+  type: ClusterIP
+  port: 8000
+
+ingress:
+  enabled: false
+  className: ""
+  annotations: {}
+  hosts:
+    - example.org
+
+resources: {}
+  # We usually recommend not to specify default resources and to leave this as a conscious
+  # choice for the user. This also increases chances charts run on environments with little
+  # resources, such as Minikube. If you do want to specify resources, uncomment the following
+  # lines, adjust them as necessary, and remove the curly braces after 'resources:'.
+  # limits:
+  #   cpu: 100m
+  #   memory: 128Mi
+  # requests:
+  #   cpu: 100m
+  #   memory: 128Mi
+
+nodeSelector: {}
+
+tolerations: []
+
+affinity: {}
+
+umap:
+  # Set environment variables supported by umap here
+  # see: https://docs.umap-project.org/en/stable/config/settings/
+  environment:
+    SECRET_KEY: CHANGE_ME
+    STATIC_ROOT: /srv/umap/static
+    MEDIA_ROOT: /srv/umap/uploads
+  # Configure environment variables using an existing secret in the same namespace.
+  # In this case the values above are not used
+  envFromSecret: null
+
+  # You can also provide umap.conf content here:
+  config: |
+    from umap.settings.base import *
+
+    # See: https://github.com/umap-project/umap/blob/master/umap/settings/local.py.sample
+  # Configure config file using an existing secret in the same namespace.
+  # In this case the values above are not used
+  configFromSecret: null
+
+persistence:
+  enabled: true
+  accessModes:
+    - ReadWriteOnce
+  annotations: {}
+  existingClaim: ""
+  storageClassName: ""
+  resources:
+    requests:
+      storage: 1Gi
+
+# Configure Cloudnative-pg operator for Postgis database
+# Alternatively, you can disable CNPG and provide your own
+# Postgis database by setting the `umap.environment.DATABASE_URL`
+cnpg:
+  enabled: true
+  replicaCount: 2
+  image:
+    repository: ghcr.io/cloudnative-pg/postgis
+    tag: 14
+  persistence:
+    storageClass: ""
+    size: 1Gi
+  clusterExtraSpec:
+    bootstrap:
+      initdb:
+        postInitTemplateSQL:
+          - CREATE EXTENSION postgis;
+          - CREATE EXTENSION postgis_topology;
+          - CREATE EXTENSION fuzzystrmatch;
+          - CREATE EXTENSION postgis_tiger_geocoder;
+
+  # See available values here: https://artifacthub.io/packages/helm/enix/cnpg-cluster?modal=values

docker-compose.yml

@@ -1,11 +1,19 @@
-version: '3'
-
 services:
 
+  # Usefull only to use the real time collaboration
+  redis:
+    image: redis:latest
+    healthcheck:
+      test: ["CMD-SHELL", "redis-cli ping | grep PONG"]
+      interval: 1s
+      timeout: 3s
+      retries: 5
+    command: ["redis-server"]
+
   db:
     healthcheck:
-        test: ["CMD-SHELL", "pg_isready -U postgres"]
-        interval: 2s
+      test: [ "CMD-SHELL", "pg_isready -U postgres" ]
+      interval: 2s
     image: postgis/postgis:14-3.3-alpine
     environment:
       - POSTGRES_HOST_AUTH_METHOD=trust
@@ -16,18 +24,35 @@ services:
     depends_on:
       db:
         condition: service_healthy
-    image: umap/umap:2.0.2
-    ports:
-      - "${PORT-8000}:8000"
+      redis:
+        condition: service_healthy
+    image: umap/umap:3.0.2
     environment:
+      - STATIC_ROOT=/srv/umap/static
+      - MEDIA_ROOT=/srv/umap/uploads
       - DATABASE_URL=postgis://postgres@db/postgres
       - SECRET_KEY=some-long-and-weirdly-unrandom-secret-key
       - SITE_URL=https://umap.local/
       - UMAP_ALLOW_ANONYMOUS=True
       - DEBUG=1
+      - REALTIME_ENABLED=1
+      - REDIS_URL=redis://redis:6379
     volumes:
       - data:/srv/umap/uploads
+      - static:/srv/umap/static
+
+  proxy:
+    image: nginx:latest
+    ports:
+      - "8000:80"
+    volumes:
+      - ./docker/nginx.conf:/etc/nginx/nginx.conf:ro
+      - static:/static:ro
+      - data:/data:ro
+    depends_on:
+      - app
 
 volumes:
   data:
+  static:
   db:

docker/entrypoint.sh

@@ -9,5 +9,5 @@ umap collectstatic --noinput
 umap wait_for_database
 # then migrate the database
 umap migrate
-# run uWSGI
-exec uwsgi --ini docker/uwsgi.ini
+# run the server
+exec uvicorn --proxy-headers --no-access-log --host 0.0.0.0 umap.asgi:application

docker/nginx.conf

@@ -0,0 +1,111 @@
+events {
+    worker_connections  1024;  # Adjust this to your needs
+}
+
+
+
+http {
+    proxy_cache_path /tmp/nginx_ajax_proxy_cache levels=1:2 keys_zone=ajax_proxy:10m inactive=60m;
+    proxy_cache_key "$uri$is_args$args";
+
+    map $http_upgrade $connection_upgrade {
+        default upgrade;
+        ''      close;
+    }
+
+    types {
+      application/javascript mjs;
+    }
+
+    include       mime.types;
+    default_type  application/octet-stream;
+    sendfile        on;
+    keepalive_timeout  65;
+
+    # Server block
+    server {
+        listen       80;
+        server_name  localhost;
+
+        # Static file serving
+        location /static/ {
+            alias /static/;
+            gzip on;
+            gzip_vary on;
+            gzip_proxied any;
+            gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
+            expires 365d;
+            access_log /dev/null;
+        }
+
+        # Geojson files
+        location /uploads/  {
+            alias /data/;
+            expires 30d;
+        }
+
+        location /favicon.ico {
+            alias /static/favicon.ico;
+        }
+
+        # X-Accel-Redirect
+        location /internal/ {
+            internal;
+            gzip_vary on;
+            gzip_static on;
+            add_header X-DataLayer-Version $upstream_http_x_datalayer_version;
+            alias /data/;
+        }
+
+        # Ajax proxy
+        location ~ ^/proxy/(.*) {
+            internal;
+            add_header X-Proxy-Cache $upstream_cache_status always;
+            proxy_cache_background_update on;
+            proxy_cache_use_stale updating;
+            proxy_cache ajax_proxy;
+            proxy_cache_valid 1m;  # Default. Umap will override using X-Accel-Expires
+            set $target_url $1;
+            # URL is encoded, so we need a few hack to clean it back.
+            if ( $target_url ~ (.+)%3A%2F%2F(.+) ){ # fix :// between scheme and destination
+              set $target_url $1://$2;
+            }
+            if ( $target_url ~ (.+?)%3A(.*) ){ # fix : between destination and port
+              set $target_url $1:$2;
+            }
+            if ( $target_url ~ (.+?)%2F(.*) ){ # fix / after port, the rest will be decoded by proxy_pass
+              set $target_url $1/$2;
+            }
+            resolver 8.8.8.8;
+            add_header X-Proxy-Target $target_url; # For debugging
+            proxy_pass_request_headers off;
+            proxy_set_header Content-Type $http_content_type;
+            proxy_set_header Content-Encoding $http_content_encoding;
+            proxy_set_header Content-Length $http_content_length;
+            proxy_read_timeout 10s;
+            proxy_connect_timeout 5s;
+            proxy_ssl_server_name on;
+            proxy_pass $target_url;
+            proxy_intercept_errors on;
+            error_page 301 302 307 = @handle_proxy_redirect;
+        }
+        location @handle_proxy_redirect {
+            resolver 8.8.8.8;
+            set $saved_redirect_location '$upstream_http_location';
+            proxy_pass $saved_redirect_location;
+        }
+
+        # Proxy pass to ASGI server
+        location / {
+            proxy_pass http://app:8000;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection $connection_upgrade;
+            proxy_redirect off;
+            proxy_buffering off;
+        }
+    }
+}

docker/uwsgi.ini

@@ -1,12 +0,0 @@
-[uwsgi]
-http = :$(PORT)
-home = /venv
-module = umap.wsgi:application
-master = True
-vacuum = True
-max-requests = 5000
-processes = 4
-enable-threads = true
-static-map = /static=/srv/umap/static
-static-map = /uploads=/srv/umap/uploads
-buffer-size = 32768

docs-users/articles.md

@@ -0,0 +1,97 @@
+# Articles
+
+## [Towards uMap 3 😱](https://www.openstreetmap.org/user/David%20Larlet/diary/404654) (2024-07-16)
+
+> The latest 2.4.X release sets the path for two major requested features: real-time collaboration and one-click remote data importers.
+>
+> Additionally, minor improvements and bugfixes have made the tool more stable and usable.
+
+[Full article →](https://www.openstreetmap.org/user/David%20Larlet/diary/404654){ .md-button }
+
+
+## [Adding collaboration on uMap, fourth update](https://blog.notmyidea.org/adding-collaboration-on-umap-fourth-update.html) (2024-06-20)
+
+> The main branch of uMap now ships a web socket server, enabling local changes to be replicated to other peers.
+>
+> Here is short video capturing how the import of <mark>some data can be synced between two browsers</mark>.
+
+[Full article →](https://blog.notmyidea.org/adding-collaboration-on-umap-fourth-update.html){ .md-button }
+
+
+## [Mapping the CUNY Digital History Archive](https://cuny.manifoldapp.org/read/mapping-the-cuny-digital-history-archive) (2024-05)
+
+> This article discusses the implementation of the Learning CUNY History project, designed as an open education praxis for teaching and learning. It’s an example of a project-based assignment for undergraduate students and has evolved to explore the impact of integrating digital archives and digital mapping as instructional-digital tools. The project activates the CUNY Digital History Archive as a method of developing students’ digital literacy skills and investigates the potential to facilitate students’ learning. The archive is activated through student investigations and writings related to archival materials. Students then map the items as an interactive semester assignment. The project is described as occurring over three phases, and compares different digital mapping platforms. <mark>Ultimately, after careful consideration since its pilot phase, the project utilizes Open Street Map and uMap.</mark>
+
+[Full article →](https://cuny.manifoldapp.org/read/mapping-the-cuny-digital-history-archive){ .md-button }
+
+
+## [uMap 2 and beyond 🚀](https://www.openstreetmap.org/user/David%20Larlet/diary/403560) (2024-02-23)
+
+> A [major version](https://pypi.org/project/umap-project/2.0.0/) of uMap has been released last week.
+>
+> <mark>This release is inauguring a new era in versioning uMap</mark>: in the future, we’ll take care of better documenting breaking changes, so expect more major releases from now on. More details on [how we version](https://docs.umap-project.org/en/master/release/#when-to-make-a-release).
+>
+> A comprehensive changelog for that version is available in our technical documentation. Most of the changes for a major version are indeed technical, we are taking care of people deploying and maintaining instances with that approach. User-facing features are deployed continuously with our minor versions. We think that scheme is more valuable for the community.
+
+[Full article →](https://www.openstreetmap.org/user/David%20Larlet/diary/403560){ .md-button }
+
+
+## [Adding collaboration on uMap, third update](https://blog.notmyidea.org/adding-collaboration-on-umap-third-update.html) (2024-02-15)
+
+> I’ve spent the last few weeks working on uMap, still with the goal of bringing real-time collaboration to the maps. I’m not there yet, but <mark>I’ve made some progress that I will relate here</mark>.
+
+[Full article →](https://blog.notmyidea.org/adding-collaboration-on-umap-third-update.html){ .md-button }
+
+
+## [Adding Real-Time Collaboration to uMap, second week](https://blog.notmyidea.org/adding-real-time-collaboration-to-umap-second-week.html) (2023-11-21)
+
+> I continued working on uMap, an open-source map-making tool to create and share customizable maps, based on Open Street Map data.
+>
+> <mark>Here is a summary of what I did:</mark>
+>
+> * I reviewed, rebased and made some minor changes to [a pull request which makes it possible to merge geojson features together](https://github.com/umap-project/umap/pull/772) ;
+> * I’ve explored around the idea of using SQLite inside the browser, for two reasons : it could make it possible to use the [Spatialite](https://www.gaia-gis.it/fossil/libspatialite/index) extension, and it might help us to implement a CRDT with [cr-sqlite](https://github.com/vlcn-io/cr-sqlite) ;
+> * I learned a lot about the SIG field. This is a wide ecosystem with lots of moving parts, which I understand a bit better now.
+
+[Full article →](https://blog.notmyidea.org/adding-real-time-collaboration-to-umap-second-week.html){ .md-button }
+
+
+## [Adding Real-Time Collaboration to uMap, first week](https://blog.notmyidea.org/adding-real-time-collaboration-to-umap-first-week.html) (2023-11-11)
+
+> Last week, I’ve been lucky to start working on uMap, an open-source map-making tool to create and share customizable maps, based on Open Street Map data.
+>
+> <mark>My goal is to add real-time collaboration to uMap</mark>, but we first want to be sure to understand the issue correctly. There are multiple ways to solve this, so one part of the journey is to understand the problem properly (then, we’ll be able to chose the right path forward).
+
+[Full article →](https://blog.notmyidea.org/adding-real-time-collaboration-to-umap-first-week.html){ .md-button }
+
+
+## [Experimental choropleth layer in uMap](https://www.openstreetmap.org/user/ybon/diary/402589) (2023-10-12)
+
+> We’ve just released the version 1.9.2 of uMap, that includes a new experimental type of layer: <mark>choropleth!</mark>
+
+[Full article →](https://www.openstreetmap.org/user/ybon/diary/402589){ .md-button }
+
+
+## [uMap: fine-grained permissions and more](https://www.openstreetmap.org/user/David%20Larlet/diary/402475) (2023-09-27)
+
+> We finally managed to tackle a very popular feature request: [datalayers’ fine-grained permissions](https://github.com/umap-project/umap/pull/1307) 🎉. This is a huge step forward, <mark>allowing for a given map owner to only open a particular datalayer to edition</mark>. It will help people with contributive maps who need to setup a stable/fixed base layer. It also paved the way for even more control over the objects that are allowed for addition and/or edition. Please share with us your desired workflows.
+
+[Full article →](https://www.openstreetmap.org/user/David%20Larlet/diary/402475){ .md-button }
+
+
+## [Some news about uMap!](https://www.openstreetmap.org/user/ybon/diary/402248) (2023-08-25)
+
+> Since a few month, <mark>uMap has been integrated in a French state incubator</mark>, so things are moving quite a lot!
+>
+> uMap is now ten years old, and is deployed on many instances around the world. The one I know well is hosted by OSM France, and is close to reach one million maps created and 100.000 users.
+>
+> This incubation program is ported by the French [“Accélérateur d’initiatives citoyennes”](https://citoyens.transformation.gouv.fr/), it includes coaches and a small budget for non tech needs (UI/UX…). One goal of this program is to find financial support for uMap development and maintainance. A French administration, the [Agence pour la cohésion des territoires](https://agence-cohesion-territoires.gouv.fr/), is the first uMap financial backer since a few months. This allowed us to put up a small team to work, part time, in uMap […]
+
+[Full article →](https://www.openstreetmap.org/user/ybon/diary/402248){ .md-button }
+
+
+## [uMap: A Free, Open-Source Alternative to Google My Maps](https://cartographicperspectives.org/index.php/journal/article/view/1729) (2022-02-08)
+
+> Since their release in 2005, Google Maps-based tools have become the de facto solutions for a variety of online cartographic projects. Their success has been accompanied by a range of critiques denouncing the individualistic market-based logic imposed by these mapping services. Alternative options to this dominant model have been released since then; uMap is one of them. <mark>uMap is a free, open-source online mapping platform that builds on OpenStreetMap to enable anyone to easily publish web maps individually or collaboratively.</mark> In this paper, we reflect on the potential and limits of uMap based on our own experiences of deploying it in six different mapping projects. Through these experiences, uMap appears particularly well-suited for collaborative mapping projects, due to its ease in connecting to remote data and its high level of interoperability with a range of other applications. On the other hand, uMap seems less relevant for crowdmapping projects, due to its lack of built-in options to manage and control public contributions. Finally, the open-source philosophy of uMap, combined with its simplicity of use and its strong collaborative capacity, make it a great option for activist mapping projects as well as for pedagogical purposes to teach a range of topics including online collaborative cartography.
+
+[Full article →](https://cartographicperspectives.org/index.php/journal/article/view/1729){ .md-button }

docs-users/assets/logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128">
+  <path d="M36.5 6.2A64 64 0 0 0 64 128C14.5 81.8 3.1 24.8 36.5 6.2zM64 128A64 64 0 0 0 91.5 6.2c33.4 18.6 22 75.6-27.5 121.8z" fill="#fff"/>
+  <path d="M87.7 33.8a23.7 23.7 0 1 1-47.4 0 23.7 23.7 0 0 1 47.4 0z" fill="#fff"/>
+</svg>

docs-users/fr/articles.md

@@ -0,0 +1,72 @@
+# Articles
+
+## [Créer des cartes interactives personnalisées : uMap ou Leaflet ?](https://www.d-booker.fr/content/242-creer-des-cartes-interactives-personnalisees-umap-ou-leaflet) (2025-02-01)
+
+> Dans ce guide, nous comparerons deux solutions libres populaires : uMap, une plateforme en ligne intuitive, et Leaflet, une bibliothèque JavaScript puissante.
+
+[Article complet →](https://www.d-booker.fr/content/242-creer-des-cartes-interactives-personnalisees-umap-ou-leaflet){ .md-button }
+
+## [Vers uMap 3 😱](https://www.openstreetmap.org/user/David%20Larlet/diary/404654#vers-umap-3-) (2024-07-16)
+
+> La dernière version 2.4.X ouvre la voie à deux fonctionnalités majeures demandées : la collaboration en temps réel et les assistants d’import de données à distance en un clic.
+>
+> En outre, des améliorations mineures et des corrections de bogues ont rendu l’outil plus stable et plus utilisable.
+
+[Article complet →](https://www.openstreetmap.org/user/David%20Larlet/diary/404654#vers-umap-3-){ .md-button }
+
+## [uMap au cœur de la communication des Chambres d’agriculture](https://umap.dev.incubateur.anct.gouv.fr/blog/umap-au-cur-de-la-communication-des-chambres-dagriculture/) (2024-07-10)
+
+> Un témoignage de Frédéric Guimier, Consultant Communication et projets numériques au sein de la Chambre d’agriculture Pays de la Loire.
+
+[Article complet →](https://umap.incubateur.anct.gouv.fr/blog/umap-au-cur-de-la-communication-des-chambres-dagriculture/){ .md-button }
+
+## [Recenser les cabanes en pierres sèches : projet culturel & collaboratif](https://insidemap.eu/recenser-les-cabanes-en-pierres-seches-projet-culturel-collaboratif/) (2024-07-02)
+
+> Une trouvaille impromptue sur uMap, en balayant les cartes qui s’affichent : un carroyage et des dizaines de points, qui au clic affichent des photographies de constructions en pierres sèches. <mark>Il restait à tirer le fil pour comprendre l’ampleur du projet : le recensement des centaines de cabanes</mark>, relayé sur des sites Internet et adossée à une base de données, Wikipedra. Merci à Jean Louis Barthe pour cette très belle découverte et ses explications.
+
+[Article complet →](https://insidemap.eu/recenser-les-cabanes-en-pierres-seches-projet-culturel-collaboratif/){ .md-button }
+
+## [Partager l’information & mieux prévenir le risque inondation avec uMap](https://umap.incubateur.anct.gouv.fr/blog/partager-linformation-mieux-prevenir-le-risque-inondation-avec-umap/) (2024-06-10)
+
+> Dans les montagnes des Hautes-Pyrénées, les gaves connaissent régulièrement des crues torrentielles, avec comme conséquence des risques majeurs dans les vallées. <mark>Voici la présentation d’un projet global qui associe communication et analyse technique sur un outil cartographique basé sur uMap.</mark> Le syndicat mixte du Pays de Lourdes et des Vallées des Gaves propose un portail d’information consacré à la mémoire des inondations pour sensibiliser les maires et la population des Vallées des Gaves. Benoît Thouary, chargé d’études au service prévention des inondations, géographe de formation spécialisé en prévention des risques naturels, présente cette approche très complète, adossée à des archives multimédias et à une base de données.
+
+[Article complet →](https://umap.incubateur.anct.gouv.fr/blog/partager-linformation-mieux-prevenir-le-risque-inondation-avec-umap/){ .md-button }
+
+## [La cartographie numérique pour mieux lire et mieux écrire](https://eduscol.education.fr/4032/la-cartographie-numerique-pour-mieux-lire-et-mieux-ecrire) (2024-06)
+
+> uMap est une plateforme de cartographie libre et gratuite qui fait partie du SILL (Socle Interministériel des Logiciels Libres). Elle propose par défaut uniquement des fonds de cartes récents, accompagnés d’outils de cartographie similaires à ceux d’Édugéo et de Geoportail, avec des fonctionnalités intéressantes de sauvegarde et de partage des cartes. Il est possible d’ajouter des fonds de cartes anciens en suivant la démarche indiquée avec l’exemple de la carte de Metz 1872.
+
+[Article complet →](https://eduscol.education.fr/4032/la-cartographie-numerique-pour-mieux-lire-et-mieux-ecrire){ .md-button }
+
+## [Carte des arbres remarquables, la suite…](https://insidemap.eu/carte-des-arbres-remarquables-la-suite/) (2024-05-25)
+
+> Depuis la première version de la carte en mars 2019, les données ont pu changer et les fonctionnalités d’uMap ont évolué. Voilà l’occasion de refaire la carte et d’explorer d’autres approches. Bien entendu les fonctionnalités de diaporama sont toujours actives sur la carte d’origine.
+>
+> <mark>Les données sur les arbres remarquables sont à disposition sur le portail gouvernemental data.gouv.fr.</mark> Pour automatiser leur import, il est intéressant de choisir le lien…
+
+[Article complet →](https://insidemap.eu/carte-des-arbres-remarquables-la-suite/){ .md-button }
+
+## [Tutoriel : cartographier votre commune, ses voies et ses adresses, avec uMap](https://adresse.data.gouv.fr/blog/utilisez-umap-pour-visualiser-vos-adresses) (2024-05-13)
+
+> Il peut parfois s’avérer utile, dans le cadre d’un travail préparatoire ou pour une présentation, de créer une carte personnalisée de sa commune. À cet effet, <mark>l’ANCT met à disposition un outil, libre et open-source, à destination des agents publics pour créer des cartes en ligne</mark>, uMap.
+>
+> Cet outil, par ailleurs accessible sur d’autres instances pour le grand public ([uMap OSMFr](https://umap.openstreetmap.fr/) et [FramaCarte](https://framacarte.org/)), se distingue par sa grande polyvalence et ses fonctionnalités avancées de personnalisation. L’instance [uMap ANCT](https://umap.incubateur.anct.gouv.fr/) vise à mieux intégrer cet outil avec les autres outils des agents, à développer des fonctionnalités spécifiques et des configurations sur mesure, ainsi que faciliter un support dédié.
+
+[Article complet →](https://adresse.data.gouv.fr/blog/utilisez-umap-pour-visualiser-vos-adresses){ .md-button }
+
+## [Hervé Baronnet : Libres balades pédagogiques](https://www.cafepedagogique.net/2024/03/29/herve-baronnet-libres-balades-pedagogiques/) (2024-03-29)
+
+> Le numérique peut-il aider à franchir les murs de l’École ? L’École peut-elle aider à s’affranchir des enfermements numériques ? Double défi joliment relevé par Hervé Baronnet, professeur des écoles dans l’académie de Bordeaux, membre de la Fabrique des Communs Pédagogiques. <mark>Avec le logiciel libre de cartographie numérique uMap, les élèves sont invités à des « balades pédagogiques »</mark> : à explorer et à s’approprier un territoire en produisant des cartes collaboratives et créatives. Présentée à la Journée Du Libre Educatif le 29 mars 2024 à Créteil, la démarche, inspirante, « enseigne des savoirs de manière interactive, concrète et mémorable. » Elle forge le désir et la capacité d’élargir, de découvrir, de conquérir son espace de vie. « En sortant de l’école / Nous avons rencontré / Un grand chemin de fer / Qui nous a emmenés / Tout autour de la terre / Dans un wagon doré » (Jacques Prévert) ….
+
+[Article complet →](https://www.cafepedagogique.net/2024/03/29/herve-baronnet-libres-balades-pedagogiques/){ .md-button }
+
+## [Blogueur Food & Voyage : ajouter des cartes interactives à vos articles](https://blog.jawg.io/ajouter-des-cartes-interactives-a-vos-articles-de-blog/) (2023-03-21)
+
+> Qui a déjà consulté un blog pour des conseils de voyage ou des idées de restaurants à tester ? … Everybody ? C’est bien ce qui me semblait 😁
+>
+> Et qui parmi vous, a dû <mark>copier-coller le nom de ces lieux suggérés dans un moteur de recherche pour avoir une idée plus précise d’où ils se situaient ?</mark> Bon… je me sens moins seule !
+>
+> Je vous donne un exemple, vous cherchez un café sympa sur Paris et vous tombez sur l’article « Les 10 cafés les plus cosy de Paris. » Super, il n’y a plus qu’à les trouver. Sauf que, vous jetez un coup d’œil à l’adresse… euh le 9e, c’est quels stations de métro ça ? 🤔😅
+
+[Article complet →](https://blog.jawg.io/ajouter-des-cartes-interactives-a-vos-articles-de-blog/){ .md-button }
+

docs-users/fr/index.md

@@ -0,0 +1,23 @@
+# Documentation utilisateur·ice uMap
+
+uMap vous offre la possibilité de concevoir rapidement des cartes personnalisées avec des fonds OpenStreetMap (OSM) et de les intégrer facilement à votre site.
+
+- 📺 Regarder les [vidéos](videos.md) et les [articles](articles.md).
+- 🤓 Consulter les tutoriels selon votre niveau.
+- 🤔 Explorer les [les questions/réponses de la FAQ](support/faq.md).
+- 🤕 Parcourir [la liste des erreurs possibles](support/errors.md).
+
+---
+
+!!! info "Si vous êtes un·e développeur·euse"
+
+    Vous allez probablement davantage trouver votre [bonheur par ici](https://docs.umap-project.org).
+
+
+??? bug "Si vous rencontrez un problème non documenté"
+
+    Vous pouvez :
+
+    - consulter le [forum dédié sur OSM France](https://forum.openstreetmap.fr/c/utiliser/umap/29) ;
+    - vérifier si le souci n’a pas déjà été remonté dans les [issues en cours](https://github.com/umap-project/umap/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) ;
+    - déclarer [une nouvelle issue](https://github.com/umap-project/umap/issues/new/choose) (en anglais).

docs-users/fr/support/advanced.md

@@ -0,0 +1,32 @@
+# Usages avancés de uMap
+
+## Précharger une carte avec des données {: #preloading-data }
+
+Il est possible de précharger une carte avec des données en utilisant
+les paramètres `data` ou `dataUrl` :
+
+* Le paramètre `data` doit être URI encodé
+  (avec la méthode `encodeURIComponent()` en JavaScript par exemple).
+* Le paramètre `dataUrl` doit lier vers une URL encodée
+  (avec la méthode `encodeURIComponent()` en JavaScript par exemple).
+
+Vous pouvez ajouter le paramètre `dataFormat` en fonction de la
+nature de vos données:
+
+* `geojson` (défaut)
+* `csv`
+* `gpx`
+* `georss`
+* `kml`
+* `osm`
+
+Cet exemple, utilisant le paramètre `data`, va charger une carte avec un marqueur
+positionné sur les Chutes du Niagara à partir de données en CSV :
+
+https://umap.openstreetmap.fr/fr/map/?data=name%252Clatitude%252Clongitude%250AChutes%20du%20Niagara%252C43.084799710219066%252C-79.0693759918213&dataFormat=csv
+
+Cet exemple, utilisant le paramètre `dataUrl`, va charger une carte avec les contours géographiques pour
+la commune d’Arles, récupérés dynamiquement depuis
+[geo.api.gouv.fr](https://geo.api.gouv.fr/) en GeoJSON :
+
+https://umap.openstreetmap.fr/fr/map/?dataUrl=https%3A%2F%2Fgeo.api.gouv.fr%2Fcommunes%3Fcode%3D13004%26format%3Dgeojson%26geometry%3Dcontour

docs-users/fr/support/errors.md

@@ -0,0 +1,5 @@
+# Erreurs uMap et leurs significations
+
+## Impossible de déterminer les colonnes de latitude et longitude. {: #error-latlon-columns }
+
+Cela se produit lorsque vous utilisez un fichier CSV sans des noms de colonnes commençant explicitement par `lat` et `lon`.

docs-users/fr/support/faq.md

@@ -0,0 +1,118 @@
+# Questions Fréquemment Posées (FAQ)
+
+## Quelle syntaxe est acceptée dans les champs de description ?  {: #text-formatting }
+
+* `*simple astérisque pour italique*` → *simple astérisque pour italique*
+* `**double astérisque pour gras**` → **double astérisque pour gras**
+* `# un dièse pour titre 1` ⤵ <h1>un dièse pour titre 1</h1>
+* `## deux dièses pour titre 2` ⤵ <h2>deux dièses pour titre 2</h2>
+* `### trois dièses pour titre 3` ⤵ <h3>trois dièses pour titre 3</h3>
+* `Lien simple : [[http://example.com]]` → Lien simple : [http://example.com](http://example.com)
+* `Lien avec texte : [[http://exemple.fr|texte du lien]]` → Lien avec texte : [texte du lien](http://example.com)
+* `--- pour un séparateur horizontal` ⤵ <hr>
+
+## Quels sont les raccourcis clavier? {: #keyboard-shortcuts}
+
+Sur macOS, utliser `Cmd` à la place de `Ctrl`.
+
+### Génériques
+
+* `Ctrl+F` → ouvre le panneau de recherche
+* `Ctrl+E` → bascule en mode édition
+* `Escape` → ferme le panneau ou la fenêtre dialogue ouverte
+* `Shift+drag` sur la carte → zoom vers cette zone
+* `Shift+click` sur les boutons de zoom → zoom ou dézoom de trois niveaux
+
+### En mode édition
+
+* `Ctrl+E` → retour à l’aperçu
+* `Ctrl+S` → sauvegarde la carte
+* `Ctrl+Z` → annule tous les changements depuis la dernière sauvegarde
+* `Ctrl+M` → ajouter un nouveau marqueur
+* `Ctrl+P` → commence un nouveau polygone
+* `Ctrl+L` → commence une nouvelle ligne
+* `Ctrl+I` → ouvre le panneau d’import de données
+* `Ctrl+O` → ouvre le panneau d’import et le navigateur de fichiers
+* `Ctrl++` → zoom
+* `Ctrl+-` → dézoome
+* `Shift+click` sur un élément → ouvre le panneau d’édition de cet élément
+* `Ctrl+Shift+click` sur un élément → ouvre le panneau d’édition du calque de cet élément
+
+## Quelle syntaxe est acceptée dans les règles de formattage conditionnel ? {: #conditional-rules }
+
+* `macolonne=impair` → cible les éléments dont la colonne  `macolonne` vaut `impair`
+* `macolonne!=impair` → cible les éléments dont la colonne `macolonne` est absente ou dont la valeur est différente de `impair`
+* `macolonne>12` → cible les éléments dont la colonne `macolonne` est supérieur au nombre `12`
+* `macolonne<12.34` → cible les éléments dont la colonne `macolonne` est inférieure au nombre `12.34`
+* `macolonne=` → cible les éléments dont la colonne `macolonne` est vide
+* `macolonne!=` → cible les éléments dont la colonne `macolonne` n'est pas vide
+* `macolonne=true/false` → cible les éléments dont la colonne `macolonne` est explicitement `true` (ou `false`)
+* `macolonne!=true/false` → cible les éléments dont la colonne `macolonne` est différente de `true` (ou `false`)
+
+Quand la condition est vraie pour un élément donné, le style associé sera appliqué.
+
+
+## Comment utiliser les variables ? {: #variables}
+
+Utiliser une variable est aussi simple que `{variable}`.
+
+Il est possible de définir une seconde variable de repli, dans le cas où la première ne serait pas définie: `{variable|repli}`
+
+La valeur de repli peut être une chaîne, définie entre guillemets: `{variable|"repli"}`
+
+Il est possible d'enchaîner plusieurs variables: `{variable|autrevariable|"une chaîne"}`
+
+Il est possible d'utiliser une variable à l'intérieur d'une URL: `[[https://domain.org/?locale={locale}|Wikipedia]]`
+
+Ou même comme chemin vers une image: `{{{variable}}}` (noter le triple `{}`).
+
+### Variables disponibles pour les éléments de la carte:
+
+Ces variables peuvent être utilisées dans le champ description d'un élément, ou comme gabarit manuel de popup.
+
+Toute propriété de l'élément sera disponible, ainsi que:
+
+- `{lat}/{lng}` → la position de l'élément (ou le centroïde dans le cas d'une ligne ou d'un polygone)
+- `{alt}` → l'altitude (pour les points uniquement), si elle est définie dans les données
+- `{locale}` → la langue sous la forme `fr` ou `fr_CA` quand une variante est utilisée
+- `{lang}` → la langue sous la forme `fr` ou `fr-ca` quand une variante est utilisée
+- `{measure}` → la longueur d'une ligne ou la surface d'un polygone
+- `{gain}`/`{loss}` → la dénivelée positive/négative d'une ligne (seulement si elle contient les altitudes)
+- `{rank}` → la rang d'un élément dans son calque
+- `{layer}` → le nom du calque de l'élément
+- `{zoom}` → le zoom actuel de la carte
+
+### Variables disponibles dans les URL de données distantes:
+
+- `{bbox}` → la bbox de la carte sous la forme `sud_ouest_lng,sud_ouest_lat,nord_est_lng,nord_est_lat`
+- `{north}/{top}` → la latitude nord de la vue actuelle de la carte
+- `{south}/{bottom}` → la latitude sud de la vue actuelle de la carte
+- `{east}/{right}` → la longitude est de la vue actuelle de la carte
+- `{west}/{left}` → la longitude ouest de la vue actuelle de la carte
+- `{zoom}` → le zoom actuel de la carte
+- `{lat}` → la latitude du centre actuel de la carte
+- `{lng}` → la longitude du centre actuel de la carte
+
+
+## Quels statuts peut avoir une carte ? {: #map-statuses}
+
+### En accès
+
+* **Brouillon (privé)**: Vous seul et votre équipe pouvez accéder à la carte.
+* **Tout le monde (public)**: Tout le monde peut accéder à la carte, qui est visible dans la recherche et la page d’accueil. La carte est indexée dans les moteurs de recherche (Google, etc.).
+* **Quiconque a le lien**: La carte est visible par toutes les personnes qui en ont le lien. Elle n’est pas indexée dans les moteurs de recherche.
+* **Éditeurs et équipe seulement**: Vous seul et votre équipe pouvez accéder à la carte.
+
+Les personnes affichant une carte à laquelle elles n’ont pas accès auront une page d’erreur 403.
+
+### En édition
+
+* **Propriétaire uniquement**: Vous seul pouvez modifier la carte.
+* **Éditeurs et équipe seulement**: Vous seul et votre équipe pouvez modifier la carte.
+* **Tout le monde**: Tout le monde peut modifier la carte, même les comptes anonymes.
+
+Pour les cartes créées sans compte :
+
+* **Modifiable seulement avec le lien d’édition secret**: Seules les personnes avec un lien d’édition pourront modifier la carte.
+
+Ces réglages sont aussi disponibles pour chaque calque.

docs-users/fr/tutorials/1-browsing-a-map.md

@@ -0,0 +1,228 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    -   Manipuler une carte uMap
+    -   Partager une carte uMap
+    -   Connaître les principales fonctionnalités de uMap
+
+
+## Procédons par étapes
+
+### 1. Manipuler la carte
+
+Vous avez reçu par mail un lien vers une carte uMap. Voici les
+principaux éléments de la carte, et les opérations disponibles pour la
+manipuler. La carte uMap représentée ci-dessous est disponible
+[ici](http://umap.openstreetmap.fr/fr/map/festival-des-3-continents_26381).
+
+![Description des différents éléments d’une carte](../../static/tutoriels/1-je-consulte-une-carte-umap/anatomie_carte_umap_2021.jpg)
+
+
+À droite de la carte et selon le choix de son auteur peut être affiché
+un des deux panneaux suivants :
+
+-   **À propos** : le titre de la carte, une description éventuelle, et
+    la liste des calques
+-   **Visualiser les données** : l’ensemble des éléments de la carte,
+    répartis par calques (voir plus bas)
+
+Le panneau À propos peut être affiché en cliquant sur le mot "À propos",
+toujours visible en bas à droite de la carte.
+
+Comme pour la plupart des cartes interactives vous pouvez :
+
+-   déplacer la carte par un glisser-déposer
+-   effectuer zooms avant et arrière avec les boutons + et -, ou avec la
+    molette de la souris
+-   sélectionner un élément de la carte par un clic de la souris :
+    apparaît alors une fenêtre *popup* affichant une description de
+    l’élément. Celle-ci peut inclure du texte, une image, un lien vers
+    un site Web. Dans notre exemple la description de chaque cinéma
+    contient une image qui est un lien sur le site Web du cinéma.
+
+**Remarque** : les boutons en haut à gauche de la carte, ainsi que la
+barre de légende, peuvent ne pas être disponibles si l’auteur de la
+carte a choisi de les cacher.
+
+Voyons maintenant quelques fonctionnalités propres à uMap.
+
+### 2. Le sélecteur de calques
+
+Les éléments d’une carte umap peuvent être répartis dans plusieurs
+calques, ou couches. Cela permet de structurer une carte, pour qu’elle
+soit plus claire et plus facile à maintenir. L’utilisateur peut choisir
+d’afficher ou cacher chaque calque individuellement.
+
+<shot-scraper
+    data-output="static/tutoriels/control-browse.png"
+    data-url="https://umap.openstreetmap.fr/en/map/new/"
+    data-alt="Icône du sélecteur de calque(s)."
+    data-selector=".umap-control-browse"
+    data-width="48"
+    data-height="48"
+    data-padding="5"
+    >Icône du sélecteur de calque(s).</shot-scraper>
+
+Le sélecteur de calques est
+l’icône visible en haut à gauche de la carte sous les boutons de zoom.
+Lorsque vous positionnez la souris sur ce bouton, la liste des calques
+apparaît, vous pouvez alors afficher ou cacher chaque calque, ou encore
+centrer la carte sur le contenu d’un calque.
+
+![Une description des différentes parties d’un sélecteur de calques](../../static/tutoriels/1-je-consulte-une-carte-umap/umap_sélecteur_calques.png)
+
+Dans cet exemple le calque « Stations Bicloo » est caché :
+cliquer sur l’oeil de ce calque permet de l’afficher.
+La liste des calques, avec éventuellement un descriptif de chaque
+calque, est aussi visible dans la légende de la carte.
+
+### 3. Le bouton Plus
+
+<shot-scraper
+    data-output="static/tutoriels/control-more.png"
+    data-url="https://umap.openstreetmap.fr/en/map/new/"
+    data-alt="Icône pour afficher plus d’options."
+    data-width="46"
+    data-height="33"
+    data-selector=".umap-control-more"
+    data-padding="5"
+    >Icône pour afficher plus d’options.</shot-scraper>
+
+Sous le sélecteur de carte est visible un bouton portant le texte « Plus ».
+Un clic sur ce bouton fait apparaître une autre série de boutons.
+
+<shot-scraper
+    data-output="static/tutoriels/control-search.png"
+    data-url="https://umap.openstreetmap.fr/en/map/new/"
+    data-alt="Icône du sélecteur de recherche."
+    data-selector=".leaflet-control-search"
+    data-width="48"
+    data-height="48"
+    data-padding="5"
+    >Permet de chercher une localité et de centrer la carte dessus :
+    saisissez le nom d’une commune et tapez sur `Entrée`</shot-scraper>
+
+<shot-scraper
+    data-output="static/tutoriels/control-fullscreen.png"
+    data-url="https://umap.openstreetmap.fr/en/map/new/"
+    data-alt="Icône de la mise en plein écran."
+    data-selector=".leaflet-control-fullscreen"
+    data-width="48"
+    data-height="48"
+    data-padding="5"
+    >Place le navigateur en mode plein écran, que l’on peut quitter avec le même
+    bouton ou avec la touche `Échap` du clavier.</shot-scraper>
+
+<shot-scraper
+    data-output="static/tutoriels/control-embed.png"
+    data-url="https://umap.openstreetmap.fr/en/map/new/"
+    data-alt="Icône du partage et de l’intégration."
+    data-selector=".leaflet-control-embed"
+    data-width="48"
+    data-height="48"
+    data-padding="5"
+    >Permet de partager la carte ou d’en exporter les données.
+    Un panneau à droite de la carte est affiché, il est expliqué ci-dessous.</shot-scraper>
+
+<shot-scraper
+    data-output="static/tutoriels/control-locate.png"
+    data-url="https://umap.openstreetmap.fr/en/map/new/"
+    data-alt="Icône de la géolocalisation."
+    data-selector=".leaflet-control-locate"
+    data-width="48"
+    data-height="48"
+    data-padding="5"
+    data-javascript="document.querySelector('.umap-control-more').click()"
+    >
+    Permet de vous géolocaliser, c’est-à-dire centrer la carte sur votre position
+    actuelle. La géolocalisation exige de demander l’autorisation de l’utilisateur,
+    votre navigateur Web peut donc vous demander d’accepter ou activer la géolocalisation.
+</shot-scraper>
+
+<shot-scraper
+    data-output="static/tutoriels/measure-control.png"
+    data-url="https://umap.openstreetmap.fr/en/map/new/"
+    data-alt="Icône de mesure."
+    data-selector=".leaflet-measure-control"
+    data-width="48"
+    data-height="48"
+    data-padding="5"
+    data-javascript="document.querySelector('.umap-control-more').click()"
+    >
+    Est un outil de mesure.
+    Activer cet outil a deux effets : d’une part il affiche la longueur
+    des éléments linéaires de la carte et l’aire des éléments
+    surfaciques ; d’autre part il vous permet de tracer sur la carte une
+    ligne dont la longueur est affichée. Cliquez à nouveau sur le bouton
+    pour désactiver cet outil.
+</shot-scraper>
+
+<shot-scraper
+    data-output="static/tutoriels/control-edit-in-osm.png"
+    data-url="https://umap.openstreetmap.fr/en/map/new/"
+    data-alt="Icône pour éditer les données OpenStreetMap."
+    data-selector=".leaflet-control-edit-in-osm"
+    data-width="48"
+    data-height="48"
+    data-padding="5"
+    data-javascript="document.querySelector('.umap-control-more').click()"
+    >
+    Est utile pour améliorer la carte OpenStreetMap - ce qui sort de l’objet de ce tutoriel.
+</shot-scraper>
+
+<shot-scraper
+    data-output="static/tutoriels/control-icon-layers.png"
+    data-url="https://umap.openstreetmap.fr/en/map/new/"
+    data-alt="Icône de changement de fond de carte."
+    data-selector=".leaflet-iconLayers"
+    data-width="48"
+    data-height="48"
+    data-padding="5"
+    data-javascript="document.querySelector('.umap-control-more').click()"
+    >
+    Affiche plusieurs fonds de carte au survol :
+    cliquer sur l’un d’eux change le fond de la carte.</shot-scraper>
+
+
+#### Partager la carte
+
+Le panneau de partage de la carte offre trois possibilités. Votre choix
+dépend de la manière dont vous souhaitez partager la carte :
+
+-   **URL courte** permet de copier une URL abrégée - équivalente à
+    l’URL de la carte - que vous pouvez par exemple envoyer dans un
+    mail.
+-   **Embarquer la carte en iframe** permet d’inclure la carte dans une
+    page Web : il suffit de copier le code HTML et de l’insérer dans
+    celui de votre page Web. Cette possibilité est explorée en détails
+    dans le tutoriel
+    [Je publie ma carte et en contrôle l’accès](7-publishing-and-permissions.md).
+-   **Télécharger les données** permet d’obtenir les données visibles
+    sur la carte, dans différents formats. Cela peut vous permettre
+    d’utiliser ces données avec un autre outil.
+
+
+### 4. Visualiser les données
+
+![umap_donnees.jpg](../../static/tutoriels/1-je-consulte-une-carte-umap/umap_donnees.jpg)
+
+La liste des éléments de la carte peut être affichée avec un clic sur
+**Visualiser les données**, accessible depuis le sélecteur de calques,
+la barre de légende, ou encore en haut du panneau Légende.
+
+Le panneau alors visible à droite montre l’ensemble des éléments de la
+carte, organisés par calques. La loupe à gauche de chaque élément permet
+d’afficher sur la carte la popup décrivant cet élément. Le texte de
+saisie au-dessus de la liste permet de rechercher un élément, en ne
+montrant que ceux dont le nom contient le texte saisi.
+
+
+## Faisons le point
+
+Ce premier tutoriel nous a permis de découvrir les principales
+fonctionnalités d’une carte uMap. Nous allons maintenant
+[apprendre à créer une telle carte](2-first-map.md).
+
+
+??? info "Licence"
+
+    Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:1_-_je_consulte_une_carte_umap) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).

docs-users/fr/tutorials/10-embed-remote-data.md

@@ -0,0 +1,408 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    - Créer un calque qui utilise des données distantes
+    - Produire une carte de chaleur (heatmap)
+    - Afficher des calques en fonction du niveau de zoom
+    - Afficher des données qui évoluent en temps réel
+    - Utiliser un portail *open data*
+    - Créditer la source des données pour respecter la licence
+
+
+## Procédons par étapes
+
+Jusqu’ici toutes les cartes que nous avons créées montrent des données
+gérées par uMap. Même lorsque nous avons utilisé les données d’un
+tableur dans le tutoriel précédent, ces données ont été *importées* sur
+le serveur uMap, où elles sont *stockées*. Si ces données sont
+modifiées, nous devons de nouveau les importer pour mettre à jour la
+carte.
+
+Dans ce tutoriel nous allons apprendre comment créer une carte qui
+utilise des **données distantes**, c’est-à-dire stockées sur un autre
+serveur que le serveur uMap.
+
+### 1. J’utilise des données distantes
+
+Nous prenons pour ce tutoriel le thème des stations de vélo-partage à
+Paris, les fameux Vélib’, dont les données sont disponibles en open
+data.
+
+#### Utiliser un portail open data
+
+Commençons par observer le jeu de données « Vélib’ - Localisation et
+caractéristique des stations », disponible sur le portail open data de
+la ville de Paris :
+<https://opendata.paris.fr/explore/dataset/velib-emplacement-des-stations/>.
+
+L’onglet **Informations** explique que les données « sont actualisées
+chaque minute selon la norme GBFS 1.0 ». Cette norme décrit plusieurs
+fichiers, accessibles avec l’API décrite dans l’onglet **API**, dont le
+format n’est pas compris par uMap.
+
+L’onglet **Tableau** montre les données : chaque station a un nom et une
+capacité (nombre d’emplacements), ainsi qu’une position géographique.
+
+L’onglet **Export** propose plusieurs formats, dont les formats
+**GeoJSON**, **KML** et **GPX**, tous trois compris par uMap. Nous
+choisissons le [format GeoJSON](https://fr.wikipedia.org/wiki/GeoJSON),
+qui permet d’exploiter tous les attributs présents dans les données.
+
+Une possibilité serait de télécharger le fichier puis de l’importer dans
+uMap, comme nous l’avons fait dans le tuto précédent avec un fichier au
+format CSV. Outre les manipulations, cela impliquerait de mettre à jour
+ces données régulièrement. Nous allons plutôt configurer notre carte
+pour accéder directement aux données mises à disposition par le portail
+open data. Pour cela nous copions le lien vers le fichier : un clic
+droit ouvre un menu contextuel qui permet de **copier le lien** vers le
+fichier :
+
+    https://opendata.paris.fr/api/explore/v2.1/catalog/datasets/velib-emplacement-des-stations/exports/geojson?lang=fr&timezone=Europe%2FBerlin
+
+![umap-donnees-distantes.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-donnees-distantes.png)
+
+#### Configurer les données distantes
+
+Voyons maintenant comment utiliser ce lien dans uMap. Pour cela nous
+créons un nouveau calque et ouvrons, dans les Propriétés du calque,
+l’onglet **Données distantes**. Les informations à fournir sont les
+suivantes :
+
+-   **URL** : nous collons ici le lien vers le fichier copié
+    précédemment.
+-   **Format** : nous devons sélectionner le format, ici **geojson**
+-   **Licence** : ODbL comme indiqué sur la page d’export du portail
+    open data
+
+Le bouton **Vérifier l’URL** permet de tester l’accès au fichier depuis
+uMap, et de vérifier que le format choisi correspond bien aux données.
+Les données sont alors affichées sur la carte.
+
+#### Proxy ou pas proxy ?
+
+Si cela ne fonctionne pas (uMap affiche un bandeau qui indique «
+Problème dans la réponse du serveur »), il est probable que le serveur
+sur lequel le fichier est stocké n’autorise pas l’accès au fichier
+depuis un service tiers.
+
+!!! note
+
+    Il s’agit du mécanisme CORS, décrit dans l’article
+    Wikipédia [Cross-origin ressource
+    sharing](https://fr.wikipedia.org/wiki/Cross-origin_resource_sharing).
+
+uMap permet de contourner cette contrainte en faisant transiter le
+fichier par le serveur uMap, grâce à l’option **Avec proxy** qu’il
+convient alors d’activer. Cette option est associée au menu déroulant
+**Cacher la requête avec proxy**, qui permet au serveur uMap de
+conserver le fichier afin de ne pas le récupérer à chaque affichage de
+la carte. La durée la plus longue (1 jour) serait ici adaptée.
+
+#### Au sujet de la licence
+
+Le fichier des emplacements de stations Vélib’ est publié sous la
+[licence ODbL](https://opendatacommons.org/licenses/odbl/). Celle-ci
+exige que le producteur des données soit crédité lors de leur
+utilisation. Les informations sur le portail open data indique que ce
+producteur est « Autolib Velib Métropole ». Il convient donc de le citer
+dans les **Crédits** de la carte, un onglet du menu *Propriétés de la
+carte*.
+
+![umap-geojson-properties.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-geojson-properties.png)
+
+#### Afficher le nom et la capacité des stations
+
+Afin d’afficher le nom et la capacité de chaque station dans une
+infobulle, nous devons déterminer les clefs permettant d’accéder à ces
+informations. Pour cela il nous faut observer le fichier GeoJSON.
+
+Nous téléchargeons ce fichier depuis l’onglet Export du portail open
+data, ou collons le lien copié précédemment dans la barre de navigation
+du navigateur. Soit le fichier est directement affiché dans le
+navigateur, soit il est téléchargé : une possibilité consiste alors à
+l’ouvrir dans un éditeur de texte, ou à le déposer dans la fenêtre du
+navigateur.
+
+Dans le bloc `properties` de chaque élément, nous observons plusieurs
+associations clef-valeur : la propriété **name** contient le nom de la
+station, **capacity** contient le nombre d’emplacements. Ces propriétés
+correspondent à nos entêtes de colonnes d’un fichier CSV (cf. tuto
+précédent).
+
+Nous pouvons alors configurer le **Gabarit de la popup** pour afficher
+ces informations dans l’infobulle de chaque station, comme nous l’avons
+vu dans le [tuto précédent](9-map-from-spreadsheet.md).
+
+Par exemple :
+
+    # {name}
+    {capacity} emplacements
+
+### 2. Je combine deux calques pour les mêmes données
+
+Il y a beaucoup de stations Vélib’ et la carte est un peu dense à
+l’échelle de Paris. À cette échelle il serait plus intéressant d’avoir
+une vue d’ensemble de la répartition de l’offre Vélib’ sur la capitale
+et les communes voisines.
+
+![umap-heatmap.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-heatmap.png)
+
+#### Produire une carte de chaleur ou « Heatmap »
+
+uMap permet de présenter les données d’un calque sous plusieurs formes,
+avec le menu déroulant **Type de calque** dans le menu *Propriétés du
+calque*. Les différents types de calques sont :
+
+-   **Par défaut** : chaque donnée est affichée individuellement.
+-   **Avec cluster** : les points proches sont regroupés en un seul
+    cercle.
+-   **Heatmap** : les données sont représentées sous forme de *carte de
+    chaleur*.
+-   **Choroplèthe** : cet affichage est adapté aux polygones, et permet
+    de graduer leur couleur.
+-   **Cercles proportionnels** : cette représentation est adaptée pour
+    des valeurs quantitatives absolues (qui peuvent s’ajouter).
+    La surface des cercles est proportionnelle à la quantité.
+
+Les types *Avec cluster* et *Heatmap* sont plutôt adaptés aux calques
+contenant uniquement des points. Lorsqu’on choisit un de ces modes, un
+onglet de configuration apparaît. Pour le type *Heatmap*, l’onglet
+**Heatmap: paramètres** permet d’ajuster l’intensité – ou *chaleur* – de
+la carte (du bleu glacial au rouge brûlant), et de sélectionner une
+propriété pour évaluer cette *chaleur*. Celle-ci doit correspondre à une
+propriété de nos données contenant des valeurs numériques. Si aucune
+propriété n’est définie, chaque point a la même valeur et seule la
+densité géographique des points influe sur la *heatmap*.
+
+Notre fichier de stations contient justement la propriété `capacity`,
+qui correspond au nombre d’emplacements de chaque station – un bon
+critère pour représenter l’offre de vélos en libre-service. Quant au
+**Rayon de heatmap**, un curseur permet de l’ajuster avec effet immédiat
+sur la carte. Il est judicieux de tester ce rayon à différents niveaux
+de zoom de la carte, afin que la carte révèle bien les données.
+
+#### Dupliquer le calque
+
+Le type d’affichage d’un calque s’applique quel que soit le niveau de
+zoom. Or aux niveaux de zooms élevés, à l’échelle du quartier, il est
+plus intéressant de montrer les stations individuelles que la carte de
+chaleur. Nous allons combiner les 2 représentations en créant 2 calques
+qui utilisent les mêmes données, l’un affichant les stations
+individuelles, l’autre sous forme de Heatmap. L’astuce consiste ensuite
+à activer ou désactiver chaque calque en fonction du niveau de zoom.
+
+Procédons par étapes :
+
+1.  Dupliquons notre calque avec l’opération **Cloner** disponible dans
+    l’onglet **Opérations avancées** du panneau Propriétés du calque.
+2.  Le panneau Propriétés du nouveau calque est alors affiché :
+    renommons ce calque, par exemple « Heatmap stations Vélib’ ».
+3.  Changeons le type de calque pour **Heatmap**, l’onglet **Heatmap:
+    paramètres** apparaît.
+4.  Dans cet onglet, saisissons le nom de la propriété – `capacity` – et
+    ajustons le **rayon de heatmap** (une valeur autour de 30 fonctionne
+    bien pour ce jeu de données)
+5.  Dans l’onglet **Données distantes**, configurons le calque pour
+    qu’il s’affiche **jusqu’au zoom** 15.
+6.  De la même manière, configurons le calque initial pour qu’il
+    s’affiche **à partir du zoom** 15.
+
+Nous faisons ici le choix de superposer, au zoom 15, la heatmap aux
+stations individuelles. Cela produit une transition entre les 2 modes de
+représentation, et permet de repérer les stations avec un grand nombre
+d’emplacements.
+
+Notez que nous n’avons pas eu besoin de préciser l’URL des données
+distantes et leur format : ces paramètres ont été conservés lors de la
+duplication du calque.
+
+### 3. J’utilise des données dynamiques
+
+Un autre jeu de données du portail open data s’intitule « Vélib - Vélos
+et bornes - Disponibilité temps réel » :
+<https://opendata.paris.fr/explore/dataset/velib-disponibilite-en-temps-reel/>.
+
+Nous pouvons utiliser ces données *en temps réel* – en réalité avec un
+léger différé – pour alimenter notre carte uMap, et afficher le nombre
+de places et de vélos disponibles. La procédure est la même que
+ci-dessus, à une nuance près : l’option **Dynamique** de l’onglet
+**Données distantes** doit être activée. Elle indique à uMap de
+récupérer les données à chaque affichage de la carte, c’est-à-dire à
+chaque fois que la carte est déplacée, zoomée ou dézoomée. Pour autant,
+ces données ne seront pas automatiquement mises à jour par uMap à un
+intervalle de temps régulier : c’est à l’utilisateur de rafraîchir la
+page web ou de déplacer la carte.
+
+![umap-api-properties.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-properties.png)
+
+Il reste à
+modifier notre gabarit de popup pour afficher les disponibilités en
+temps réel. Pour identifier le nom des propriétés, nous pouvons utiliser
+l’onglet **API** sur le portail open data : le panneau **Résultats**
+montre un extrait des données avec toutes leurs propriétés. Ces
+propriétés sont les mêmes que pour l’export GeoJSON. Voici un exemple
+possible de gabarit de popup :
+
+    # {name}
+    {capacity} emplacements dont {numdocksavailable} libres
+    {numbikesavailable} vélos disponibles dont {ebike} VAE
+
+![umap-api-parameters.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-parameters.png)
+
+#### Filtrer les données à la source
+
+Le panneau Résultats dans l’onglet **API** nous montre l’existence de la
+propriété `is_installed`. Celle-ci permet de détecter des stations qui
+ne sont pas en service, que nous ne souhaitons pas afficher sur notre
+carte.
+
+Le panneau **Requête pour l’appel API** permet de générer une requête,
+affichée sous ce panneau (**URL de l’appel API**), et de visualiser les
+données produites par cette requête dans le panneau **Résultats**. Il
+permet également d’ajouter des paramètres à la requête, pour filtrer les
+données produites. Le paramètre **refine** permet de filtrer les données
+en fonction de la valeur d’une ou plusieurs propriétés. Si nous
+indiquons `is_installed` pour le nom de la propriété et `NON` pour la
+valeur, nous pouvons voir le nombre de stations qui ne sont pas en
+service, et que nous ne voulons pas intégrer à notre carte.
+
+Les données produites à l’aide cet onglet **API** sont au format GBFS,
+qui n’est pas connu de uMap. Les requêtes d’export au format GeoJSON
+acceptent les mêmes paramètres. Pour produire les données filtrées au
+format GeoJSON, nous devons donc éditer la requête *à la main*.
+Procédons par étapes *un peu geek* :
+
+1.  Saisir `is_installed` et `OUI` dans le champ **refine**
+2.  Supprimer la valeur du champ `limit`, car nous ne voulons pas
+    *limiter* la réponse de la requête à 20 stations.
+3.  Observons la requête générée :
+    `/api/explore/v2.1/catalog/datasets/velib-disponibilite-en-temps-reel/records?refine=is_installed%3AOUI`,
+    elle se compose de 3 sections :
+    -   l’URL de base, jusqu’au dernier caractère **`/`**
+    -   le **endpoint** `records` suivi du caractère **`?`**
+    -   le paramètre `refine=is_installed%3AOUI` (`%3A` est l’*encodage*
+        du caractère **`:`**)
+4.  Prenons la requête générée pour l’export GeoJSON :
+    `https://opendata.paris.fr/api/explore/v2.1/catalog/datasets/velib-disponibilite-en-temps-reel/exports/geojson?lang=fr&timezone=Europe%2FBerlin`,
+    elle se compose des mêmes sections :
+    -   l’URL de base :
+        `https://opendata.paris.fr/api/explore/v2.1/catalog/datasets/velib-disponibilite-en-temps-reel/exports/`
+    -   le endpoint `geojson?`
+    -   la liste de paramètres `lang=fr&timezone=Europe%2FBerlin` (`%2F`
+        est l’encodage du caractère **`&`** qui permet de séparer
+        plusieurs paramètres)
+5.  Nous pouvons combiner l’URL et le endpoint de la requête GeoJSON,
+    suivi du paramètre `refine=is_installed%3AOUI` (les paramètres
+    `lang` et `timezone` ne sont ici pas utiles) :
+
+
+    `https://opendata.paris.fr/api/explore/v2.1/catalog/datasets/velib-disponibilite-en-temps-reel/exports/geojson?refine=is_installed%3AOUI`
+
+Utiliser cette requête comme URL des données distantes de notre calque
+**Stations Vélib’** permet de n’afficher que les stations en service.
+
+Notez que pouvons aussi utiliser le paramètre `exclude` pour exclure les
+stations dont la propriété `is_installed` a la valeur `NON`. Nous
+pouvons utiliser ce même mécanisme pour exclure les stations qui n’ont
+aucun vélo disponible :
+
+    https://opendata.paris.fr/api/explore/v2.1/catalog/datasets/velib-disponibilite-en-temps-reel/exports/geojson?exclude=is_installed%3ANON&exclude=numbikesavailable%3A0
+
+### 4. J’injecte des paramètres dans la requête
+
+uMap permet d’injecter dans une requête des paramètres, avec la syntaxe
+`{paramX}`. Ces paramètres dépendent de l’état de la carte au moment de
+l’envoi de la requête :
+
+-   les coordonnées du centre de la carte : {lat} et {lng}
+-   la *bounding_box* de la carte : {bbox} ou {west}, {south}, {east} et
+    {north}
+-   le niveau de zoom : {zoom}
+
+Le portail open data peut prendre en compte certains de ces paramètres
+pour affiner la requête. Notre objectif est ici de récupérer la
+disponibilité des stations se trouvant **dans la partie visible de la
+carte**, c’est-à-dire dans la *bounding_box*. Cela permet de réduire le
+volume de données transférées, et de les afficher plus rapidement.
+
+#### J’utilise la console d’API de la plateforme open data
+
+L’onglet API du jeu de données permet d’accéder à la **console d’API
+complète**. Nous choisissons, dans la section Dataset, le *endpoint*
+**Export a dataset**.
+![umap-api-console.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console.png)
+
+Apparaît alors un formulaire où nous pouvons renseigner les différents
+paramètres :
+
+-   **dataset_id** est l’identifiant du jeu de données :
+    `velib-disponibilite-en-temps-reel`
+-   pour le **format** nous sélectionnons `geojson`
+-   nous pouvons à nouveau filtrer les stations en service avec le
+    paramètre **refine** : `is_installed:OUI`
+
+![umap-api-console-dataset.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console-dataset.png)
+
+Définissons le paramètre **where** avec la fonction `in_bbox()` (voir la
+[documentation
+OpenDataSoft](https://help.opendatasoft.com/apis/ods-explore-v2/#section/ODSQL-predicates/in_bbox()))
+et – pour l’instant – des latitudes et longitudes fixes (quelque part à
+Paris) :
+
+![umap-api-console-bbox.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console-bbox.png)
+
+**coordonnees_geo** est le nom du champ contenant la géométrie dans les
+données d’origine, que l’on peut trouver en les exportant dans un format
+autre que GeoJSON.
+
+Testons maintenant que la requête fonctionne en cliquant sur **Execute**
+: le code de réponse 200 indique que la requête a fonctionné, et il est
+possible de télécharger le fichier résultant.
+
+![umap-api-console-execute.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console-execute.png)
+
+#### Je dynamise la requête
+
+Modifions maintenant notre requête *statique* (tous les paramètres sont
+fixes) pour la rendre *dynamique*, en remplaçant les coordonnées de la
+bounding_box par les paramètres qui seront injectés par uMap. Nous
+n’utilisons pas ici le paramètre `{bbox}`, car l’ordre des valeurs ne
+correspond pas à celui attendu par l’API open data. La fonction s’écrit
+alors :
+
+    in_bbox(coordonnees_geo,{south},{west},{north},{east})
+
+ce qui donne avec l’encodage :
+
+    in_bbox%28coordonnees_geo%2C{south}%2C{west}%2C{north}9%2C{east}%29
+
+La requête encodée complète est donc :
+
+    https://opendata.paris.fr/api/explore/v2.1/catalog/datasets/velib-disponibilite-en-temps-reel/exports/geojson?where=in_bbox%28coordonnees_geo%2C{south}%2C{west}%2C{north}9%2C{east}%29&limit=-1&refine=is_installed%3AOUI
+
+Il ne reste plus qu’à utiliser cette requête comme URL pour nos données
+distantes.
+
+Notez qu’il n’est pas nécessaire d’utiliser la forme encodée, car uMap
+procédera à l’encodage. L’URL peut donc être plus lisible :
+
+    https://opendata.paris.fr/api/explore/v2.1/catalog/datasets/velib-disponibilite-en-temps-reel/exports/geojson?where=in_bbox(coordonnees_geo,{south},{west},{north},{east})&limit=-1&refine=is_installed:OUI
+
+## Faisons le point
+
+La carte produite pour ce tuto est visible ici :
+<http://u.osmfr.org/m/1051915/>
+
+Nous avons vu comment **exploiter des données open data** sans les
+télécharger, ce qui permet que notre carte reste à jour (à condition
+bien sûr que les données soient actualisées par leur producteur). Nous
+avons également vu comment **optimiser la requête** en injectant la
+*bounding box* de la partie visible de la carte.
+
+D’autres sites mettent à disposition des données via une API, l’enjeu
+est alors de s’approprier la syntaxe des requêtes en lisant la
+documentation et testant les requêtes.
+
+
+??? info "Licence"
+
+    Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:10_-_j_integre_des_donnees_distantes) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).

docs-users/fr/tutorials/11-openstreetmap-overpass-and-umap.md

@@ -0,0 +1,345 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    - Créer un calque utilisant des *données distantes* c’est-à-dire non
+      stockées par uMap
+    - Utiliser une **requête Overpass** comme source de données distantes
+    - Utiliser une *requête dynamique* prenant en compte l’étendue visible
+      de la carte
+    - Contrôler l’affichage des calques en fonction du niveau de zoom
+
+## Procédons par étapes
+
+L’objectif de ce tutoriel est d’explorer les différentes manières
+d’afficher sur une carte uMap des données externes, ou distantes,
+c’est-à-dire des données qui ne sont pas stockées sur le serveur uMap.
+Nous allons pour cela utiliser des données **OpenStreetMap**, que nous
+allons extraire avec l’[API
+Overpass](https://wiki.openstreetmap.org/wiki/FR:Overpass_API/Overpass_QL).
+
+Nous allons en quelques étapes créer une carte du vélo à Nantes,
+montrant les stationnements ainsi que les locations en libre-service.
+
+### 1. Je crée un calque affichant le résultat d’une requête Overpass
+
+Commençons par afficher les stations *Bicloo*, les locations de vélos en
+libre-service à Nantes. Allons-y étape par étape :
+
+1.  produire et tester la requête Overpass avec Overpass Turbo
+2.  adapter la requête pour produire des données acceptées par uMap
+3.  exporter la requête
+4.  créer un calque uMap utilisant cette requête
+
+#### Créer la requête Overpass
+
+Le site [Overpass Turbo](http://overpass-turbo.eu/) propose un assistant
+qui facilite la rédaction d’une requête. Activez l’assistant et
+saisissez le texte suivant, qui permet d’extraire les locations de vélo
+situées sur la commune de Nantes :
+
+    amenity=bicycle_rental in Nantes
+
+Cliquez sur **Construire et exécuter la requête** : la requête est créée
+dans l’éditeur à gauche de la carte, puis le résultat est affiché sur la
+carte.
+
+![overpass_turbo_assistant.jpg](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_assistant.jpg)
+
+#### Adapter la requête pour uMap
+
+Avant d’exporter la requête nous devons l’adapter. L’assistant Overpass
+Turbo produit des requêtes dont le résultat est au format JSON. uMap
+sait lire des données dans plusieurs formats, dont le format GeoJSON,
+mais pas le format JSON produit par Overpass. Par contre uMap comprend
+très bien le format XML selon la syntaxe OSM (OpenStreetMap).
+
+Pour que la requête produise des données au format XML/OSM, il suffit de
+modifier dans l’éditeur de requête la clause **`[out:json]`** par
+**`[out:xml]`**. Vous pouvez à nouveau exécuter la requête et observer
+la différence de format dans l’onglet **Données** qui montre le résultat
+de la requête.
+
+![overpass_turbo_format_xml.jpg](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_format_xml.jpg)
+
+#### Exporter la requête Overpass
+
+Exportez la requête en cliquant sur **Exporter** : un panneau s’affiche.
+Ouvrez l’onglet **Requête** et cliquez sur **compact** à droite de
+**Overpass QL**. Un nouvel onglet intitulé **Overpass API Converted
+Query** apparaît. Faites un **clic droit** sur la ligne soulignée en
+bleu, et choisir **Copier l’adresse du lien** (avec Mozilla Firefox) :
+l’URL de la requête est copié dans le presse-papier.
+
+![overpass_turbo_exporter.jpg](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_exporter.jpg)
+
+#### Utiliser la requête dans uMap
+
+![umap_requete_overpass_url.png](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_requete_overpass_url.png)
+
+Dans un nouvelle carte uMap, créez un calque et ouvrez l’onglet
+**Données distantes**. Collez dans la case URL le contenu du
+presse-papier et sélectionez le format **osm**, qui correspond au format
+XML dans Overpass.
+
+Notez que l’URL est *encodée* pour pouvoir être utilisée comme requête
+HTTP : les caractères spéciaux comme `"` sont convertis en `%22`. Ne les
+modifiez pas !
+
+Vous pouvez configurer le calque comme cela a été décrit dans les
+tutoriels précédents.
+
+![umap_overpass_infobulle.jpg](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_overpass_infobulle.jpg)
+
+De la même façon que les valeurs d’un tableur peuvent être affichées dans les
+infobulles (voir [cette section](9-map-from-spreadsheet.md)
+du tutoriel précédent), vous pouvez afficher dans les infobulles les
+*tags* OpenStreetMap. Les tags disponibles sont visibles dans l’onglet
+Données sur Overpass Turbo.
+
+Par exemple le gabarit suivant permet d’afficher des infobulles comme
+celle de droite.
+
+    # {name}
+    {capacity} emplacements
+    Carte bancaire : {payment:credit_cards}
+    {note}
+
+### 2. J’affiche les parkings à vélo efficacement
+
+Ajoutons à notre carte les parkings à vélo. La requête Overpass pour
+obtenir les parkings à vélos de Nantes est semblable à celle utilisée
+pour les locations, et peut être créée avec l’assistant :
+`amenity=bicycle_parking in Nantes`.
+
+![overpass_turbo_export_geojson.png](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_export_geojson.png)
+
+L’exécution de cette requête prend près de 5 secondes. Ce délai est trop
+long pour une carte *interactive*. Aussi plutôt que d’exécuter le
+requête lors de l’affichage de la carte nous préférons extraire les
+données et les importer dans uMap.
+
+#### Importer des données statiques
+
+Dans Overpass Turbo, cliquez sur **Exporter**, sélectionnez l’onglet
+**Données** puis cliquez sur **Download/copy as GeoJSON**. Cette
+opération convertit le résultat de la requête dans le format GeoJSON (un
+format standard pour transférer des données géographiques sur internet)
+et crée un fichier nommé `export.geojson` dans le dossier
+`Téléchargements` de votre ordinateur.
+
+Dans la carte uMap importez le fichier ainsi produit dans un nouveau
+calque (voir [cette section](9-map-from-spreadsheet.md) du tutoriel précédent).
+Les parkings à vélos sont affichés mais la carte
+perd en fluidité et ne réagit pas immédiatement lorsqu’on zoome ou la
+déplace. Cela est dû au nombre élevé de marqueurs affichés sur la carte
+(plus de 1600).
+
+#### Afficher une carte de densité
+
+![umap_heatmap.png](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_heatmap.png)
+
+Une possibilité pour
+contourner ce problème est d’afficher les marqueurs sous forme de
+clusters, ou de carte de chaleur (heatmap), aussi appelée carte de
+densité. Nous choisissons la seconde option qui permet de prendre en
+compte le nombre de places de chaque parking, stocké dans le tag
+`capacity`.
+
+Ainsi la carte montrera non pas le nombre de parkings à vélos mais le
+nombre de places de stationnement (dans OpenStreetMap un seul parking à
+vélo peut représenter un grand nombre d’*appuis-vélos*).
+
+Dans les propriétés du calque, sélectionnez le Type de calque
+**Heatmap**.
+
+Ensuite, dans l’onglet **Propriétés avancées** saisissez `capacity` dans
+le champ **Propriété optionnelle à utiliser pour calculter l’intensité
+de la heatmap**. Enfin vous pouvez ajuster l’intensité de la couleur en
+modifiant la **Valeur de rayon pour la heatmap**.
+
+La carte gagne en fluidité, mais l’utilisation d’une *heatmap* ne permet
+pas d’identifier l’emplacement précis des parkings à vélos. L’étape
+suivante propose une solution pour résoudre cette inconvénient.
+
+### 3. J’affiche un calque en fonction du niveau de zoom
+
+Lorsque les données d’un calque sont ***distantes*** (c’est-à-dire
+**non** stockées sur le serveur uMap), il est possible de contrôler
+l’affichage de ces données en fonction du niveau de zoom. Il faut pour
+cela déposer le fichier de données sur un serveur et déterminer l’URL de
+ce fichier.
+
+#### Utiliser un fichier stocké sur un serveur
+
+![umap_donnees_distantes_wordpress.png](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_donnees_distantes_wordpress.png)
+
+Si vous disposez d’un accès FTP à un serveur, cela ne pose pas de
+difficulté. Si vous avez accès au *back office* d’un CMS comme
+Wordpress, vous pouvez probablement y déposer un fichier. Prenons
+l’exemple de Wordpress.
+
+Par sécurité Wordpress ne permet pas de déposer un fichier au format
+JSON. Il se fie pour cela à l’extension du nom de fichier, il est donc
+possible de contourner cette contrainte en renommant le fichier.
+Procédons par étapes.
+
+1.  renommez le fichier `export.geojson` produit plus haut en
+    `parkings-velos-nantes.txt`
+2.  dans le *back office* Wordpress, ajoutez un **Média** et
+    sélectionnez le fichier ainsi renommé
+3.  affichez les détails du fichier et copiez son **Adresse Web**, de la
+    forme
+    `http://monsite.fr/wp-content/uploads/2018/01/parkings-velos-nantes.txt`
+4.  créez un nouveau calque uMap et collez cette adresse Web dans le
+    champ **URL** de l’onglet **Données distantes**
+5.  sélectionnez le format **geojson**
+6.  précisez la licence qui s’applique aux données : **ODbL 1.0**
+    puisqu’il s’agit de données OpenStreetMap
+7.  activez l’option **Avec proxy** en bas de cet onglet : cela autorise
+    le navigateur Web à accéder à un fichier stocké sur un serveur autre
+    que le serveur uMap
+8.  enregistrez les modifications de la carte
+
+#### Combiner deux calques utilisant le même fichier
+
+Pour associer fluidité de la carte et affichage de chaque parking nous
+allons associer deux calques utilisant les mêmes données :
+
+-   jusqu’au niveau de zoom 16, un calque montrant la capacité de
+    stationnement sous forme de *heatmap*
+-   à partir du niveau de zoom 16, un calque montrant les parkings à
+    vélo sous forme de marqueurs
+
+À nouveau procédons par étapes.
+
+1.  éditez le calque créé précedemment et dans l’onglet **Données
+    distantes** saisissez la valeur **16** dans le champ **Jusqu’au
+    zoom**
+2.  dupliquez le calque avec l’action **Cloner** de l’onglet **Actions
+    avancées** : ainsi le nouveau calque est déjà configuré pour
+    utiliser le fichier placé sur le seveur
+3.  sélectionnez le **Type de calque** par défaut pour le nouveau calque
+4.  dans l’onglet **Données distantes** saisissez la valeur **16** dans
+    le champ **À partir du zoom**
+
+![umap_heatmap_et_infobulle.jpg](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_heatmap_et_infobulle.jpg)
+
+Enfin vous pouvez renommer le nouveau calque, configurer le type de
+marqueur, et définir le gabarit de popup, par exemple :
+
+    # {capacity} emplacements
+    Type : {bicycle_parking}
+    Couvert : {covered}
+
+L’image à droite montre un extrait de la carte au niveau de zoom 16,
+auquel nous avons choisi d’afficher les deux calques.
+
+### 4. J’utilise une requête dynamique
+
+Utiliser des données extraites plutôt qu’une requête présente un
+inconvénient : la mise à jour des données sur OpenStreetMap n’est pas
+répercutée sur notre carte. Pour pallier à cela nous vous proposons de
+modifier le calque montrant les parkings à vélos sous forme de
+marqueurs, de sorte qu’il utilise une requête dynamique.
+
+Une **requête dynamique** permet d’*injecter* dans la requête des
+*variables* relatives à l’état actuel de la carte uMap. Nous allons
+utiliser une requête qui s’applique sur la seule partie visible de la
+carte, définie par un rectangle (ou *bounding box*). Cette requête
+s’exécutera à chaque zoom ou déplacement de la carte (d’où le terme
+*dynamique*) et récupérera les parkings à vélos à l’intérieur de ce
+rectangle.
+
+#### Simplifier la requête Overpass
+
+!!! note
+
+    Pour faciliter l’opération nous commençons par
+    simplifier la requête Overpass. Les points importants sont :
+
+    1.  placer la clause **`[bbox:{{bbox}}]`** en entête de requête pour que
+        ce paramètre ne soit présent qu’une seule fois
+    2.  remplacer la production du résultat par la clause **`out center;`**
+        qui permet de convertir chaque *way* (fermé ou pas) en un point
+
+            [out:xml][bbox:{{bbox}}];
+            (
+             node["amenity"="bicycle_parking"];
+             way["amenity"="bicycle_parking"];
+            );
+            out center;
+
+
+#### Adapter et exporter la requête
+
+![requete_dynamique.png](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/requete_dynamique.png)
+
+L’opération est délicate, et exige sang froid et concentration :
+
+1.  remplacez `{{box}}` par `{south},{west},{north},{east}` : il s’agit
+    de 4 variables qu’uMap remplacera, lors de l’exécution de la
+    requête, par les valeurs définissant l’emprise de la carte.
+2.  exportez la requête en utilisant l’option **download/copy as
+    standalone query** : un fichier texte est produit et téléchargé.
+3.  ouvrez le fichier dans un éditeur de texte et ajoutez en début de
+    ligne la base de l’URL permettant d’exécuter une requête Overpass :
+    `http://overpass-api.de/api/interpreter?data=`
+4.  copiez la requête modifiée et collez le texte dans le champ URL de
+    l’onglet **Données distantes**
+5.  activez l’option **Dynamique** et définissez le zoom à partir duquel
+    le calque est affiché
+6.  selon le serveur Overpass utilisé, l’option **Avec
+    proxy** doit être activée ou désactivée (voir ci-dessous)
+
+Par commodité la requête modifiée est reprise ci-dessous, où elle peut
+être copiée par un triple-clic :
+
+    http://overpass-api.de/api/interpreter?data=[out:xml][bbox:{south},{west},{north},{east}];(node["amenity"="bicycle_parking"];way["amenity"="bicycle_parking"];);out center;
+
+
+!!! note
+    N’hésitez pas à utiliser un autre serveur Overpass en
+    libre service, dont la liste est disponible dans les **Paramètres
+    généraux** de Overpass Turbo, par exemple
+    `https://overpass.kumi.systems/`. Attention ce dernier exige
+    d’**activer** l’option **Avec proxy**, alors que le serveur
+    `http://overpass-api.de/` nécessite que l’option soit **désactivée**.
+
+!!! note
+
+    N’utilisez pas la variable {bbox} car elle sera
+    remplacée par des coordonnées dont l’ordre (W,S,N,E) n’est pas celui
+    attendu par Overpass (S,W,N,E) !
+
+Vous pouvez manipuler ci-dessous la carte produite par l’ensemble de ce
+tutoriel. Zoomez jusqu’à ce que les parkings à vélos apparaissent et
+déplacez la carte pour constater l’aspect dynamique des requêtes.
+
+<iframe width="100%" height="400px" frameBorder="0" src="https://umap.openstreetmap.fr/fr/map/le-velo-a-nantes_189194?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&allowEdit=false&moreControl=false&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=false&onLoadPanel=undefined&captionBar=false"></iframe><p><a href="http://umap.openstreetmap.fr/fr/map/le-velo-a-nantes_189194">Voir en plein écran</a></p>
+
+
+## Faisons le point
+
+Nous avons vu comment créer une carte montrant les données OpenStreetMap
+à jour, à l’aide de requêtes Overpass. Seule la couche montrant la
+densité des stationnements sous forme de *heatmap* nécessitera de
+renouveler l’extraction des données de temps en temps.
+
+!!! note
+    Les serveurs Overpass utilisés dans ce tutoriel sont
+    des serveurs en libre service mis à disposition gracieusement. Ces
+    serveurs sont très sollicités aussi il convient de les utiliser avec
+    modération.
+
+    Si vous produisez une carte destinée à un grand nombre de consultations,
+    préférez l’utilisation de données statiques, importées dans uMap ou
+    stockées sur un serveur. Merci !
+
+    Si vous utilisez Github, ce [court
+    tutoriel](https://hackmd.io/OkwpRqQ7QXC3p8C0jfTUGQ?view) en anglais
+    explique comment utiliser un *workflow* pour exécuter une requête
+    Overpass et placer le résultat en cache.
+
+
+??? info "Licence"
+
+    Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:11_-_je_valorise_les_donnees_openstreetmap_avec_umap) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).

docs-users/fr/tutorials/12-display-grist-data.md

@@ -0,0 +1,141 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    - Créer un gabarit Grist compatible uMap
+    - Géocoder des adresses (:fontawesome-solid-landmark-flag: pour les agents publics seulement)
+    - Rendre un document Grist public
+    - Lier le CSV de Grist avec un calque uMap
+
+
+Un [un film tutoriel](https://tube.numerique.gouv.fr/w/kya6m1aFtgDcy2LMkgUBya?start=12s)
+a été créé pour montrer le déroulé de ce tutoriel.
+
+
+## 1. Créer un gabarit Grist compatible uMap
+
+!!! osm-instance "Pour le grand public, les associations…"
+
+    Rendez-vous sur le [site officiel de Grist](https://www.getgrist.com/) ou votre propre instance.
+
+!!! french-instance "Pour les agents publics"
+
+    Rendez-vous sur le site Grist agents publics via
+    [La Suite Numérique](https://lasuite.numerique.gouv.fr/services/grist).
+
+Créer un nouveau document vide :
+
+![Interface pour créer un nouveau document Grist.](../../static/tutoriels/grist-new-document.png)
+
+Ajouter les colonnes nécessaires, plus au moins ces trois colonnes : `Adresse`, `Latitude`, `Longitude`.
+
+![Interface d’un nouveau document Grist vide.](../../static/tutoriels/grist-empty-document.png)
+
+
+!!! warning
+
+    Attention, il faut mettre les colonnes `Latitude` et `Longitude` en type `Texte` :
+
+    ![Interface pour renseigner le type des colonnes.](../../static/tutoriels/grist-column-type-text.png)
+
+
+## 2. Géocoder des adresses (:fontawesome-solid-landmark-flag: pour les agents publics seulement)
+
+!!! french-instance "Pour les agents publics"
+
+    Cette conversion n’est accessible qu’aux agents publics, elle consiste
+    à convertir automatiquement les adresses en coordonnées géographiques
+    (latitude, longitude). Si vous avez déjà ces informations dans votre
+    document, vous pouvez passer à l’étape 3 ci-dessous.
+
+
+Il faut maintenant ajouter l’outil de géocodage développé par l’ANCT.
+Pour ça, cliquer sur « Ajouter une vue à la page » :
+
+![Interface pour créer une vue Grist.](../../static/tutoriels/grist-empty-view.png)
+
+
+Puis choisir `Custom`, sélectionner le nom de la table dans la source des données
+(ici « Table1 »), et aussi sélectionner la table dans `Select by` :
+
+![Interface pour créer une vue custom Grist.](../../static/tutoriels/grist-custom-view.png)
+
+Dans la colonne de droite, si on est sur l’instance Grist de l’ANCT,
+choisir « Geocodeur » dans la liste déroulante,
+sinon choisir `Custom URL` et ajouter l’URL suivante:
+
+<https://betagouv.github.io/grist-custom-widgets-fr-admin/geocode>
+
+Dans le panneau de droite, sélectionner les colonnes permettant de connecter
+l’outil à notre tableau :
+
+![Interface pour associer les colonnes sur une vue Grist.](../../static/tutoriels/grist-columns-view.png)
+
+La colonne `Adresse` comme source, puis bien référence les colonnes `Latitude` et `Longitude`.
+
+On peut optionnellement ajouter une colonne `Adresse normalisée` (dans le tableur)
+et la référencer ici, dans ce cas le géocodeur affichera l’adresse qu’il a trouvé.
+Ça permet un contrôle de plus.
+
+Renseigner ensuite une ou plusieurs lignes de données,
+en essayant d’avoir une adresse aussi précise que possible :
+
+![Interface pour convertir via une vue Grist.](../../static/tutoriels/grist-conversion-view.png)
+
+Puis cliquer sur « Traitement spécifique » pour ne traiter
+que la ligne sélectionnée, ou bien sur « Traitement global »
+pour traiter toutes les lignes du document.
+
+![Interface pour convertir via une vue Grist (résultat).](../../static/tutoriels/grist-conversion-view-result.png)
+
+
+## 3. Rendre un document Grist public
+
+Il faut ensuite rendre le document Grist public pour pouvoir ensuite le référencer côté uMap.
+
+Pour ça, aller dans « Gérer les utilisateurs » :
+
+![Interface pour gérer les utilisateurs dans Grist.](../../static/tutoriels/grist-user-management.png)
+
+Puis activer l’accès public :
+
+![Interface pour ouvrir les permissions dans Grist.](../../static/tutoriels/grist-permissions-management.png)
+
+
+## 4. Lier le CSV de Grist avec un calque uMap
+
+Pour copier l’URL qu’on va indiquer côté uMap, c’est ici
+(clic droit « enregistrer le lien ») :
+
+![Interface pour copier le lien vers l’export CSV dans Grist.](../../static/tutoriels/grist-download-csv.png)
+
+Le lien devrait ressembler à quelque chose comme ça :
+
+https://grist.incubateur.net/o/docs/api/docs/4McELEs6kBpQAkmzupHy9F/download/csv?viewSection=1&tableId=Table1&activeSortSpec=%5B%5D&filters=%5B%5D&linkingFilter=%7B%22filters%22%3A%7B%7D%2C%22operations%22%3A%7B%7D%7D
+
+Maintenant, créer une carte sur uMap et ajouter un calque :
+
+![Interface pour ajouter un calque dans uMap.](../../static/tutoriels/grist-umap-newlayer.png)
+
+![Interface pour ajouter un calque dans uMap avec un nom.](../../static/tutoriels/grist-umap-newlayer-name.png)
+
+Dans « Données distantes », ajouter l’URL de Grist et choisir le format `CSV` :
+
+![Interface pour ajouter un calque dans uMap avec une URL.](../../static/tutoriels/grist-umap-newlayer-url.png)
+
+Pour une meilleure expérience utilisateurs, vous pouvez choisir
+l’option `Proxy` avec un cache de la bonne durée selon la fréquence
+de mise à jour des données dans Grist :
+
+![Interface pour ajouter un calque dans uMap avec un proxy.](../../static/tutoriels/grist-umap-newlayer-proxy.png)
+
+Pour améliorer l'intégration des données, allez dans les paramètres avancés
+de la carte, puis dans les propriétés par défaut et :
+
+- ajouter `Nom` comme clé pour le libellé, le filtre et la recherche
+- ajouter `Catégorie` pour générer des filtres automatiques
+
+![Interface pour ajouter un calque avec des filtres dans uMap.](../../static/tutoriels/grist-umap-newlayer-advanced.png)
+
+Et voilà !
+
+![Interface de la carte finale dans uMap.](../../static/tutoriels/grist-umap-result.png)
+

docs-users/fr/tutorials/2-first-map.md

@@ -0,0 +1,235 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    -   distinguer le mode édition du mode consultation
+    -   identifier les étapes nécessaires pour créer une carte
+    -   produire une première carte et la diffuser !
+
+## Procédons par étapes
+
+L’objet de notre première carte est simple : positionner un ou plusieurs
+lieux (domicile, vacances, travail, etc.). Procédons par étapes.
+
+### 1. Le mode édition
+
+!!! osm-instance "Pour le grand public, les associations…"
+
+    Rendez-vous sur l’instance uMap d’OSM <https://umap.openstreetmap.fr/>
+
+!!! french-instance "Pour les agents publics"
+
+    Rendez-vous sur le site uMap agents publics <https://umap.incubateur.anct.gouv.fr/>
+    et connectez-vous en haut à gauche. La connexion utilise ProConnect.
+
+<shot-scraper
+    data-output="static/tutoriels/create-map.png"
+    data-url="https://umap.openstreetmap.fr/fr/"
+    data-alt="Bouton de création d’une carte depuis l’accueil."
+    data-width="176"
+    data-height="119"
+    data-selector=".button.button-primary"
+    data-padding="5"
+    >Bouton de création d’une carte depuis l’accueil.</shot-scraper>
+
+
+Apparaît alors sur votre navigateur une carte qui se présente ainsi :
+
+![umap_edition.jpg](../../static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edition.jpg)
+
+Nous retrouvons à gauche les boutons disponibles lors de la
+[consultation d’une carte](1-browsing-a-map.md).
+
+Plusieurs éléments visibles au-dessus et à droite de la carte sont
+visibles uniquement lorsque l’on crée ou modifie une carte, c’est-à-dire
+dans le *mode édition* :
+
+-   le **nom de la carte** en haut à gauche
+-   les boutons **Annuler les modifications** et **Enregistrer** en haut à droite
+-   à droite une série de 3 boutons permettant d’ajouter des éléments à
+    la carte : marqueurs, lignes et polygones
+-   en-dessous une série de 7 boutons permettant de configurer la carte
+
+### 2. Nommer la carte
+
+Une carte doit porter un nom qui renseigne sur ce que représente la carte.
+Pour définir le nom de la carte, cliquez sur le bouton
+**Modifier le nom ou la légende** ou plus simplement sur `Carte sans nom` dans
+le bandeau d’entête :
+
+<shot-scraper
+    data-output="static/tutoriels/modify-name.png"
+    data-url="https://umap.openstreetmap.fr/fr/map/new/"
+    data-alt="Bouton d’édition du nom de la carte."
+    data-width="46"
+    data-height="47"
+    data-selector=".leaflet-toolbar-icon.umap-control-caption"
+    data-padding="5"
+    >Bouton d’édition du nom de la carte.</shot-scraper>
+
+Un panneau apparaît sur la droite de la carte, il contient en haut un
+champ de saisie pour le **nom** de la carte, qui contient le texte
+`Carte sans nom` : placez le curseur dans ce champ, supprimez le texte
+existant et saisissez le nom de votre carte, par exemple `Mon domicile`.
+
+<shot-scraper
+    data-output="static/tutoriels/modify-name-panel.png"
+    data-url="https://umap.openstreetmap.fr/fr/map/new/"
+    data-alt="Panneau d’édition du nom de la carte."
+    data-width="410"
+    data-height="382"
+    data-selector=".panel.right"
+    data-padding="5"
+    data-javascript="document.querySelector('button.map-name').click()"
+    >Panneau d’édition du nom de la carte.</shot-scraper>
+
+Notez que le nom en haut à gauche de la carte est immédiatement modifié.
+Vous pouvez également saisir un texte plus long dans le champ
+**description**, qui apparaîtra dans le panneau de légende - nous y
+reviendrons.
+
+Maintenant, sauvegardez la carte avec le bouton **Enregistrer** : un
+texte est affiché en haut de la carte, comme celui ci-dessous :
+
+#### Pour le grand public sur l'instance OSM
+
+<shot-scraper
+    data-output="static/tutoriels/create-map-alert.png"
+    data-url="https://umap.openstreetmap.fr/fr/map/new/"
+    data-alt="Message d’alerte contenant le lien d’édition."
+    data-width="790"
+    data-height="226"
+    data-selector='umap-alert-creation [role="dialog"]'
+    >Message d’alerte contenant le lien d’édition.</shot-scraper>
+
+Ce texte explique que vous venez de créer une carte **anonyme** et vous
+donne un lien (une URL) pour pouvoir modifier la carte. En effet la
+carte que vous avez créée n’est associée à aucun compte, et **uMap**
+considère que seules les personnes ayant ce *lien secret* peuvent la
+modifier. Vous devez donc conserver ce lien si vous souhaitez pouvoir
+modifier la carte ou saisir votre adresse de courriel pour le recevoir.
+
+Nous verrons dans [le prochain tutoriel](3-create-account.md)
+comment créer son catalogue de cartes en utilisant un compte, il n’est alors pas
+nécessaire de conserver de lien secret.
+
+#### Pour les agents publics sur l’instance qui leur est dédiée
+
+S’ils ne se sont pas connectés avant de créer leur carte, le message est différent :
+
+![Le lien vers la connexion MonComptePro](../../static/tutoriels/proconnect-connexion.png)
+
+Il n’est pas possible d’enregistrer les modifications apportées à une carte anonyme sur cette instance.
+
+### 3. Ajouter un marqueur
+
+Commencez par déplacer et zoomer la carte pour visualiser l’endroit
+précis de votre domicile, lieu de vacances ou de travail.
+
+Cliquez ensuite sur le bouton **Ajouter un marqueur**.
+
+<shot-scraper
+    data-output="static/tutoriels/draw-marker.png"
+    data-url="https://umap.openstreetmap.fr/fr/map/new/"
+    data-alt="Bouton d’ajout de marqueur."
+    data-width="46"
+    data-height="47"
+    data-selector=".leaflet-toolbar-icon.umap-draw-marker"
+    data-padding="5"
+    >Bouton d’ajout de marqueur.</shot-scraper>
+
+Le curseur prend la forme d’un signe
+`+` : déplacez le sur le lieu que vous voulez *marquer* et cliquez avec
+le bouton gauche de la souris : un *marqueur bleu* et carré est créé à
+cet endroit et un panneau apparaît à droite.
+
+![Un marqueur uMap.](../../static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_marqueur.jpg)
+
+Ce panneau vous permet
+d’associer un nom et une description au marqueur :
+
+-   le nom sera affiché au survol du marqueur par la souris
+-   le nom et la description seront visibles dans une fenêtre dite
+    *popup* qui apparaîtra lors d’un clic sur le marqueur.
+
+Nous verrons plus loin l’utilité des calques, et comment modifier les
+propriétés du marqueur : forme, couleur, pictogramme, etc.
+
+Répétez l’opération pour ajouter les marqueurs que vous jugez utiles à
+votre carte.
+
+### 4. Définir l’emprise de la carte
+
+Il est important de définir l’emprise initiale de la carte, c’est-à-dire
+la partie du planisphère qui sera affichée lors de la consultation de la
+carte.
+
+Cette emprise doit inclure votre marqueur et permettre de situer la
+carte. Il convient de trouver un compromis entre un zoom trop éloigné et
+un zoom trop rapproché. Le bon compromis dépend essentiellement du
+contenu de la carte : la majorité des marqueurs, lignes et polygones
+doivent être visibles et utiliser au mieux l’étendue de la carte.
+
+Vous pouvez aussi considérer le public de la carte : une carte expédiée
+à votre voisin peut être très zoomée, une carte envoyée un correspondant
+étranger doit permettre de reconnaître le pays où se trouve votre carte.
+
+
+Pour définir
+l’emprise, déplacez et zoomez la carte afin d’afficher l’emprise
+souhaitée puis cliquez sur le bouton **Enregistrer le zoom et le centre
+actuels**.
+
+<shot-scraper
+    data-output="static/tutoriels/register-zoom.png"
+    data-url="https://umap.openstreetmap.fr/fr/map/new/"
+    data-alt="Bouton d’enregistrement du zoom et du centre actuels."
+    data-width="46"
+    data-height="47"
+    data-selector=".leaflet-toolbar-icon.update-map-extent"
+    data-padding="5"
+    >Bouton d’enregistrement du zoom et du centre actuels.</shot-scraper>
+
+!!! note
+    uMap enregistre en réalité le centre et le niveau de
+    zoom. Selon la taille de la fenêtre où est affichée la carte, la partie
+    visible pourra varier. Il est utile de prévoir une marge autour du
+    contenu de la carte.
+
+### 5. Enregistrer la carte
+
+Toute modification de la carte doit être sauvegardée
+en cliquant sur le bouton **Enregistrer** en haut à droite. Cette
+opération enregistre toutes les modifications depuis la dernière
+sauvegarde : vous pouvez donc réaliser plusieurs modifications à la
+suite puis les enregistrer. A l’inverse le bouton **Annuler** permet de
+supprimer toutes les modifications depuis la dernière sauvegarde.
+
+!!! note
+    L’enregistrement se fait sur les serveurs d’OpenStreetMap dans le cas
+    d’une utilisation d’uMap OSM ou ceux de l’ANCT si uMap pour
+    les agents publics est utilisé.
+
+
+Après avoir enregistré les modifications, le bouton Annuler est remplacé
+par **Désactiver l’édition**. Cela vous permet de quitter le mode
+édition pour voir la carte en mode consultation. Vous pouvez alors
+*tester* votre carte : cliquez sur le marqueur pour afficher la popup et
+vérifier son nom et sa description.
+
+**Félicitations !** Vous avez créé votre première carte uMap. Vous
+pouvez la diffuser à votre entourage en copiant son URL dans la barre
+d’adresse du navigateur, ou en copiant son **URL courte** disponible
+dans le menu **Partager** vu dans le tutoriel
+[Naviguer dans une carte](1-browsing-a-map.md).
+
+## Faisons le point
+
+Votre première carte est créée, en quelques étapes. L’opération est
+assez simple, mais le résultat est somme toute assez sommaire. Le
+[prochain tutoriel](3-create-account.md) va nous
+permettre de créer une jolie carte.
+
+
+??? info "Licence"
+
+    Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:2_-_je_cree_ma_premiere_carte_umap) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).
+

docs-users/fr/tutorials/3-create-account.md

@@ -0,0 +1,107 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    - utiliser un compte pour retrouver ses cartes
+    - créer une équipe
+    - partager une carte avec une équipe
+
+## Procédons par étapes
+
+Nous avons appris dans [le tutoriel précédent](2-first-map.md) comment créer une
+carte anonyme contenant un marqueur. Nous allons à présent créer un compte et une équipe.
+
+Nota : il n’y a pas de carte anonyme sur
+[l’instance uMap pour les agents publics](https://umap.incubateur.anct.gouv.fr/fr/).
+
+Au lieu de créer une carte anonyme, nous allons utiliser un compte pour
+créer cette carte.
+
+### 1. Utiliser un compte
+
+**uMap** permet d’associer ses cartes à un compte. Cela présente plusieurs
+avantages importants par rapport à la création de cartes anonymes :
+
+-   les cartes créées avec un compte constituent un catalogue permettant
+    d’accéder facilement à ses cartes
+-   on peut modifier chaque carte du catalogue sans avoir besoin de
+    conserver un lien d’édition
+-   on peut gérer ses cartes en équipe et afficher le nom de l’équipe comme auteur
+-   pour les agents publics sur uMap ANCT : une fois connecté avec MonComptePro, on peut utiliser d’autres outils en association avec uMap, comme Grist.
+
+Le logiciel umap ne gère pas directement de comptes utilisateurs : la
+gestion des comptes dépend de la configuration du logiciel.
+
+#### Pour le grand public, les associations…
+
+Sur <https://umap.openstreetmap.fr>, vous pouvez utiliser un compte que vous
+avez ouvert sur un site Web au choix : OpenStreetMap, Github,
+ou Bitbucket. Si vous n’avez aucun compte sur ces outils, c’est le
+moment de vous inscrire sur le site www.openstreetmap.org : cliquez
+**Créer un compte** dans le coin supérieur droit et suivez les
+instructions - une adresse mail vous sera demandée ([plus
+d’infos](https://openstreetmap.fr/inscription-openstreetmap)).
+
+![umap_header.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_header.png)
+
+Cliquez sur **Connexion /
+Créer un compte** puis sur le pictogramme correspondant au compte que
+vous souhaitez utiliser. Apparaît alors la page de connexion du site :
+saisissez le nom d’utilisateur et le mot de passe. La page suivante vous
+demande d’autoriser l’application uMap à utiliser ce compte : accordez
+cet accès. Vous retrouvez alors la page d’accueil de uMap, sur laquelle
+le lien de connexion a laissé la place à un lien **Mes cartes** vous
+permettant d’accéder à l’ensemble des cartes créées avec ce compte.
+
+![umap_connect.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_connect.png)
+
+Notez l’URL de la barre d’adresse quand vous consultez votre catalogue
+de cartes : celle-ci contient le nom de votre compte - par exemple
+<https://umap.openstreetmap.fr/fr/user/cartocite/>. Vous pouvez
+l’utiliser pour accéder à votre catalogue de cartes, même sans être
+connecté à votre compte : vous pouvez diffuser cette URL, les
+récipiendaires ne pourront pas modifier vos cartes.
+
+#### :fontawesome-solid-landmark-flag: Pour les agents publics
+
+1. Se connectez à ProConnect : <https://moncomptepro.beta.gouv.fr/> <br>
+   Toute personne qui travaille pour un service public y a accès.
+2. Créez un compte, l’opération peut prendre quelques minutes.
+3. Sur [le site uMap pour les agents publics](https://umap.incubateur.anct.gouv.fr/fr/),
+   cliquez sur `Me Connecter`.
+
+On peut accéder à la page de création de compte ProConnect directement
+depuis [uMap pour les agents publics](https://umap.incubateur.anct.gouv.fr/fr/).
+
+Le tableau de bord s’ouvre, il affiche l’ensemble des cartes que
+vous créez ainsi que les équipes auxquelles vous participez.
+
+!!! french-instance "Pour les agents publics"
+    Associer une carte à une équipe vous permet d’afficher le nom de cette équipe au lieu du vôtre sur une carte (noms de votre commune, de votre service,…). Une équipe peut se composer d’une seule personne.
+
+### 2. Créer une équipe
+
+Une fois connecté sur l’instance uMap,
+cliquer sur « Mon espace », puis « Mes équipes » :
+
+![Lien vers l’onglet des équipes](../../static/tutoriels/my-teams.png)
+
+Puis sur « Nouvelle équipe » et renseigner les informations
+
+![Formulaire d’édition des équipes](../../static/tutoriels/my-teams-form.png)
+
+Lorsqu’un nouvel utilisateur est associé à une équipe,
+il voit l’équipe s’afficher sur son tableau de bord,
+il accède à toutes les cartes qui sont partagées et il peut les modifier.
+
+!!! note
+    Tous les membres d’une équipe partagent les mêmes droits d’édition sur une carte
+    qui est associée à une équipe. Une équipe peut être supprimée,
+    ou son nom modifié en un simple clic.
+
+### 3. Partager une carte avec une équipe
+
+Une fois l’équipe créée, il reste encore à donner les droits de modification
+d’une carte à ses membres. Pour ce faire : ouvrez la carte,
+puis sur cliquez sur « Editer » et cliquez en haut de page
+à droite du titre sur « Visibilité : Définir qui peut voir et modifier la carte ».
+
+![Panneau de permissions pour la sélection des équipes](../../static/tutoriels/my-teams-permissions.png)

docs-users/fr/tutorials/4-customize-map.md

@@ -0,0 +1,188 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    - Gérer son catalogue de cartes
+    - Choisir un fond de carte
+    - Sélectionner les options d’interface
+
+## Procédons par étapes
+
+### 1. Retrouver une carte
+
+Vous souhaitez modifier une carte pour l’améliorer ou la mettre à jour.
+Si vous avez redémarré votre navigateur et à fortiori votre ordinateur,
+la première chose à faire est de retrouver la carte ! Si vous avez créé
+cette carte avec votre compte, comme nous l’avons vu dans le tutoriel
+[Créer un compte](3-create-account.md), afficher
+une de vos cartes se fait en trois opérations simples :
+
+1.  connectez-vous à votre compte umap
+2.  affichez votre catalogue de cartes
+3.  cliquez sur le nom de la carte
+
+<figure>
+    <img alt="Bouton d’édition de la carte."
+         src="../../../static/tutoriels/edit-map.png"
+         width="110"
+         height="44">
+    <figcaption>Bouton d’édition de la carte.</figcaption>
+</figure>
+
+La carte s’affiche alors en mode consultation.
+Cliquez sur le bouton avec le crayon en haut à droite de la carte pour
+passer en mode édition : vous pouvez dès lors modifier la carte.
+N’oubliez pas de sauvegarder la carte une fois les modifications
+terminées.
+
+!!! note
+
+    Il peut être fastidieux de passer du mode édition au
+    mode consultation et vice-versa de façon répétée. Une astuce consiste à
+    utiliser pour la même carte deux onglets ou deux navigateurs, l’un en
+    mode édition l’autre en mode consultation. Vous devez tout de même
+    **enregistrer** la carte dans l’onglet en mode édition avant de
+    l’**actualiser** (par exemple avec la touche F5) dans l’onglet en mode
+    consultation.
+
+Vous pouvez retourner à votre catalogue de cartes à tout moment en
+cliquant sur **Accueil** tout en bas à droite de la carte.
+
+### 2. Changer le fond de carte
+
+Nous avons vu dans le tutoriel [Naviguer dans une carte](1-browsing-a-map.md)
+que plusieurs fonds de carte sont disponibles dans uMap.
+Lorsque vous éditez une carte vous pouvez
+choisir le fond de carte qui sera utilisé à l’affichage de la carte.
+
+<shot-scraper
+    data-output="static/tutoriels/map-tilelayers.png"
+    data-url="https://umap.openstreetmap.fr/fr/map/new/"
+    data-alt="Bouton de choix de fond de carte."
+    data-width="46"
+    data-height="47"
+    data-selector=".leaflet-toolbar-icon.update-map-tilelayers"
+    data-padding="5"
+    >Bouton de choix de fond de carte.</shot-scraper>
+
+Cliquez sur le pictogramme `Changer le fond de carte` : un panneau à droite montre
+une vingtaine de fonds de cartes. Il vous suffit de cliquer sur l’un
+d’eux : faites votre choix et n’oubliez pas d’enregistrer la
+modification.
+
+Le choix du fond de carte est une affaire de goût. Le contexte de la
+carte peut vous aider à en choisir un plutôt qu’un autre, par exemple :
+
+-   les fonds **Outdoors**, **Landscape** ou **OpenTopoMap** montrent le
+    relief : judicieux pour une carte de randonnée
+-   **OpenCycleMap** montre les grands itinéraires cyclistes, comme les
+    EuroVélo (Côte Atlantique, Loire à Vélo…)
+-   **Positron**, **Toner** et **OSM-Monochrome** sont en noir et blanc
+    : vos marqueurs, lignes et polygones seront plus visibles
+-   le style **HOTOSM**, créé par le [groupe
+    humanitaire](http://wiki.openstreetmap.org/wiki/FR:Humanitarian_OSM_Team)
+    d’OpenStreetMap, permet d’aller jusqu’à un niveau de zoom élevé
+    (niveau 20) : intéressant si l’étendue de votre carte couvre un
+    quartier ou votre jardin
+
+!!! note
+
+    Tous les fonds de carte utilisés par uMap, à
+    l’exception des images aériennes de l’IGN, sont réalisés à partir des
+    données OpenStreetMap. Ils sont produits par des associations, des
+    entreprises ou des bénévoles qui les mettent gracieusement à
+    disposition.
+
+    Remarquez le texte affiché en bas à droite de la carte : il crédite les
+    auteurs du fond de carte, par exemple
+    `Map tiles by Stamen Design - Map Data © OpenStreetMap contributors`.
+
+
+### 3. Choisir les options d’interface
+
+Vous pouvez configurer les éléments de la carte mis à disposition des
+utilisateurs qui consulteront votre carte. Vous pouvez par exemple
+ajouter une mini-carte de situation ou une barre de légende, ou encore
+décider quels boutons seront affichés.
+
+<shot-scraper
+    data-output="static/tutoriels/map-settings.png"
+    data-url="https://umap.openstreetmap.fr/fr/map/new/"
+    data-alt="Bouton des options de la carte."
+    data-width="46"
+    data-height="47"
+    data-selector=".leaflet-toolbar-icon.update-map-settings"
+    data-padding="5"
+    >Bouton des options de la carte.</shot-scraper>
+
+Pour cela, ouvrez dans
+le menu **Propriétés avancées de la carte** l’onglet **Options d’interfaces**.
+Vous pouvez activer ou désactiver une dizaine d’options dont voici la
+signification.
+
+Apparaît alors un long tableau de bord qui vous permet, pour chacun des
+boutons sur la gauche de la carte, de contrôler leur visibilité :
+
+-   **toujours** indique que le bouton est toujours visible pour
+    l’utilisateur
+-   **jamais** signifie que le bouton ne sera pas disponible
+-   **caché** signifie que le bouton n’est accessible qu’après un clic
+    sur le bouton « Plus ».
+    Les boutons cachés ne seront bien sûr accessibles que si l’option
+    `Voulez-vous afficher le bouton « Plus » ?`
+    (plus bas sur le tableau de bord) est activée.
+
+<shot-scraper
+    data-output="static/tutoriels/control-more.png"
+    data-url="https://umap.openstreetmap.fr/en/map/new/"
+    data-alt="Icône pour afficher plus d’options."
+    data-width="46"
+    data-height="33"
+    data-selector=".umap-control-more"
+    data-padding="5"
+    >Exemple de bouton « Plus ».</shot-scraper>
+
+La partie basse du tableau de bord ne concerne pas ces boutons mais
+d’autres éléments venant *habiller* la carte :
+
+![umap_properties_bottom.jpg](../../static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_properties_bottom.jpg)
+
+Quelques remarques :
+
+-   si vous cachez les boutons de zoom **et** désactivez le zoom avec la
+    molette de la souris, les utilisateurs ne pourront ni zoomer ni
+    dézoomer … sauf à découvrir le menu accessible avec un clic droit
+    sur la carte.
+-   les boutons de navigation en bas des popups permettent de faire
+    défiler les éléments de la carte
+
+
+### 4. Copier ou supprimer une carte
+
+Tout en bas des **Propriétés de la cartes**, l’onglet **Options
+avancées** propose deux opérations peu utilisées mais qu’il est bon de
+connaître :
+
+-   **Supprimer** supprime la carte du serveur umap, ainsi que les
+    données qui y sont associées !
+-   **Cloner cette carte** effectue une copie de la carte et de ses
+    données. La nouvelle carte est ajoutée à votre catalogue.
+
+Dans les deux cas un message vous demande de confirmer l’opération.
+
+## Faisons le point
+
+Vous savez créer, modifier et personnaliser une carte.
+Vous savez styliser vos marqueurs, lignes et polygones.
+Enfin vous savez gérer votre catalogue de cartes.
+Vous allez découvrir comment importer des données en « un clic »
+issues de l’open data et gagner du temps par rapport au dessin de toutes les formes.
+
+Une fois ces opérations maîtrisées, les tutoriels de niveau
+intermédiaire vous apprendront à structurer vos cartes avec des calques
+et enrichir le contenu de vos popups. Vous découvrirez également comment
+publier une carte sur un site Web, et définir qui peut la voir et la
+modifier.
+
+??? info "Licence"
+
+    Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:4_-_je_modifie_et_personnalise_ma_carte) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).
+

docs-users/fr/tutorials/4-draw-items.md

@@ -0,0 +1,158 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    - Changer la forme, la couleur et le pictogramme d’un marqueur
+    - Créer et modifier une ligne
+    - Contrôler l’affichage des étiquettes
+
+Voici comment réaliser une carte contenant de jolis marqueurs et des lignes
+avec pour exemple la carte de nos vacances au
+[Camping de la plage Goulien](https://www.openstreetmap.org/way/119055693)
+sur la Presqu’île de Crozon en Bretagne.
+
+### 1. Créer un joli marqueur
+
+Commençons par créer une carte : donnons-lui un nom, définissons une
+emprise et ajoutons un marqueur à [l’emplacement du
+camping](http://www.openstreetmap.org/?mlat=48.2387&mlon=-4.5434#map=16/48.2387/-4.5434).
+Nous avons vu dans [le tutoriel précédent](2-first-map.md) comment effectuer ces opérations.
+
+![umap_marqueur_props.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_marqueur_props.png)
+
+Ce gros marqueur bleu n’est pas très explicite pour figurer un camping.
+Remédions à cela. Dans le panneau latéral visible lorsqu’un marqueur est
+sélectionné, le menu **Propriétés de la forme** permet de modifier
+l’apparence du marqueur :
+
+-   **Couleur** : cliquer sur `définir` permet de choisir une couleur.
+    Notez que vous pouvez définir une couleur par [son nom
+    CSS](http://www.w3schools.com/cssref/css_colors.asp) ou par son code
+    héxadécimal, que vous pouvez choisir par exemple avec ce [sélecteur
+    de couleurs](http://htmlcolorcodes.com/fr/selecteur-de-couleur/).
+-   **Forme de l’icône** : le choix `Par défaut` correspond au marqueur
+    actuel, les autres choix sont Cercle, Goutte et Épingle.
+-   **Image de l’icône** : cliquer sur `définir` pour choisir parmi une
+    centaine de pictogrammes. Notez que le picto n’est affiché que pour
+    les formes d’icônes `Par défaut` et `Goutte`.
+
+Voici le marqueur obtenu avec les propriétés ci-contre :
+
+![umap_camping.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_camping.png)
+
+#### Modifier un marqueur
+
+![umap_modifier_marqueur.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_modifier_marqueur.png)
+
+Pour modifier un marqueur de la carte, plusieurs possibilités s’offrent à vous :
+
+-   un clic sur le marqueur vous permet soit d’afficher le panneau
+    d’édition (stylo), soit de supprimer le marqueur (corbeille)
+-   **shift-clic** est un raccourci qui affiche directement le panneau
+    d’édition
+-   un glisser-déposer vous permet de déplacer le marqueur sur la carte
+
+### 2. Créer une ligne
+
+Le premier jour de vacances nous allons en kayak de mer jusqu’à la
+Pointe de Dinan à l’ouest de la plage de Goulien. Traçons l’itinéraire
+suivi.
+
+<shot-scraper
+    data-output="static/tutoriels/draw-polyline.png"
+    data-url="https://umap.openstreetmap.fr/fr/map/new/"
+    data-alt="Bouton de dessin d’une ligne."
+    data-width="46"
+    data-height="47"
+    data-selector=".leaflet-toolbar-icon.umap-draw-polyline"
+    data-padding="5"
+    >Bouton de dessin d’une ligne.</shot-scraper>
+
+Le bouton **Dessiner une ligne** permet de tracer, point par point,
+une ligne constiutée de plusieurs segments.
+Cliquez à nouveau sur le dernier point tracé pour
+terminer la ligne : apparaît alors à droite un panneau permettant de
+donner un nom et une description à la ligne, comme pour les marqueurs.
+
+#### Modifier une ligne
+
+A tout moment vous pouvez sélectionner une ligne en double-cliquant
+dessus. Vous pouvez alors éditer ses propriétés dans le panneau latéral,
+ou modifier son tracé sur la carte :
+
+-   **supprimer un point** de la ligne, matérialisé par un carré blanc,
+    en cliquant dessus
+-   **déplacer un point** par un glisser-déposer
+-   **insérer un point** en cliquant sur un carré gris se trouvant au
+    milieu de chaque segment
+-   **allonger la ligne** avec un Ctrl-Clic lorsque le curseur est placé
+    sur le premier ou dernier point
+-   **couper la ligne** en deux : Clic droit sur un point puis choisir
+    l’option `Scinder la ligne`
+
+![umap_ligne.jpg](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne.jpg)
+
+#### Propriétés d’une ligne
+
+![umap_ligne_props.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_props.png)
+
+Les propriétés d’une
+ligne permettent de définir sa couleur et d’autres paramètres
+définissant son *style* :
+
+-   l’**opacité** va de transparent à gauche à totalement opaque à
+    droite. Plus le trait est épais plus il peut être transparent.
+-   l’**épaisseur** est définie en pixels, sa valeur par défaut est 3 :
+    glisser le curseur vers la droite pour un trait plus épais (qui sera
+    plus facile à sélectionner).
+
+Les **propriétés avancées** permettent de :
+
+-   **simplifier** le tracé permet de réduire le nombre de points pour
+    l’adapter au niveau de zoom. Il est en général inutile de simplifier
+    un tracé réalisé *à la main*.
+-   définir un **traitillé**, par une série de chiffres séparés par des
+    virgules : longueur (en pixels) visible, longueur invisible,
+    longueur visible, etc. L’épaisseur du trait doit être prise en
+    compte : plus les traits sont épais plus les intervalles doivent
+    être grands.
+
+Voici le style de trait obtenu avec les propriétés ci-contre :
+
+![umap_ligne_tirets.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_tirets.png)
+
+### 3. Ajouter des étiquettes
+
+![etiquettes.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/etiquettes.png)
+
+Pour aider l’identification des
+différents éléments de notre carte, nous pouvons leur associer une
+étiquette. L’onglet **Options d’interaction** permet de contrôler
+l’affichage d’une étiquette associée à chaque élément :
+
+-   **Afficher une étiquette** active son affichage, elle est alors
+    placée automatiquement
+-   **Direction de l’étiquette** vous permet de fixer la position, à
+    droite ou à gauche de l’élément, ou encore au-dessus ou en-dessous
+-   **Afficher seulement au survol** de la souris est une option
+    intéressante si la carte est dense : afficher toutes les étiquettes
+    surchagerait la carte
+-   **Étiquette cliquable** permet d’afficher l’infobulle correspondante
+    si l’utilisateur clique sur l’étiquette, et non seulement en cas de
+    clic sur la *géométrie* de l’élément.
+
+
+## Faisons le point
+
+Notre deuxième carte est déjà plus intéressante que la première, et nous
+savons la retrouver facilement. Nous avons vu comment créer, *styliser*
+et modifier points et lignes. Nous n’avons pas traité ici des polygones,
+qui représentent des surfaces. Certaines fonctionnalités propres aux
+polygones méritent d’être détaillées, ce que nous ferons dans le
+tutoriel [Le cas des polygones](8-polygons.md).
+
+Pour le moment voyons comment nous pouvons davantage
+[personnaliser notre carte](4-customize-map.md).
+
+??? info "Licence"
+
+    Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:3_-_j_utilise_un_compte_et_cree_une_belle_carte) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).
+

docs-users/fr/tutorials/4-find-data.md

@@ -0,0 +1,221 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    - consulter des sources de données
+    - découvrir des exemples de cartes
+    - cloner une carte uMap
+    - cas pratique : utiliser un jeu de données placé sur data.gouv.fr
+
+## L’open data (données ouvertes)
+
+Outre les données produites par ma communauté OpenStreetMap, accessibles sur [GeoDataMine](https://geodatamine.fr/) et dans [l’assistant d’import de données de uMap](6-one-click-data-import.md), les ressources d’open data sont nombreuses et variées. En effet, les collectivités de plus de 3 500 habitants et les services publics doivent placer leurs données en open data conformément à la [Loi pour une République numérique](https://www.vie-publique.fr/eclairage/20301-loi-republique-numerique-7-octobre-2016-loi-lemaire-quels-changements). Le service public de la donnée organise leur publication sur [data.gouv.fr](https://www.data.gouv.fr/fr/) qui est un portail généraliste.
+
+Il existe également des bases plus adaptées à des jeux de données, par exemple les archives, des données géographiques, socio-économiques… Les collectivités mettent parfois aussi directement leurs données à disposition sur leurs portails open data. Des éditeurs de solutions proposent également des bases de données.
+
+
+## 1. Formats de données utilisés par uMap
+
+### geojson
+
+Ce format est utilisé pour des données de type point, ligne, chaîne de caractères, polygone.
+
+Toutes les propriétés sont importées dans uMap.
+
+❓ Usage très large dans uMap.
+
+### gpx
+
+Ce format ouvert permet l’échange de coordonnées géographiques issues de GPS, points de cheminement (*waypoints*), traces (*tracks*) ou itinéraires (*routes*).
+
+Propriétés importées dans uMap : `name`, `desc`. (format pour des itinéraires)
+
+❓ Les fichiers gpx peuvent provenir d’enregistrements personnels, par exemple de traces recueillies randonnées.
+
+### kml
+
+Format propriétaire qui contient des coordonnées géographiques, balisage, styles pour représenter des points, des lignes et des polygones.
+
+Propriétés importées dans uMap : `name`, `description`.
+
+### csv
+
+C’est un format texte ouvert représentant des données tabulaires sous forme de valeurs séparées par des virgules. Pour utiliser un fichier Excel, il faut d’abord le convertir en `.csv`.
+
+Propriétés importées dans uMap : virgule, tabulation ou point virgule pour séparer des valeurs. La projection SRS WGS84 est implicite. Seuls les points géométriques sont importés. L’importation se référera au titre dans les entêtes de colonnes de `lat` et `lon` au début de l’entête, et est insensible à la casse (peu importe les majuscules ou minuscules). Toutes les autres colonnes sont importées en tant que propriétés.
+
+❓ Usage très large dans uMap, aussi bien pour des données en *open data* que pour ses propres données.
+
+### umap
+
+C’est le format d’enregistrement d’une carte, très utilisé par exemple pour cloner une carte sur l’instance OSM et l’importer sur l’instance uMap pour les agents publics. uMap importe toutes les données de la carte, y compris les calques et les propriétés. Il s’agit d’un bon moyen de sauvegarder sa carte uMap.
+
+❓ Voir plus loin, comment cloner une carte uMap.
+
+Ainsi qu’osm et georss.
+
+## 2. S’orienter sur data.gouv.fr
+
+La plateforme [data.gouv.fr](https://www.data.gouv.fr/fr/) propose des données harmonisées, précise la date de mise à jour et permet de contacter l’administrateur qui a déposé le jeu de données. Il suffit d’utiliser l’outil de recherche pour préciser sa demande puis sélectionner le résultat voulu.
+La principale difficulté : savoir quel jeu de données répondrait au besoin. Dans ce cas, il est conseillé de regarder aussi les « thématiques » et les « réutilisations » en bas de page d’accueil.
+
+
+## 3. Gallica ! les archives de la Bibliothèque Nationale de France
+
+La [base Gallica](https://gallica.bnf.fr/accueil/fr/content/accueil-fr?mode=desktop) est particulièrement utile pour afficher dans uMap des images, des cartes postales, des fonds de cartes anciennes. Il n’est pas obligatoire de télécharger l’illustration, certaines cartes se contentent de placer le lien pour qu’elle s’affiche :
+
+### Vues de villes aux XVIe et XVIIe siècles
+
+![Capture d’écran de la carte](../../static/tutoriels/find-data-villes.png)
+
+[Lien vers la carte en ligne](https://umap.openstreetmap.fr/fr/map/vues-de-villes-aux-xvie-et-xviie-siecles_635544#7/46.241/-1.329){ .md-button }
+
+Deux exemples utilisant un plan ancien comme fond, en plus des images anciennes qui s’affichent en cliquant sur un pointeur :
+
+### Photographies de Marseille 1862 à 1866 par A. Terris
+
+
+![Capture d’écran de la carte](../../static/tutoriels/find-data-photos-marseille.png)
+
+[Lien vers la carte en ligne](https://umap.openstreetmap.fr/nl/map/photographies-de-marseille-1862-a-1866-par-a-terri_277962#14/43.2909/5.3815){ .md-button }
+
+### Metz 1872
+
+![Capture d’écran de la carte](../../static/tutoriels/find-data-metz-1872.png)
+
+[Lien vers la carte en ligne](https://umap.incubateur.anct.gouv.fr/fr/map/metz-1872_50#13/49.1201/6.1419){ .md-button }
+
+Dans ces deux derniers cas, le fond de carte doit être « redressé » avant d’être utilisé dans uMap comme [fond personnalisé](https://forum.openstreetmap.fr/t/integrer-un-fonds-de-carte-personnalise-sur-umap/19606).
+
+## 4. Bases de données statistiques
+
+uMap permet de représenter des données quantitatives par le biais de [cercles proportionnels](8-proportional-circles.md) ou de [cartes choroplèthes](10-embed-remote-data.md#produire-une-carte-de-chaleur-ou-heatmap) c’est à dire des plages de couleurs.
+
+L’[INSEE](https://www.insee.fr/fr/accueil) et [Eurostat](https://ec.europa.eu/eurostat/fr/data/database) permettent de télécharger des fichiers statistiques généralistes.
+
+Une fois un fichier enregistré, il faut vérifier le format des données et le modifier au besoin. Attention par exemple aux cellules fusionnées et aux espaces entre les séries de zéro.
+
+## 5. Cloner une carte uMap
+
+Pour utiliser les données d’une carte sur un autre fond, en faire plusieurs versions, il suffit de cloner la carte.
+
+Exemple de besoin : présenter sur un site Internet la même carte plusieurs fois, en diversifiant le centrage et les fonds de cartes. La même carte initiale fournit plusieurs vues provenant de clones.
+
+!!! french-instance "Pour les agents publics"
+
+    Cette fonctionnalité permet également d’importer sur [l’instance uMap agents publics](https://umap.incubateur.anct.gouv.fr/fr/) une carte réalisée sur une autre instance.
+
+    Voici les actions :
+
+    - sauvegardez la carte que vous souhaitez cloner
+    - créez une nouvelle carte - pour cloner la carte sur une nouvelle instance : connectez-vous à la nouvelle instance puis créez cette nouvelle carte et
+    - importez la carte.
+
+    Les deux cartes co-existent, une modification sur une carte n’impacte pas l’autre carte. Si la carte est partagée sur un site Internet, il faut veiller à **mettre à jour le lien** en cas de changement d’instance.
+
+### 1. Sauvegarder la carte
+
+Cliquez à gauche sur « Partager et télécharger »
+
+<shot-scraper
+    data-output="static/tutoriels/control-embed.png"
+    data-url="https://umap.openstreetmap.fr/en/map/new/"
+    data-alt="Icône du partage et de l’intégration."
+    data-selector=".leaflet-control-embed"
+    data-width="48"
+    data-height="48"
+    data-padding="5"
+    >Permet de partager la carte ou d’en exporter les données.</shot-scraper>
+
+puis une fois l’écran latéral affiché :
+
+![Capture d’écran du panneau de téléchargement de la carte](../../static/tutoriels/find-data-download.png)
+
+Cliquez sur « Sauvegarde complète » en bas.
+
+### 2. Créer une carte et importer le fichier
+
+Quitter cet écran, créer une nouvelle carte puis cliquer à droite sur « Importer des données » puis une fois l’écran latéral affiché :
+
+![Capture d’écran du module d’import](../../static/tutoriels/find-data-import-umap.jpg)
+
+
+Le format de l’import reconnaît uMap et le précise.
+
+Cliquez sur « Importer », puis enregistrez.
+
+## 6. Cas pratique : utiliser un jeu de données placé sur data.gouv.fr
+
+Pour un usage dans uMap, les fichiers doivent contenir les coordonnées géographiques des objets. Si le fichier choisi n’en contient pas, voir [ici](12-display-grist-data.md#2-geocoder-des-adresses-pour-les-agents-publics-seulement) comment les ajouter (géocodage).
+
+Voici les actions pour dresser la carte des arbres remarquables à Metz : rechercher les données, les importer dans uMap et les retravailler pour améliorer le placement des étiquettes.
+
+### Rechercher les données
+
+La plateforme ouverte des données publiques françaises recense des milliers de jeux de données. Rechercher « Arbres Metz » dans l’outil de recherche.
+
+Deux solutions pour utiliser ces données :
+
+* récupérer le fichier au format json : il faudra mettre à jour la carte de temps en temps lorsque les données sources sont mises à jour. Bénéfice : une carte à jour à une date précise.
+
+ou
+
+* utiliser le lien vers les données : dans ce cas, la carte se mettra automatiquement à jour (suppression d’arbres coupés par exemple, ajout de nouveaux). Inconvénient : la carte est une carte au temps T, on ne conserve pas l’historique dans ce cas.
+
+![Capture d’écran du site datagouv](../../static/tutoriels/find-data-datagouv.jpg)
+
+Vous avez le choix. Une fois le fichier téléchargé ou le lien copié, cliquer dans la carte sur uMap le bouton "Importer des données" dans la barre de droite puis dans le cadre au choix :
+
+* Parcourir les fichiers téléchargés et choisir le fichier des arbres remarquables au format Geojson
+
+ou
+
+* Coller l’URL stable dansla ligne prévue
+
+![Capture d’écran du panneau d’import (1)](../../static/tutoriels/find-data-import-panel-1.png)
+![Capture d’écran du panneau d’import (2)](../../static/tutoriels/find-data-import-panel-2.png)
+
+Dans « Choisir le format des données » : sélectionner `Geojson`. Dans le cas où vous choisissez l’URL stable, vous pouvez choisir `Associer au calque comme données distantes` et dans ce cas la carte se met automatiquement à jour si le fichier est modifié.
+
+Choisir `Copier dans le calque` pour que la carte reste telle quelle à une date T.
+
+La carte se centre automatiquement sur Metz et tous les arbres remarquables sont placés :
+
+![Capture d’écran de la carte](../../static/tutoriels/find-data-screenshot-trees.png)
+
+Les informations présentes dans le fichier sont répercutées et accessibles dans un tableau ou en cliquant sur chaque arbre.
+
+### Modifier l’apparence des pointeurs pour adapter à la charte d’un site
+
+Sélectionner le calque dans la barre de droite et modifier ses réglages en cliquant sur le petit stylo :
+
+![Capture d’écran du panneau de visualisation](../../static/tutoriels/find-data-visualize-data.png)
+
+Nom : Arbres remarquables (ou par exemple Feuillus ou Arbres de plus de 50 ans…), autant de possibilités que de calques et de couleurs. Puis cliquer sur les propriétés de la forme pour choisir la couleur et la forme du pointeur, mais aussi les options d’interaction : afficher une étiquette au survol par exemple.
+
+![Capture d’écran de la carte et du panneau de personnalisation](../../static/tutoriels/find-data-trees-customisation.png)
+
+### Afficher les noms des arbres au survol
+
+Toutes les données affichables dans l’étiquette sont présentées dans les colonnes du tableau associé au calque. Cliquez sur l’explorateur de données à gauche puis sur le visuel "Éditer dans un tableau" (juste à gauche de la corbeille):
+
+<shot-scraper
+    data-output="static/tutoriels/control-browse.png"
+    data-url="https://umap.openstreetmap.fr/en/map/new/"
+    data-alt="Icône du sélecteur de calque(s)."
+    data-selector=".umap-control-browse"
+    data-width="48"
+    data-height="48"
+    data-padding="5"
+    >Icône du sélecteur de calque(s).</shot-scraper>
+
+Dans le cas du fichier des arbres remarquables de Metz, le nom des arbres est renseigné comme `nom_commun` et `nom_latin`. Or dans uMap, par défaut, les étiquettes qui s’affichent utilisent `name`. Pour que le nom commun s’affiche, il faut remplacer `name` par `nom_commun` à droite dans les « Propriétés avancées » (Panneau d’information de ce calque):
+
+![Capture d’écran de la carte et du panneau de personnalisation](../../static/tutoriels/find-data-trees-customisation-advanced.png)
+
+Pour que l’étiquette s’affiche seulement au survol, choisir `Caché` un peu plus bas dans « Afficher une étiquette ».
+
+!!! note
+
+    - Pour s’entraîner, ouvrir les réglages, la carte peut être clonée ici :
+    https://umap.incubateur.anct.gouv.fr/fr/map/diaporama-des-arbres-remarquables-a-metz_528
+    - Pour cloner une carte, voir l’explication au point 5 plus haut.
+

docs-users/fr/tutorials/5-multimedia-tooltips.md

@@ -0,0 +1,212 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    - Formater le texte des infobulles
+    - Ajouter un lien vers une page Web
+    - Insérer une photo et définir sa taille
+    - Intégrer une vidéo
+
+## Procédons par étapes
+
+<shot-scraper
+    data-output="static/tutoriels/help-box.png"
+    data-url="https://umap.openstreetmap.fr/fr/map/new/"
+    data-alt="Panneau d’aide au formatage."
+    data-caption="Panneau d’aide au formatage."
+    data-selector=".umap-dialog"
+    data-width="510"
+    data-height="326"
+    data-padding="5"
+    data-javascript="
+        new Promise((takeShot) => {
+            document.querySelector('.leaflet-toolbar-icon.umap-control-caption').click();
+            setTimeout(() => {
+                document.querySelector('.umap-field-description .umap-help-button').click();
+                setTimeout(() => {
+                    takeShot();
+                }, 1000);
+            }, 1000);
+        });
+    "
+    >Panneau d’aide au formatage.</shot-scraper>
+
+
+Nous avons vu dans
+le tutoriel [Naviguer dans une carte](1-browsing-a-map.md)
+comment associer un nom et
+une description à un élément de la carte. Ce nom et cette description
+sont affichés dans une infobulle (*popup* en anglais) qui apparaît
+lorsqu’on clique sur l’élément.
+
+Le contenu de cette infobulle peut être enrichi de plusieurs manières :
+
+-   en formatant le texte : titres, caractères gras et italiques
+-   en insérant un ou plusieurs liens vers une page Web
+-   en insérant une image ou une vidéo
+
+Mettre en forme une infobulle nécessite d’utiliser une syntaxe décrite
+en cliquant sur le point d’interrogation visible à droite de l’intitulé
+**description**, reprise ci-contre.
+
+
+### 1. Mettre en forme le texte d’une infobulle
+
+![miseenforme-resultat.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-resultat.png)
+
+Un exemple
+vaut mieux que de longues explications : la description ci-dessous
+produit l’infobulle à droite.
+
+![miseenforme-syntaxe.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-syntaxe.png)
+
+Notez les points suivants :
+
+-   une ligne commençant par `#` définit une ligne titre, un **caractère
+    espace** doit être placé entre le caractère `#` et le texte du titre
+-   une **zone vide** est ajoutée automatiquement en-dessous de chaque
+    titre
+-   il est possible de combiner caractères gras et italiques en
+    utilisant `***`
+-   le triangle en bas à gauche du champ de saisie permet de l’agrandir
+
+### 2. Ajouter un lien vers une page Web
+
+Reprenons [la carte de nos vacances à
+Crozon](http://u.osmfr.org/m/64936/). Au 3ème jour de vacances un fort
+vent d’Ouest nous amène à aller dans l’Anse de Morgat, bien abritée du
+vent. Nous décidons de documenter cette visite sur la carte. Nous
+ajoutons un marqueur sur la carte, puis découvrons avec intérêt
+l’article Wikipédia sur Morgat : <https://fr.wikipedia.org/wiki/Morgat>.
+
+
+Pour
+ajouter à notre infobulle **un lien vers l’article**, il suffit de
+copier l’adresse de la page Web, affichée dans la barre d’adresse du
+navigateur, et de la placer entre **double-crochets**. L’infobulle à
+droite correspond à la description ci-dessous :
+
+    Morgat est un ancien village de pêcheurs.
+
+    Article Wikipédia :
+    [[https://fr.wikipedia.org/wiki/Morgat]]
+
+![miseenforme-liensimple.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-liensimple.png)
+
+Nous pouvons aussi **cacher l’adresse du lien** et la remplacer par un
+texte. Pour cela il suffit de faire suivre l’adresse d’une barre
+verticale (AltGr + 6 sur un clavier français) et du texte :
+
+    Morgat est un ancien village de pêcheurs.
+
+    [[https://fr.wikipedia.org/wiki/Morgat|Article Wikipédia]]
+
+![miseenforme-lienavectexte.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-lienavectexte.png)
+
+Cette forme est particulièrement utile pour les adresses longues.
+
+
+### 3. Insérer une image
+
+Umap ne permet pas de stocker des images, mais sait afficher des photos
+publiées sur un serveur Web.
+
+![miseenforme-photo.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-photo.png)
+
+L’article
+Wikipédia montre une belle photo de l’Anse de Morgat. Les photos
+visibles dans Wikipédia sont sous licence libre *[Creative
+Commons](http://creativecommons.fr/)*. Cela signifie que l’auteur·rice
+de la photo renonce à ses droits d’auteur : nous pouvons donc utiliser
+cette photo. Pour cela nous devons :
+
+1.  copier l’**adressse de l’image** (cette opération est accessible
+    dans le menu affiché par un clic droit sur la photo)
+2.  placer cette adresse entre double accolades :
+
+
+        Morgat est un ancien village de pêcheurs.
+
+        {{https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Morgat_8006.jpg/330px-Morgat_8006.jpg}}
+
+        [[https://fr.wikipedia.org/wiki/Morgat|Article Wikipédia]]
+
+#### Afficher vos photos
+
+Si vous disposez d’un serveur vous pouvez l’utiliser stocker vos photos.
+
+#### Modifier la taille d’une image
+
+
+La taille de la photo est
+restreinte par la taille de l’infobulle. Pour **agrandir une image**
+vous devez utiliser une infobulle plus grande. Pour cela ouvrez l’onglet
+`Options d’interaction`, cliquez sur `Définir` en face de
+`Style de popup` puis choisissez **Nom et description (large)**.
+
+![styledepopup.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/styledepopup.png)
+
+A l’inverse vous pouvez **réduire la taille d’une image**, en faisant
+suivre le lien vers la photo d’une barre verticale et d’un nombre qui
+définit la **largeur en pixels** de l’image, par exemple :
+
+    {{https://framapic.org/xxx/yyy.jpg|400}}
+
+#### Associer une image à un lien vers une page Web
+
+Il est possible d’intégrer une image qui ouvre une page Web lorsque
+l’utilisateur clique dessus. Cela consiste en fait à créer un lien vers
+une page Web (syntaxe `[[lien|texte]]`), en utilisant en guise de texte
+le lien vers une image (syntaxe `{{image}}`). Exemple avec le site et le
+logo Framasoft :
+
+    [[https://framasoft.org/|{{https://framasoft.org/nav/img/logo.png}}]]
+
+### 4. Insérer une vidéo
+
+Insérer une vidéo est plus complexe. En effet le navigateur Web a besoin
+d’un lecteur pour afficher une vidéo. Les sites de partage de vidéos
+comme Youtube, DailyMotion ou encore [Framatube](https://framatube.org/)
+de Framasoft, proposent pour chaque vidéo un lien qui permet de
+l’intégrer dans une autre page Web en utilisant une *iframe*.
+
+Nous trouvons sur YouTube une [vidéo des Grottes marines de
+Morgat](https://www.youtube.com/watch?v=sKvjd8bGsZM), qui se visitent en
+bateau. Pour intégrer cette vidéo à une infobulle, suivez les étapes :
+
+1.  ouvrez l’onglet **Intégrer** visible *sous* la vidéo
+2.  copiez l’adresse après `src=` (sans les guillemets), notez qu’elle
+    comporte le terme *embed* qui signifie *intégrer*
+    ![partageyoutube.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/partageyoutube.png)
+3.  coller cette adresse entre **triple accolades** dans l’infobulle :
+
+        {{{https://www.youtube.com/embed/sKvjd8bGsZM}}}
+
+4.  pour un meilleur résultat utilisez un style de popup large, notez la
+    hauteur et la largeur et définissez la taille de l’*iframe* avec les
+    mêmes valeurs :
+
+        {{{https://www.youtube.com/embed/sKvjd8bGsZM|315*560}}}
+
+Voici le résultat, la vidéo peut être directement visionnée dans notre
+infobulle :
+
+![miseenforme-video.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-video.png)
+
+## Faisons le point
+
+Nous avons à présent tous les éléments pour produire une belle carte,
+avec des éléments stylisés et les infobulles qui les décrivent avec un
+contenu mis en forme et multimédia : liens, photos et vidéos.
+
+La syntaxe permettant de mettre en forme une infobulle est certes un peu
+complexe, mais la bonne nouvelle est que cette même syntaxe peut être
+utilisée sur uMap en deux autres endroits :
+
+-   la description de la carte, définie dans le menu **Éditer les
+    paramètres**
+-   le descriptif des **calques**, que nous découvrons dans le
+    [prochain tutoriel](6-handling-datalayers.md).
+
+
+??? info "Licence"
+
+    Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:5_-_je_cree_des_infobulles_multimedia) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).

docs-users/fr/tutorials/6-handling-datalayers.md

@@ -0,0 +1,185 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    - Créer des calques et organiser le contenu de la carte
+    - Définir les propriétés d’un calque
+    - Gérer les calques d’une carte
+
+## Procédons par étapes
+
+### 1. Créer un calque
+
+Reprenons la [carte du Festival des 3 continents](http://u.osmfr.org/m/26381/)
+vu dans le tutoriel [Naviguer dans une carte](1-browsing-a-map.md). Les
+données de cette carte sont organisées en plusieurs calques :
+
+-   les cinémas : marqueurs jaunes
+-   les autres lieux du festival : marqueurs bruns
+-   les lignes de transport en commun
+-   les stations de vélo-partage Bicloo
+
+![umap_calques_gauche_droite.jpg](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_calques_gauche_droite.jpg)
+
+Le sélecteur de calques permet à l’utilisateur de zoomer sur l’ensemble
+des éléments d’un calque, de le masquer ou l’afficher à loisir. Chaque
+calque peut être décrit dans le panneau latéral de la carte. Organiser
+les éléments d’une carte est donc pratique pour consulter la carte, nous
+verrons aussi que cela permet de faciliter sa création.
+
+<shot-scraper
+    data-output="static/tutoriels/control-browse.png"
+    data-url="https://umap.openstreetmap.fr/en/map/new/"
+    data-alt="Icône du sélecteur de calque(s)."
+    data-selector=".umap-control-browse"
+    data-width="48"
+    data-height="48"
+    data-padding="5"
+    >Icône du sélecteur de calque(s).</shot-scraper>
+
+Le menu **Gérer les calques**, disponible en mode édition, affiche la liste des calques
+existants et permet de créer un nouveau calque. Cliquez ensuite sur
+**Ajouter un calque**, apparaît alors le panneau **Propriétés du calque**
+du nouveau calque.
+
+![](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_props_top.png)
+
+Saisissez le nom du calque et une description de la catégorie d’éléments
+auxquels vous destinez ce calque : ils seront affichés dans le panneau
+**À propos**. Ci-dessous le résultat correspondant aux propriétés
+saisies à droite.
+
+![umap_layer_description.png](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_description.png)
+
+!!! note
+    Sautez une ligne en début de description
+    pour celle-ci apparaisse **sous** le nom du calque et non à côté dans le
+    panneau À propos.
+
+### 2. Organiser le contenu de la carte
+
+
+Lorsque vous
+ajoutez un élément à la carte, en haut du panneau de propriétés de
+l’élément se trouve un **menu déroulant** qui vous permet de choisir le
+calque où placer l’élément.
+
+![umap_layer_select.png](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_select.png)
+
+Il est bien sûr possible de changer le calque d’un élément déjà créé.
+N’hésitez donc pas, lorsque votre carte s’enrichit, à *restructurer* son
+contenu en plusieurs couches.
+
+#### Comment définir les calques d’une carte ?
+
+Il n’y a pas de méthode établie pour définir les calques : cela dépend
+vraiment des données placées sur la carte et de l’expérience du
+cartographe. Voici, pour quelques thématiques de cartes et à titre
+d’exemples, une proposition de listes de calques :
+
+-   tourisme : hébergement, restauration, transports, musées, points de
+    vue…
+-   logistique d’un festival : accès, scènes, restauration, sanitaires,
+    déchets, postes de secours, réseau électrique…
+-   événement à portée internationale : un ou plusieurs calques par
+    langue
+-   structures d’un réseau : structures porteuses, adhérentes au réseau,
+    partenaires
+-   projet d’aménagement : les différents scénarios ou variantes du
+    projet
+
+Nous verrons plus loin que lorsqu’une carte est intégrée à une page Web,
+il est possible de créer plusieurs présentations de la même carte, et de
+sélectionner pour chacune quels calques sont visibles. Vous pourrez
+donc, à partir d’une même carte uMap, diffuser plusieurs cartes dont le
+contenu est adapté au public visé par chacune des cartes.
+
+Ainsi pour une carte multi-lingues vous pourrez diffuser la carte en
+différentes langues en sélectionnant le ou les calques de chaque langue.
+Pour l’exemple d’une carte de la logistique d’un festival, vous pourrez
+ainsi diffuser une carte vers le public (accès, scènes, restauration,
+sanitaires), une autre vers les équipes techniques (sanitaires, déchets,
+réseau électrique), une troisième vers la sécurtié civile (accès, postes
+de secours, réseau électrique), etc.
+
+### 3. Définir les propriétés d’un calque
+
+Un intérêt majeur de l’utilisation des calques est la possibilité de
+définir, pour chaque calque, le **style par défaut** des éléments qui
+seront ajoutés au calque. Vous éviterez ainsi la tâche fastidieuse de
+définir un à un le style de chaque élément et la carte sera nettement
+plus *lisible* car homogène. Surtout, si vous décidez que les cinémas
+doivent être affichés non plus en jaune mais en rouge, vous ne ferez la
+modification qu’une seule fois pour l’ensemble du calque et non pour
+chacun des éléments.
+
+![](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_edit.png)
+
+Dans le
+panneau de gestion des calques cliquez sur le crayon pour éditer les
+propriétés du calque. Les onglets **Propriétés de la forme** et
+**Propriétés avancées** vous permettent de définir les styles par défaut
+du calque. Vous retrouvez les mêmes propriétés que celles utilisées dans
+le tutoriel [Créer un compte](3-create-account.md).
+
+![umap_legende.png](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_legende.png)
+
+Toutes les propriétés, qui
+s’appliquent aux marqueurs, aux lignes et aux polygones, sont ici
+disponibles. Un calque peut en effet contenir indifféremment les trois
+types d’éléments, vous pouvez donc définir les propriétés par défaut
+pour chaque catégorie.
+
+Une remarque toutefois : vous pouvez définir **une et une seule
+couleur**, qui s’applique à tous les éléments quel que soit leur type.
+Cette contrainte vise à créer une carte lisible, en associant une
+couleur à chaque calque. Cette couleur apparaît en **légende du panneau
+À propos**, comme dans l’exemple ci-contre.
+
+### 4. Gérer les calques
+
+
+Revenons au **panneau de gestion des calques**. Nous avons vu comment
+créer un nouveau calque et définir ses propriétés.
+
+![](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_gestion_calques.png)
+
+Le carré à droite permet de modifier l’**ordre des calques** par un
+glisser-déposer. L’ordre ainsi défini est celui que l’on retrouve dans
+le sélecteur de calques et dans la liste des calques du panneau À
+Propos.
+
+L’œil permet de cacher/afficher un calque et la loupe de zoomer sur son
+contenu, comme pour le sélecteur de calques. Nous verrons plus loin
+l’utilité d’**Éditer dans un tableau** le contenu du calque. **Supprimer
+le calque** vous demandera de confirmer l’opération, cette opération
+supprimant le contenu du calque.
+
+![](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_advanced.png)
+
+Enfin, l’onglet **Actions avancées** permet de vider un calque : cela
+supprime ses données mais conserve le calque. Vous pouvez également
+**cloner un calque** : cette opération copie le contenu et les
+propriétés du calque.
+
+
+!!! note
+    Pour créer rapidement un nouveau calque dont
+    les propriétés sont proches d’un calque existant, vous pouvez cloner le
+    calque initial puis renommer le clone et vider son contenu.
+
+## Faisons le point
+
+S’il est un peu abstrait, le concept de calques est un des atouts de
+uMap. Au moment de créer un carte, prenez le temps de définir les
+principaux calques en anticipant les usages et les mises à jours de la
+carte. Familiarisez-vous à l’utilisation des calques, nous en ferons une
+grande utilisation dans le niveau avancé.
+
+Nous avons à présent tous les éléments pour réaliser des cartes
+structurées, utiles, dont le contenu est riche et joli. Il est temps
+d’apprendre à publier une carte sur un site internet, c’est l’objet du
+[prochain tutoriel](7-publishing-and-permissions.md).
+
+
+??? info "Licence"
+
+    Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:6_-_je_structure_ma_carte_avec_des_calques) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).

docs-users/fr/tutorials/6-one-click-data-import.md

@@ -0,0 +1,99 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    - Importer le contour d’une commune
+    - Importer les contours des départements ou des régions
+    - Importer un point d’intérêt (bibliothèques, parkings, …) qui est enregistré sur OpenStreetMap
+
+## Procédons par étapes
+
+Il est conseillé de vérifier si les données n’existent pas avant de se lancer dans leur dessin. On peut gagner un temps précieux avec l’assistant d’importation intégré dans uMap et conserver une carte qui n’est pas trop lourde au chargement.
+
+Voilà les deux actions à effectuer une fois une carte préexistante, ou une nouvelle carte vierge ouverte :
+
+- Cliquez sur l’outil d’import de données dans la barre de droite puis sélectionnez les données déjà prêtes à l’emploi
+- Cliquez sur « Importer » et le cas échéant enjolivez la carte, car des figurés par défaut sont utilisés
+
+uMap permet d’utiliser des données produites par de nombreux services et placées en open data sous différents formats. Nous verrons ultérieurement (niveau intermédiaire) où rechercher ces sources. D’ores et déjà, vous pouvez utiliser l’assistant d’importation pour récupérer en un clic des contours administratifs et des points d’intérêt.
+
+### Ressources disponibles (20/09/2024)
+
+Au 20 septembre 2024, les imports suivants sont disponibles :
+
+- contour d’une commune
+- contours des départements et des régions
+- données issues d’OpenStreetMap placées dans [GeoDataMine](https://geodatamine.fr/). Comme son nom l’indique, GeoDataMine est une véritable mine de données très utiles pour les services publics :
+    - Aire de jeux
+    - Aménagements cyclables
+    - Banques et DAB
+    - Base Adresse
+    - Bibliothèques
+    - Cimetière
+    - Cinémas
+    - Commerces
+    - Covoiturage
+    - Déchets et recyclage… jusqu’à Toilettes
+- overpass : pour se familiariser avec les types de requêtes à renseigner dans l’assistant, consulter les tutos plus avancés et la [page wiki](https://wiki.openstreetmap.org/wiki/Overpass_turbo/Wizard)
+
+
+!!! note
+    Il manque des données ? N’hésitez pas à contribuer pour les ajouter et vous en serez les premiers bénéficiaires !
+
+
+### Cliquez sur l’outil d’import des données
+
+Voici un bref passage en revu des différents imports proposés et pour finir l’import de la localisation des bibliothèques de Clermont- Ferrand :
+
+![Gif animé montrant l’usage de l’assistant d’import](../../static/tutoriels/importer.gif)
+
+## 1. Importer le contour d’une commune
+
+Cliquez sur l’outil d’importation en bas de la barre de droite, puis cliquez sur le lien « Assistants d’import ».
+
+Cliquez sur « Communes France » et sélectionnez la commune souhaitée dans une liste déroulante. Une fois la commune sélectionnée, le format est reconnu automatiquement (geojson) puis le type de calque (cliquer sur « ? » pour savoir quel choix opérer)
+
+1. Pour que les données soient simplement copiées, choisir « Copier dans le calque ».
+2. Pour que la carte évolue si le contour change, choisir « Associer au calque comme donnée distante ».
+
+!!! note
+    Le code affiché n’est pas le code postal mais le code INSEE de la commune.
+
+Voici le résultat avec la commune d’Arles (la plus vaste de France métropolitaine, un gain certain si on fait l’économie de dessiner son contour !)
+![Une carte avec le dessin de la commune d’Arles importée](../../static/tutoriels/importer-arles.png)
+
+Une fois cet import réalisé, tout est réglable : couleur de contour, de fond, affichage oui non d’une étiquette.
+
+## 2. Importer les contours des départements ou des régions
+
+Cliquez sur l’outil d’importation en bas de la barre de droite, puis cliquez sur le lien « Assistants d’import ».
+
+Cliquez sur « Contours nationaux » puis soit départements, soit régions et enfin le type de calque (voir supra l’explication). Tous les départements sont importés :
+
+![Une carte avec le dessin de chaque département importé](../../static/tutoriels/importer-departements.png)
+
+## 3. Importer un point d’intérêt issu de GeoDataMine
+
+Cliquez sur l’outil d’importation en bas de la barre de droite, puis cliquez sur le lien « Assistants d’import ».
+
+Cliquez sur « GeoDataMine (thèmes OSM) » et sélectionnez les informations souhaitées, routes, bâtiments, commerces, services publics, …
+Par exemple, en sélectionnant les points d’eau potable de la CA du Grand Avignon, puis « Copier dans un calque »
+
+![Une carte avec les points d’eau potable issus d’OpenStreetMap](../../static/tutoriels/importer-geodatamine.png)
+
+Voici une réelle économie de temps plutôt que de placer pointeur après pointeur tous les points d’eau.
+
+## 4. La carte combinée
+
+Bien entendu, on peut tout à fait combiner les différentes couches d’information et présenter par exemple la carte des Points d’eau potable dans la CA du Grand Avignon, avec les contours des communes qui composent l’EPCI, du département et de la région :
+
+### Points d’eau potable du Grand Avignon
+
+![Une carte combinant plusieurs imports](../../static/tutoriels/importer-multi.png)
+
+[Voir la carte en plein écran](https://umap.openstreetmap.fr/fr/map/points-deau-potable-grand-avignon_1116739?scaleControl=false&miniMap=false&scrollWheelZoom=true&zoomControl=true&editMode=disabled&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=none&captionBar=false&captionMenus=true#11/43.9889/4.7962){ .md-button }
+
+Il faudra dans ce cas supprimer toutes les informations inutiles dans le tableau de données qui est accessible dans la barre de gauche pour chaque calque.
+
+Pour gagner du temps : sélectionner tous les départements et désélectionner seulement le Vaucluse, puis cliquer sur « Supprimer les lignes sélectionnées ».
+
+
+

docs-users/fr/tutorials/7-publishing-and-permissions.md

@@ -0,0 +1,249 @@
+!!! abstract "Ce que nous allons apprendre"
+    - Insérer une carte dans une page HTML
+    - Publier une carte sur Wordpress
+    - Adapter les fonctionnalités de la carte
+    - Définir qui peut voir ou modifier la carte
+
+## Procédons par étapes
+
+### 1. Insérer une carte dans une page HTML
+
+Nous avons vu dans le tutoriel
+[Naviguer dans une carte](1-browsing-a-map.md) que
+le menu de partage permet d’*embarquer une carte en iframe*, sans donner
+plus de détail. Voyons comment cela se passe.
+
+<shot-scraper
+    data-output="static/tutoriels/control-embed.png"
+    data-url="https://umap.openstreetmap.fr/en/map/new/"
+    data-alt="Icône du partage et de l’intégration."
+    data-selector=".leaflet-control-embed"
+    data-width="48"
+    data-height="48"
+    data-padding="5"
+    >Permet de partager la carte ou d’en exporter les données.</shot-scraper>
+
+Une **iframe** est une balise du langage informatique HTML qui permet
+d’intégrer (embarquer) le contenu d’une page Web dans une autre page
+Web. C’est en fait très simple et nous avons déjà utilisé ce mécanisme
+pour intégrer une vidéo dans le tutoriel
+[Infobulles multimedia](5-multimedia-tooltips.md).
+
+![export-iframe.png](../../static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/export-iframe.png)
+
+Voici les étapes à suivre :
+
+1.  ouvrir le panneau **Exporter et partager la carte**
+2.  copier la totalité du texte sous **Intégrer la carte dans une
+    iframe** (astuce: placer le curseur sur le texte puis utiliser les
+    raccourcis clavier <kbd>Ctrl</kbd>+<kbd>a</kbd> pour tout sélectionner
+    puis <kbd>Ctrl</kbd>+<kbd>c</kbd> pour copier la sélection)
+3.  coller le texte copié dans le code source du fichier HTML dans
+    lequel vous souhaitez intégrer la carte (raccourci clavier: <kbd>Ctrl</kbd>+<kbd>v</kbd>)
+
+Voici un exemple minimaliste de fichier HTML dans lequel l’iframe d’une
+carte uMap à été intégrée :
+
+    <!DOCTYPE html>
+    <html>
+        <head>
+            <title>Exemple de carte uMap intégrée à une page Web</title>
+            <meta charset="UTF-8">
+        </head>
+        <body>
+            <div>
+                <h1>La carte du festival</h1>
+                <iframe width="100%" height="300px" frameBorder="0" src="https://umap.openstreetmap.fr/fr/map/festival-des-3-continents_26381?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&allowEdit=false&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=caption&captionBar=false"></iframe>
+                <p><a href="http://umap.openstreetmap.fr/fr/map/festival-des-3-continents_26381">Voir en plein écran</a></p>
+                <p>Cette carte vous est proposée par Carto’Cité :-)</p>
+            </div>
+        </body>
+    </html>
+
+Voici la carte intégrée sur cette page, en utilisant les options
+d’export par défaut :
+
+<div style="border: solid 1px;">
+    <h1>La carte du festival</h1>
+    <iframe width="100%" height="300px" frameBorder="0" src="https://umap.openstreetmap.fr/fr/map/festival-des-3-continents_26381?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&allowEdit=false&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=caption&captionBar=false"></iframe>
+    <p><a href="http://umap.openstreetmap.fr/fr/map/festival-des-3-continents_26381">Voir en plein écran</a></p>
+    <p>Cette carte vous est proposée par Carto’Cité :-)</p>
+</div>
+
+Bien entendu cela suppose de connaître un peu HTML et de disposer d’un
+serveur sur lequel publier un tel fichier. Mais le principe est posé et
+pas si compliqué. Voyons maintenant un cas de figure plus courant.
+
+### 2. Publier une carte sur WordPress
+
+Publier une carte sur un site WordPress se passe de la même façon que
+ci-dessus, en copiant le *code HTML de l’iframe* dans l’éditeur
+WordPress. Il est par contre nécessaire d’**utiliser l’éditeur textuel**
+(onglet Texte) et non l’éditeur visuel.
+
+![import-iframe-wordpress.png](../../static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/import-iframe-wordpress.png)
+
+Publiez la page et le tour est joué !
+
+!!! note
+    Pour des raisons de sécurité, les sites mutualisés
+    comme <https://fr.wordpress.com/> n’autorisent pas l’inclusion d’iframe.
+    Il vous sera donc impossible de publier une carte uMap sur de tels
+    sites.
+
+### 3. Adapter les fonctionnalités de la carte
+
+La carte intégrée ci-dessus n’est pas très pratique : sa hauteur est
+insuffisante et le panneau latéral est partiellement visible. Les
+boutons disponibles à gauche ne sont pas forcément adaptés, par exemple
+nous ne souhaitons pas intégrer le sélecteur de calques.
+
+L’onglet **Options d’export de l’iframe** permet de contrôler tout cela.
+Certaines de ces options correspondent aux **Options d’interface** vu
+dans le tutoriel
+[Personnaliser sa carte](4-customize-map.md). Il suffit
+d’activer ces options pour que le *code d’import de l’iframe* soit
+modifié. Une fois les options choisies, copiez ce code puis intégrez-le
+dans celui votre page Web.
+
+![options-export-iframe.png](../../static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/options-export-iframe.png)
+
+Les premières options sont spécifiques à l’export par iframe et méritent
+d’être commentées :
+
+-   la **largeur** de 100% permet d’utiliser toute la largeur disponible
+    de la page. Vous pouvez définir une largeur fixe en remplaçant le
+    texte par une largeur en pixels, par exemple `800px`
+-   le **lien "plein écran"** désigne le lien `Voir en plein écran`
+    placé sous la carte. Celui-ci permet à l’utilisateur d’afficher la
+    carte uMap telle nous l’avons vue jusqu’ici.
+-   l’option **Vue courante plutôt que vue par défaut** permet
+    d’appliquer le position et le niveau de zoom actuel de la carte à
+    l’export. Cette option est par exemple intéressante pour produire
+    plusieurs zooms d’une même carte.
+-   l’option **Garder les calques visibles actuellement** permet de
+    choisir les calques inclus dans la carte exportée. Cette option est
+    utile pour produire plusieurs cartes pour plusieurs profils
+    d’utilisateurs.
+-   **Autoriser le zoom avec la molette** est peu adapté si la carte est
+    intégrée dans une longue page, que les utilisateurs vont faire
+    défiler avec la molette : arrivé à la carte la page ne défilera plus
+    et la carte va effectuer un zoom arrière. Rien de grave mais ce
+    comportement peut être surprenant.
+
+!!! note
+    Lorsque les options **Vue courante plutôt que vue par
+    défaut** et **Garder les calques visibles actuellement** sont actives,
+    modifier la vue courante ou les calques visibles ne modifie pas le code
+    d’export. Vous devez désactiver puis réactiver l’option pour prendre en
+    compte ces modifications.
+
+Voici par exemple la même carte que ci-dessus, avec une vue et un choix
+de calque différents, et la plupart des options désactivées. Il est
+possible de déplacer la carte mais pas de zoomer ni modifier les
+calques.
+
+<iframe width="600px" height="400px" frameBorder="0"
+    src="https://umap.openstreetmap.fr/fr/map/festival-des-3-continents_26381?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=null&allowEdit=false&moreControl=false&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=false&onLoadPanel=none&captionBar=false&datalayers=53329%2C53328&locateControl=null&fullscreenControl=false#15/47.2132/-1.5503"
+    ></iframe>
+
+
+### 4. Définir qui peut voir ou modifier la carte
+
+<shot-scraper
+    data-output="static/tutoriels/map-permissions.png"
+    data-url="https://umap.openstreetmap.fr/fr/map/new/"
+    data-alt="Bouton de gestion des permissions."
+    data-width="46"
+    data-height="47"
+    data-selector=".leaflet-toolbar-icon.update-map-permissions"
+    data-padding="5"
+    >Bouton de gestion des permissions.</shot-scraper>
+
+
+Le bouton **Changer
+les permissions et les éditeurs** donne accès au panneau **Permissions
+de la carte**. Celui-ci vous permet de contrôler, pour chaque carte, qui
+peut la voir et qui peut la modifier.
+
+<shot-scraper
+    data-output="static/tutoriels/map-permissions-panel.png"
+    data-url="https://umap.openstreetmap.fr/fr/map/new/"
+    data-alt="Panneau des permissions."
+    data-caption="Panneau des permissions."
+    data-width="410"
+    data-height="414"
+    data-selector=".panel.right"
+    data-padding="5"
+    data-wait-for="document.querySelector('.panel.right')"
+    data-javascript="
+        new Promise((takeShot) => {
+            document.querySelector('.leaflet-control-edit-save').click();
+            document.querySelector('#umap-alert-container').style.display='none';
+            setTimeout(() => {
+                document.querySelector('.leaflet-toolbar-icon.update-map-permissions').click();
+                setTimeout(() => {
+                    takeShot();
+                }, 1000);
+            }, 1000);
+        });
+    "
+    >Panneau des permissions.</shot-scraper>
+
+Lorsque vous créez une carte celle-ci est visible dans votre *catalogue*
+de cartes, dont l’adresse est
+`http://umap.openstreetmap.fr/fr/user/<votre-compte>/` : l’option **Tout
+le monde (public)** du menu déroulant **Qui a accès** est sélectionnée.
+Les autres options de ce menu sont :
+
+-   **quiconque a le lien** : la carte n’apparaît plus dans votre
+    catalogue mais les personnes connaissant son lien peuvent la
+    consulter.
+-   **seulement les éditeurs** : seules les personnes ayant le droit
+    d’éditer la carte, et identifiées comme telles, peuvent consulter la
+    carte. Toute autre personne se verra refuser l’accès. N’utilisez pas
+    cette option si vous intégrez la carte dans une iframe.
+
+Lorsque vous créez une carte, vous êtes le seul à pouvoir la modifier.
+Vous pouvez inviter d’autres utilisateurs à la modifier en sélectionnant
+l’option **Seuls les éditeurs peuvent éditer** dans le menu **Statut
+d’édition**, puis en saisissant un à un le nom de compte des
+utilisateurs invités dans le champ **Éditeurs**.
+
+Le nom de chaque utilisateur est ajouté à la suite de ce champ.
+
+L’option **Tout le monde peut éditer** du menu **Statut d’édition** est
+utile pour créer une carte collectivement.
+
+!!! note
+    uMap ne permet pas à plusieurs éditeurs de modifier la
+    carte simultanément. Le logiciel vous alerte lorsque l’opération
+    **Enregistrer** risque d’écraser les modifications d’un autre
+    utilisateur, vous devez alors choisir entre ses modifications (en
+    validant Enregistrer) ou les vôtres (en annulant).
+
+    Si vous êtes plusieurs éditeurs d’une même carte, concertez-vous avant
+    de modifier la carte.
+
+Enfin vous pouvez **tranférer la propriété** d’une carte à un autre
+utilisateur : supprimez le propriétaire actuel (vous) en cliquant sur la
+petite croix à droite du champ **Owner**, puis saisissez le nom de
+compte de l’utilisateur à qui vous donnez la carte.
+
+## Faisons le point
+
+À ce stade nous savons créer une carte structurée avec du contenu
+multimédia, nous savons la publier et l’intégrer à une page Web, nous
+savons même la modifier collectivement. Nous allons bientôt pouvoir
+passer au niveau avancé, dans lequel nous allons apprendre à **importer
+des données** dans une carte et explorer les capacités d’ouverture de
+uMap.
+
+Mais avant cela, nous allons terminer le niveau intermédiaire en
+traitant [le cas des polygones](8-polygons.md).
+
+
+??? info "Licence"
+
+    Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:7_-_je_publie_ma_carte_et_en_controle_l_acces) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).
+

docs-users/fr/tutorials/8-polygons.md

@@ -0,0 +1,227 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    - Créer un polygone et le modifier
+    - Styliser un polygone : remplissage et contour(s)
+    - Associer une URL à un polygone
+    - Extraire des limites administratives d’OpenStreetMap
+    - Importer des données dans une carte
+
+!!! question
+
+    Pourquoi traiter les polygones à part, il ne s’agit que d’une ligne
+    fermée ? Un polygone est en réalité bien plus qu’un ligne fermée. Cette
+    ligne sépare l’**intérieur du polygone** de son extérieur, ceci est
+    important car uMap peut réagir à un clic à l’intérieur du polygone. De
+    plus un polygone être troué, il est alors défini par plusieurs lignes.
+
+## Procédons par étapes
+
+### 1. Créer un polygone
+
+Revenons à la carte de nos vacances à Crozon. Un jour de beau temps nous
+louons un dériveur et naviguons dans la zone définie par le club
+nautique. Ajoutons cette zone à la carte.
+
+<shot-scraper
+    data-output="static/tutoriels/draw-polygon.png"
+    data-url="https://umap.openstreetmap.fr/fr/map/new/"
+    data-alt="Bouton de dessin de polygones."
+    data-width="46"
+    data-height="47"
+    data-selector=".leaflet-toolbar-icon.umap-draw-polygon"
+    data-padding="5"
+    >Bouton de dessin de polygones.</shot-scraper>
+
+Le bouton
+**Dessiner un polygone** permet de tracer le périmètre d’un polygone
+point par point, et de le terminer en cliquant à nouveau sur le dernier
+point comme pour le tracé d’une ligne. Une différence toutefois : dès le
+troisième point l’intérieur du polygone est coloré.
+
+#### Propriétés d’un polygone
+
+![proprietes_polygones.png](../../static/tutoriels/8-le-cas-des-polygones/proprietes_polygones.png)
+
+La liste des
+propriétés d’un polygone est assez longue. Les propriétés de la moitié
+supérieure du menu s’appliquent au périmètre du polygone, et sont
+identiques aux propriétés s’appliquant aux lignes. Le moitié inférieure
+concerne le remplissage du polygone. Noter :
+
+-   les options **trait** et **remplissage** permettent de ne pas
+    afficher le périmètre ou l’intérieur du polygone : si aucun de ces
+    deux éléments est affiché le polygone est invisible.
+-   la **couleur du remplissage** est par défaut celle du trait, mais
+    peut être modifiée.
+-   une faible **opacité du remplissage** permet de voir le fond de
+    carte *sous* le polygone.
+
+#### Trouer un polygone
+
+Il est parfois utile de créer un ou plusieurs trous dans un polygone,
+par exemple pour dessiner une clairière dans une forêt ou un île au
+milieu d’un étang.
+
+![polygone_trou.jpg](../../static/tutoriels/8-le-cas-des-polygones/polygone_trou.jpg)
+
+Vous pouvez créer un
+polygone avec un ou plusieurs trous en cliquant sur l’option **Ajouter
+un tracé intérieur** lorsque vous sélectionnez un polygone en mode
+édition.
+
+Le premier point du *périmètre intérieur* est créé directement là où
+vous avez cliqué avant de choisir **Ajouter un tracé intérieur**.
+
+Notez que les propriétés de périmètre d’un polygone s’appliquent à tous
+les périmètres - extérieurs et intérieurs.
+
+### 2. Définir les interactions avec un polygone
+
+L’onglet **Options d’interaction** propose deux options spécifiques aux
+polygones.
+
+![interaction-desactivee.png](../../static/tutoriels/8-le-cas-des-polygones/interaction-desactivee.png)
+
+Toute interaction peut être désactivée en sélectionnant **OFF** pour
+l’option **Autoriser les interactions**. Aucune infobulle n’est alors
+affichée lors d’un clic sur le polygone. Cette option est intéressante
+pour donner de l’importance à une zone de la carte sans que
+l’utilisateur ne puisse interagir avec.
+
+![ile-de-nantes.jpg](../../static/tutoriels/8-le-cas-des-polygones/ile-de-nantes.jpg)
+
+Voici un exemple montrant
+l’Ile de Nantes entourée d’un large trait rouge et sans remplissage. Il
+n’est possible de cliquer ni sur le contour ni à l’intérieur du
+polygone.
+
+!!! note
+    L’interaction avec le polygone reste désactivée en mode
+    édition. Pour pouvoir éditer le polygone il est alors nécessaire de
+    passer par le panneau **Visualiser les données** (toujours accessible
+    par le panneau de Légende lui-même accessible depuis le lien **A
+    propos** en bas à droite de la carte).
+
+
+![interaction-url.png](../../static/tutoriels/8-le-cas-des-polygones/interaction-url.png)
+
+À l’inverse, il est
+possible d’associer à un polygone une URL : un clic sur le polygone
+ouvre alors la page Web correspondante directement, sans passer par une
+infobulle. Il suffit pour cela de définir le **Lien vers…** puis de
+saisir l’URL. il existe trois options permettant de définir ***où***
+sera ouverte la page Web :
+
+-   **nouvelle fenêtre** : la page s’ouvre dans un nouvel onglet du
+    navigateur
+-   **fenêtre parente** : la page s’ouvre dans le même onglet que celui
+    de la carte
+-   **iframe** : si la carte est intégrée dans une iframe, la page Web
+    est alors ouverte à l’intérieur de l’iframe
+
+
+### 3. Réaliser un menu cartographique
+
+Associer un URL à un polygone permet de créer un *menu cartographique*,
+c’est-à-dire une carte permettant d’accéder à plusieurs pages Web selon
+la zone sur laquelle clique l’utilisateur. Voici un exemple montrant les
+différents quartiers de Nantes : un clic sur un quartier ouvre la page
+correspondante du site <http://www.nantes.fr>.
+
+<iframe width="500px" height="550px" frameBorder="0" src="https://umap.openstreetmap.fr/fr/map/quartiers-de-nantes_126581?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=false&allowEdit=false&moreControl=false&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=false&onLoadPanel=undefined&captionBar=false&fullscreenControl=false&datalayers=311326#12/47.24/-1.5"></iframe>
+
+
+Voici les étapes pour réaliser cette carte.
+
+#### a. Récupérer les contours des quartiers
+
+Le contour des quartiers de Nantes provient les limites administratives
+d’OpenStreetMap (pour en savoir plus, consultez cette [page du
+Wiki](http://wiki.openstreetmap.org/wiki/WikiProject_France/Liste_limites_administratives)).
+Le site [OSM Boundaries](https://osm-boundaries.com/) permet de
+sélectionner les limites administratives une à une, puis de les exporter
+dans différents formats.
+
+![osm-boundaries.png](../../static/tutoriels/8-le-cas-des-polygones/osm-boundaries.png)
+
+Suivez ces étapes :
+
+1.  connectez-vous à votre compte OpenStreetMap (celui-ci est exigé pour
+    pouvoir exporter les limites administratives)
+2.  sélectionnez les limites administratives une par une, en ouvrant
+    successivement les différents niveaux : pays - région - département
+    etc.
+3.  sélectionez le format d’export JSON : le format
+    [GeoJSON](https://fr.wikipedia.org/wiki/GeoJSON) est alors utilisé
+4.  cliquez sur Export
+
+Vous récupérez dans le dossier des téléchargements un fichier dont
+l’extension est `.geojson`.
+
+![import-contours.png](../../static/tutoriels/8-le-cas-des-polygones/import-contours.png)
+
+#### b. Importer les contours de quartier dans une carte
+
+<shot-scraper
+    data-output="static/tutoriels/upload-data.png"
+    data-url="https://umap.openstreetmap.fr/fr/map/new/"
+    data-alt="Bouton d’import de données."
+    data-width="46"
+    data-height="47"
+    data-selector=".leaflet-toolbar-icon.upload-data"
+    data-padding="5"
+    >Bouton d’import de données.</shot-scraper>
+
+Dans une nouvelle
+carte, cliquez sur **Importer des données**. Dans le panneau qui appraît
+alors, sélectionnez le fichier produit à l’étape précédente.
+
+Le sélecteur de format se positionne automatiquement sur **geojson**,
+sélectionnez-le si ce n’est pas le cas, par exemple parce que
+l’extension du fichier n’est pas `.geojson`. Cliquez sur **Importer** :
+les contours apparaissent sur la carte.
+
+#### c. Configurer la carte uMap
+
+Configurez le calque afin d’afficher une étiquette - au survol ou pas
+selon votre choix. Ensuite éditez chaque polygone pour lui associer
+l’URL vers la page Web correspondante, comme nous l’avons vu plus haut.
+
+Enfin vous pouvez, dans les **Paramètres de la carte**, définir les
+**Limites géographiques** de la carte. Cela permet d’empêcher
+l’utilisateur de déplacer la carte au-delà de ces limites.
+![limites-geographiques.png](../../static/tutoriels/8-le-cas-des-polygones/limites-geographiques.png)
+
+#### d. Intégrer la carte dans une iframe
+
+Récupérez le code de l’iframe, comme nous l’avons vu dans le
+[tutoriel précédent](7-publishing-and-permissions.md),
+en prenant soin de désactiver toutes les options d’interaction :
+boutons de zoom, zoom avec la molette, bouton « Plus », etc.
+
+Copiez ce **code iframe** dans votre page Web, et le tour est joué !
+
+!!! note
+    Lorsque vous modifiez la carte, vous devez recharger
+    entièrement la page contenant l’iframe pour vider le cache du
+    navigateur, par exemple en utilisant <kbd>Ctrl</kbd>+<kbd>F5</kbd>
+    sur Firefox.
+
+
+## Faisons le point
+
+Ce tutoriel marque la fin du niveau intermédiaire. Vous savez structurer
+le contenu d’une carte avec des calques et utiliser des styles par
+défaut. Vous savez formater les infobulles et y intégrer du multimédia.
+Vous savez intégrer votre carte dans une page Web et contrôler qui peut
+la voir et la modifier.
+
+Nous venons de voir comment importer des données dans une carte, le
+niveau avancé va nous permettre d’aller bien plus loin dans cette
+démarche.
+
+
+??? info "Licence"
+
+    Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:8_-_le_cas_des_polygones) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).
+

docs-users/fr/tutorials/8-proportional-circles.md

@@ -0,0 +1,62 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    - Vérifier le formats du fichier
+    - Importer le fichier dans uMap
+    - Régler l’apparences des cercles
+
+## Procédons par étapes
+
+Nous allons importer des données quantitatives et les représenter sous forme de cercles proportionnels. On peut aussi représenter des données distantes par cercles proportionnels (voir les tutoriels plus avancés).
+
+
+### 1. Vérifier le format du fichier
+
+Pour être utilisable dans uMap, le fichier doit être enregistré au format `.csv`, il doit intégrer les cordonnées géographiques. Sans ces deux conditions, le fichier de données n’est pas traité.
+
+Il faut également éviter les mises en forme du type espace entre des blocs de trois zéros, sans quoi les cercles ne seront pas proportionnels, mais tous de même taille.
+
+Si la latitude et la longitude ne sont pas présentes, le fichier doit être géocodé.
+Le site de la Base Adresse Nationale propose un outil très pratique : <https://adresse.data.gouv.fr/csv>
+
+Il suffit de placer un fichier au format `.csv` contenant des adresses et de cliquer sur « géocodage ». L’outil en ligne ajoute les coordonnées géographiques des adresses.
+
+### 2. Importer le fichier dans uMap
+
+Cliquer sur l’outil d’importation en barre de droite :
+
+<shot-scraper
+    data-output="static/tutoriels/upload-data.png"
+    data-url="https://umap.openstreetmap.fr/fr/map/new/"
+    data-alt="Bouton d’import de données."
+    data-width="46"
+    data-height="47"
+    data-selector=".leaflet-toolbar-icon.upload-data"
+    data-padding="5"
+    >Bouton d’import de données.</shot-scraper>
+
+Puis choisir le fichier, par exemple ici la population municipale du Cher, le format est `.csv` et cliquer sur « importer » :
+
+![](../../static/tutoriels/circles-markers.png)
+
+Toutes les communes sont représentées par un pointeur. Il reste juste à préciser que les données de ce calque doivent être affichées par cercles proportionnels. Pour ce faire, cliquer sur l’outil « Gérer les calques » en barre de droite :
+
+<shot-scraper
+    data-output="static/tutoriels/control-browse.png"
+    data-url="https://umap.openstreetmap.fr/en/map/new/"
+    data-alt="Icône du sélecteur de calque(s)."
+    data-selector=".umap-control-browse"
+    data-width="48"
+    data-height="48"
+    data-padding="5"
+    >Icône du sélecteur de calque(s).</shot-scraper>
+
+Puis dans le menu déroulant, sélectionner « Cercles proportionnels » et la donnée de votre tableau que vous voulez représenter en cercles proportionnels :
+
+![](../../static/tutoriels/circles-proportional.jpg)
+
+Il est tout à fait possible de régler la proportionnalité sur les barres de rayon minimum et maximum pour modifier le rendu : l’écart est alors amplifié ou plutôt écrasé.
+
+!!! notes
+
+    Pour modifier les couleurs des cercles, voir le tutoriel
+    [Dessiner sur sa carte](/fr/tutorials/4-draw-items/).

docs-users/fr/tutorials/9-map-from-spreadsheet.md

@@ -0,0 +1,315 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    - Structurer des données pour pouvoir les géocoder
+    - Géocoder des adresses et vérifier le résultat
+    - Importer un tableau de données dans une carte uMap
+    - Injecter le contenu du tableau dans les infobulles
+    - Configurer le tri et le filtre des données
+
+## Procédons par étapes
+
+L’objectif de ce tutoriel est de créer une carte en important des
+données dans uMap. Cela peut être utile dans plusieurs situations :
+
+-   visualiser des données que vous avez trouvées sur un portail open
+    data, par exemple <https://data.nantesmetropole.fr/>
+-   placer sur une carte les contacts (clients, fournisseurs,
+    concurrents…) que vous gérez dans un tableur
+
+L’enjeu est de placer automatiquement chaque élément à sa **position
+géographique**, définie par une **longitude** et une **latitude** (on
+parle aussi de **point GPS**). Pour cela il faut que les données soient
+**géocodées**, par exemple un tableau contiendra deux colonnes :
+latitude et longitude.
+
+Si les données *open data* sont parfois géocodées, ce n’est généralement
+pas le cas de votre fichier de contacts qui contient des adresses. Il
+est dans ce cas nécessaire de passer par une étape de **géocodage**, qui
+consiste à convertir chaque adresse en latitude et longitude. Nous
+allons traiter ce cas de figure, étape par étape.
+
+### 1. Je crée un tableau avec des adresses
+
+Pour convertir des adresses en longitude et latitude nous allons
+utiliser un **géocodeur**. Celui-ci utilise une base de données
+d’adresses géocodées, parmi lesquelles il recherche l’adresse à
+géocoder. Voici quelques conseils à suivre pour faciliter la tâche du
+géocodeur et obtenir de bons résultats :
+
+-   répartir chaque adresse en **plusieurs colonnes** : adresse, code
+    postal et ville
+-   porter dans la colonne adresse le **libellé de la voie précédé du
+    numéro**, par exemple `14 rue de la Paix`, ou le nom du lieu-dit
+-   placer tout autre élément d’adresse (boîte postale, étage…) dans
+    un autre champ
+
+Voici par exemple quelques adresses bien structurées, provenant du
+fichier [Sièges des syndicats intercommunaux de transports scolaires en
+Loire-Atlantique](https://data.nantesmetropole.fr/explore/dataset/234400034_031-001_sits_shp/export/)
+:
+
+| NOM                     | ADRESSE                | COMPL_ADR                    | CP     | VILLE                     |
+| ------------------------| -----------------------| -----------------------------| -------| --------------------------|
+| C. C. LOIRE et SILLON   | 2 bd de la Loire       |                              | 44260  | SAVENAY                   |
+| C. C. COEUR d’ESTUAIRE  | 1 Cours d’Armor        | Route de Savenay             | 44360  | SAINT ETIENNE DE MONTLUC  |
+| RESEAU CAP ATLANTIC’    | 4 rue Alphonse Daudet  | Zone Tertiaire de Kerbiniou  | 44350  | GUERANDE                  |
+| SITS SUD LOIRE LAC      | ZI de la Seiglerie     |                              | 44270  | MACHECOUL                 |
+
+L’utilisation de majuscules ou minuscules n’a en général pas
+d’incidence. Le tableau peut bien sûr contenir d’autres colonnes, comme
+ici les colonnes NOM et COMPL_ADR.
+
+!!! note
+
+    Pour la suite des opérations, il est important que le
+    tableur respecte les règles suivantes :
+
+    -   la première ligne du tableur doit contenir les noms de colonnes, les
+        autres lignes contiennent les données et rien d’autre
+    -   les noms de colonnes ne doivent contenir ni espace ni accent ou
+        autre caractère spécial
+    -   les noms de colonnes doivent être tous différents
+    -   les cellules ne doivent pas contenir de "retour chariot" ou "saut de
+        ligne"
+    -   les cellules ne doivent pas être fusionnées
+
+    En d’autres termes, le tableur doit représenter une **base de données**.
+
+### 2. Je convertis les adresses en coordonnées géographiques
+
+Plusieurs **géocodeurs** sont disponibles sur internet. La qualité du
+géocodage peut différer en fonction de plusieurs facteurs :
+
+-   votre adresse est incomplète ou contient une erreur, par exemple un
+    mauvais code postal
+-   la base d’adresses utilisée contient des adresses erronées ou n’est
+    pas à jour
+-   l’algorithme chargé de comparer votre adresse à celles de la base de
+    données fait de mauvaises hypothèses
+
+Aucun géocodeur n’est parfait. Il est donc important de **vérifier la
+qualité du géocodage**, voire de comparer et combiner le résultat de
+plusieurs géocodeurs. La plupart des géocodeurs produisent, en
+complément à chaque latitude et longitude, un score permettant d’évaluer
+la qualité du résultat.
+
+En France le site <https://adresse.data.gouv.fr> donne accès à la Base
+Adresse Nationale (BAN). Il fournit plusieurs outils, dont le [géocodeur
+CSV](https://adresse.data.gouv.fr/csv) qui permet de géocoder une liste
+d’adresses très rapidement avec de bons résultats.
+
+[DoGeocodeur](https://dogeo.fr/_apps/DoGeocodeur/) est un site
+particulièrement bien pensé : il sait utiliser plusieurs géocodeurs
+(Google, IGN, BAN…) et combiner leur résultat, afficher le résultat
+sur une carte, et vous permet de positionner manuellement une adresse.
+Lui aussi utilise des fichiers CSV.
+
+!!! note
+    CSV désigne un fichier texte contenant les données d’un
+    tableau, dont les valeurs (le contenu de chaque cellule) sont séparées
+    par des virgules (CSV signifie *comma-separated values*) … ou par un
+    autre caractère : l’important est que ce **séparateur** ne soit pas
+    utilisé à l’intérieur d’une valeur. Le point-virgule est souvent utilisé
+    comme séparateur pour créer un fichier CSV.
+
+Pour géocoder les adresses d’un tableau, les étapes à suivre sont :
+
+1.  exporter le tableau dans un fichier au format CSV, en choisissant le
+    séparateur (conseil : point-virgule) et le jeu de caractères
+    (encodage) **UTF-8**. Inclure les entêtes de colonnes si l’option
+    vous est proposée. Voici par exemple le panneau d’export CSV de
+    LibreOffice Calc :
+    ![export_csv_libreoffice_calc.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/export_csv_libreoffice_calc.png)
+2.  importer le fichier CSV dans le site de géocodage de votre choix,
+    celui-ci vous demande en général de sélectionner les noms de
+    colonnes correspondant à l’adresse, au code postal et à la commune
+3.  vérifier le résultat du géocodage, l’ajuster et le compléter au
+    besoin
+4.  exporter le résultat, qui sera lui aussi au format CSV
+
+!!! note
+    Pour exporter un fichier CSV en UTF-8 avec Microsoft
+    Excel, le menu **Options Web** dans la fenêtre **Enregistrer sous**
+    permet, dans l’onglet **Encodage**, de sélectionner **Unicode (UTF-8)**.
+    Malheureusement cela **ne fonctionne pas pour MS Excel 2016 ni Office
+    365/Excel**, il s’agit d’un [bogue
+    connu](https://answers.microsoft.com/en-us/msoffice/forum/all/office-365excel-generates-incorrect-csv-utf-8/56516c38-78d8-40f5-90b3-f5d9db3d6d10).
+
+    Pour contourner ce bogue, une possibilité est d’utiliser l’éditeur
+    [Notepad++](https://notepad-plus-plus.org/) que vous devez installer. Ne
+    pas changer l’encodage lors de l’export CSV, puis ouvrir le fichier dans
+    Notepad++, convertir en UTF-8 dans le menu **Encodage**, enfin
+    enregistrer le fichier.
+
+### 3. J’importe le tableau géocodé dans un calque
+
+Cliquez sur
+**Importer des données** pour afficher le panneau du même nom, puis
+sélectionnez le fichier précédemment géocodé.
+
+<shot-scraper
+    data-output="static/tutoriels/upload-data.png"
+    data-url="https://umap.openstreetmap.fr/fr/map/new/"
+    data-alt="Bouton d’import de données."
+    data-width="46"
+    data-height="47"
+    data-selector=".leaflet-toolbar-icon.upload-data"
+    data-padding="5"
+    >Bouton d’import de données.</shot-scraper>
+
+
+![importer_des_donnees.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/importer_des_donnees.png)
+
+Vérifiez que uMap a bien reconnu **CSV** pour le format des données, et
+choisissez de les importer dans un **nouveau calque**.
+
+Enfin cliquez sur **Importer** : les données sont chargées puis
+affichées sur la carte. Les lignes n’ayant pas de position géographique
+sont ignorées, un message est alors affiché.
+
+!!! note
+
+    uMap utilise la première ligne du fichier CSV pour
+    identifier les noms de colonnes, en particulier **latitude** et
+    **longitude** qui sont utilisés pour positionner les points (**lat** et
+    **lon** sont aussi compris). Vérifiez la présence de ces noms de
+    colonnes si l’opération échoue. Attention également à ce que les
+    coordonnées soient exprimées en **degrés décimaux**, avec un point pour
+    délimiter les décimales. Exemple: 48.40 est correct mais 48,40 et 48°24’
+    ne sont pas valides pour uMap.
+
+Notez que vous pouvez directement coller les données dans le panneau
+d’import. Il est cependant intéressant de passer par un fichier que vous
+pouvez conserver sur votre poste.
+
+Enfin vous pouvez réimporter les données, par exemple après les avoir
+mises à jour. Sélectionnez alors le même calque et cochez la case
+**Remplacer le contenu du calque**.
+
+### 4. J’insère le contenu du tableau dans les infobulles
+
+![infobulle_nom_du_calque.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_nom_du_calque.png)
+
+Cliquez maintenant sur un marqueur importé à l’étape précédente :
+l’infobulle affiche le nom du calque (en l’occurence le nom du fichier
+importé si vous ne l’avez pas renommé) au lieu du nom présent dans le
+tableau de données.
+
+Il y a plusieurs possibilités pour rémédier à cela.
+
+#### Modifier le champ utilisé
+
+![cle_du_libelle.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/cle_du_libelle.png)
+
+Éditez le calque et
+modifiez, dans l’onglet Propriétés avancées, la **Clé pour le libellé**.
+Saisissez le nom de la colonne du fichier importé. Chaque infobulle
+affiche désormais le contenu de cette colonne.
+
+![infobulle_nom_correct.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_nom_correct.png)
+
+!!! note
+    Respecter la casse, c’est-à-dire les majuscules et
+    minuscules. Le nom de colonne ne doit pas contenir de caractère spécial
+    : accents, espace, ponctuation…
+
+#### Afficher un tableau
+
+![popup_tableau.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/popup_tableau.png)
+
+Le contenu du tableau peut
+être affiché dans les infobulles, sous forme d’un tableau à deux
+colonnes : l’intitulé et la valeur correspondante.
+
+Dans l’onglet **Options d’interaction** du calque, changez le **Style de
+la popup** en **Tableau**. Voici un exemple de résultat :
+
+![infobulle_tableau.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_tableau.png)
+
+![modifier_tableau.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/modifier_tableau.png)
+
+Notez que vous
+pouvez modifier le contenu du tableau en cliquant sur **Éditer dans un
+tableau** dans le sélecteur de calques. Vous pouvez alors supprimer ou
+renommer des colonnes, voire même modifier les cellules du tableau.
+
+#### Définir le gabarit des infobulles
+
+![gabarit_popup.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/gabarit_popup.png)
+
+Le tableau ci-dessus n’est
+pas particulièrement joli avec ses libellés en majuscules.
+
+Dans le tutoriel [5-multimedia-tooltips.md) nous avons vu
+comment formater le contenu d’une infobulle. Nous pouvons utiliser la
+même syntaxe pour définir le contenu de **toutes les infobulles d’un
+calque**, en y intégrant le contenu des cellules du tableau.
+
+Dans l’onglet **Options d’interaction** du calque, éditez le **Gabarit
+du contenu de la popup**. Définissez le format des popups (titres,
+caractère gras, etc.) comme vu précédemment. Pour *injecter* le contenu
+d’une cellule dans l’infobulle, il suffit d’ajouter le nom de la colonne
+placé entre accolades, par exemple **{NOM}**.
+
+![infobulle_avec_gabarit.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_avec_gabarit.png)
+
+Vous pouvez utiliser dans le gabarit tous les champs du tableau. Voici à
+droite un exemple de gabarit et le résultat pour une infobulle.
+
+**Cette approche est très puissante.** Vous pouvez l’utiliser pour
+injecter, pour chaque ligne du tableau, un lien vers un site internet
+(et pourquoi pas le texte associé), une image ou une iframe. Il suffit
+pour cela d’intégrer le nom de colonnes et ses accolades, à la syntaxe
+de mise en forme du texte, par exemple `[[{LIEN_SITE}|{TEXTE_LIEN}]]` ou
+encore `{{{URL_IMAGE}}}`.
+
+### 5. Je configure le tri et les filtres
+
+![config_filtres.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/config_filtres.png)
+
+Nous avons vu dans le tutoriel
+[Je consulte une carte uMap](1-browsing-a-map.md) qu’il
+est possible de voir l’ensemble des données de la carte sous la forme
+d’une liste. Cette liste peut aussi filtrée par l’utilisateur, à partir
+d’un mot par exemple.
+
+<shot-scraper
+    data-output="static/tutoriels/map-settings.png"
+    data-url="https://umap.openstreetmap.fr/fr/map/new/"
+    data-alt="Bouton des options de la carte."
+    data-width="46"
+    data-height="47"
+    data-selector=".leaflet-toolbar-icon.update-map-settings"
+    data-padding="5"
+    >Bouton des options de la carte.</shot-scraper>
+
+Pour permettre aux
+utilisateurs de filtrer les données il convient de préciser à uMap à
+quel(s) champ(s) le "mot-filtre" doit s’appliquer. Cela s’effectue dans
+l’onglet **Propriétés par défaut** des **Propriétés de la carte**. Vous
+pouvez indiquer plusieurs noms de champ (noms de colonne), le filtre
+s’appliquera à chacun des champs.
+
+Notez que vous pouvez également trier la liste en sélectionnant la **Clé
+de tri**, c’est-à-dire le nom de la colonne utilisée pour le tri (tri
+croissant uniquement). Enfin vous pouvez définir la clé par défaut pour
+le libellé, qui sera utilisée si celle-ci n’est pas définie pour le
+calque.
+
+!!! note
+    Les clés de tri et de filtre s’appliquent à l’ensemble
+    des données, tous calques confondus. Si votre carte est constituée de
+    plusieurs calques, il est donc conseillé d’utiliser le même nom de clé
+    pour désigner le même type d’information. Évitez par exemple d’utiliser
+    **Ville** pour un calque et **Commune** pour un autre, utilisez plutôt
+    **Commune** pour les deux.
+
+## Faisons le point
+
+Ce tutoriel est probablement le plus complexe de la série. Appréciez
+toutefois les possibilités offertes par uMap pour intégrer des données
+externes.
+
+??? info "Licence"
+
+    Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:9_-_je_cree_une_carte_a_partir_dun_tableur) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).

docs-users/fr/videos.md

@@ -0,0 +1,61 @@
+# Vidéos uMap
+
+## Faire la carte de son marché de Noël
+
+<iframe title="Faire la carte de son marché de Noël" width="560" height="315" src="https://tube.numerique.gouv.fr/videos/embed/7d3a95ad-37dc-4af1-ac15-17992cb95869" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
+
+## Atelier « Afficher des donnees Grist dans uMap »
+
+<iframe title="Atelier Afficher des donnees Grist dans uMap" width="560" height="315" src="https://tube.numerique.gouv.fr/videos/embed/517beed6-ed57-430d-ad76-61e0c4784338" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
+
+## Transformer un tableau Grist en carte avec uMap
+
+<iframe title="Transformer une table Grist en carte avec uMap" width="560" height="315" src="https://tube.numerique.gouv.fr/videos/embed/9e5b09d5-c660-41a0-8591-cae347c88e65" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
+
+## uMap incubé par l’État, ça donne quoi ?
+
+<iframe title="uMap incubé par l’État, ça donne quoi ?" width="560" height="315" src="https://peertube.openstreetmap.fr/videos/embed/c564dcfd-4b0b-4796-86ac-ca8624226cd3" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
+
+## uMap a 10 ans, bilan et perspectives
+
+<iframe title="uMap a 10 ans, bilan et perspectives" width="560" height="315" src="https://peertube.openstreetmap.fr/videos/embed/f4f122d4-0ff5-4015-bd64-ea507ad5f5b5" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>
+
+## Retour d’expérience sur l’utilisation d’uMap à la Chambre d’agriculture des Pays de la Loire
+
+<iframe title="Retour d’expérience sur l’utilisation d’uMap à la Chambre d’agriculture des Pays de la Loire" width="560" height="315" src="https://peertube.openstreetmap.fr/videos/embed/8fde9bc7-2687-44ca-8984-5a37f60fc2e1" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>
+
+## Exemples cartes uMap
+
+<iframe title="Exemples cartes uMap" width="560" height="315" src="https://peertube.openstreetmap.fr/videos/embed/3e8a55d3-761e-48bd-a871-86e65f137e9e" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>
+
+---
+
+## Tutoriel - Umap, croquis et carte interactive (bases sans création de compte)
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/-gR4IN1meOY?si=g_wLc3ZI67yJ-wrK" title="Tutoriel - Umap, croquis et carte interactive (bases sans création de compte)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+## Tutoriel - Umap / Openstreetmap (carte enrichie)
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/j7o96lUxN6o?si=IcczSafYOedaMAwX" title="Tutoriel - Umap / Openstreetmap (carte enrichie)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+---
+
+## Mieux visualiser une balade pédagogique ?
+
+Cette vidéo va vous faire découvrir des fonctionnalités de base, tel que le déplacement sur la carte, le zoom, les filtres pour le choix de certaines balades et ainsi améliorer la lisibilité de la carte :
+
+<video controls src="http://balades-pedagogiques.org/wp-content/uploads/2023/11/Mieux-visualiser-les-balades-1.mp4"></video>
+
+Vidéo proposée par [balades-pedagogiques.org](http://balades-pedagogiques.org/?page_id=14).
+
+## Comment se repérer et mesurer des distances ?
+
+Cette vidéo va vous faire découvrir les fonctionnalités permettant la recherche d&rsquo;un lieu et de mesurer une distance sur la carte :
+
+<video controls src="http://balades-pedagogiques.org/wp-content/uploads/2023/11/Se-reperer-et-mesurer-des-distances.mp4"></video>
+
+Vidéo proposée par [balades-pedagogiques.org](http://balades-pedagogiques.org/?page_id=14).
+
+---
+
+[Suggérer d’autres vidéos ?](https://github.com/umap-project/umap/issues/new/choose){ .md-button }

docs-users/index.md

@@ -0,0 +1,22 @@
+# uMap user’ documentation
+
+uMap lets you create maps with OpenStreetMap layers in a minute, and embed them in your site.
+
+- 🤓 Check out [videos](videos.md) and [articles](articles.md).
+- 🤔 Explore [questions/answers from FAQ](support/faq.md).
+- 🤕 Browse [potential errors and their details](support/errors.md).
+
+!!! info "Are you a developer?"
+
+    This documentation is intended for users.
+
+    If you are looking for developer documentation, have a look at [the dedicated documentation](https://docs.umap-project.org/).
+
+
+??? bug "What if there is an undocumented bug?"
+
+    You can:
+
+    - reach [the dedicated mailing-list](https://lists.openstreetmap.org/listinfo/umap)
+    - check if the issue [has already been reported](https://github.com/umap-project/umap/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc)
+    - declare [a new issue](https://github.com/umap-project/umap/issues/new/choose)

docs-users/requirements.txt

@@ -0,0 +1,5 @@
+# Force rtfd to use a recent version of mkdocs
+mkdocs==1.6.1
+pymdown-extensions==10.14.3
+mkdocs-material==9.6.12
+mkdocs-static-i18n==1.3.0