Compare commits

..

No commits in common. "master" and "2.0.3" have entirely different histories.

752 changed files with 62536 additions and 118956 deletions

View file

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

View file

@ -1,23 +0,0 @@
# 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

View file

@ -1,26 +0,0 @@
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 }}

View file

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

14
.gitignore vendored
View file

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

View file

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

View file

@ -1,5 +1,7 @@
.DEFAULT_GOAL := help .DEFAULT_GOAL := help
JS_TEST_URL := http://localhost:8001/umap/static/umap/test/index.html
.PHONY: install .PHONY: install
install: ## Install the dependencies install: ## Install the dependencies
python3 -m pip install --upgrade pip python3 -m pip install --upgrade pip
@ -7,21 +9,21 @@ install: ## Install the dependencies
.PHONY: develop .PHONY: develop
develop: ## Install the test and dev dependencies develop: ## Install the test and dev dependencies
python3 -m pip install -e .[test,dev,sync,s3] python3 -m pip install -e .[test,dev]
playwright install playwright install
.PHONY: format .PHONY: format
format: ## Format the code and templates files format: ## Format the code and templates files
-djlint umap/templates --reformat djlint umap/templates --reformat &&\
-isort --profile black umap/ isort --profile black . &&\
-ruff format --target-version=py310 umap/ ruff format --target-version=py310 .
.PHONY: lint .PHONY: lint
lint: ## Lint the code and template files lint: ## Lint the code and template files
npx eslint umap/static/umap/js/ npx eslint umap/static/umap/ &&\
djlint umap/templates --lint djlint umap/templates --lint &&\
isort --check --profile black umap/ isort --check --profile black umap/ &&\
ruff format --check --target-version=py310 umap/ ruff format --check --target-version=py310 umap/ &&\
vermin --no-tips --violations -t=3.10- umap/ vermin --no-tips --violations -t=3.10- umap/
docs: ## Compile the docs docs: ## Compile the docs
@ -46,13 +48,6 @@ docker: ## Create a new Docker image and publish it
docker build -t umap/umap:${VERSION} . docker build -t umap/umap:${VERSION} .
docker push 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 .PHONY: build
build: ## Build the Python package before release build: ## Build the Python package before release
@hatch build --clean @hatch build --clean
@ -62,13 +57,11 @@ publish: ## Publish the Python package to Pypi
@hatch publish @hatch publish
make clean make clean
test: testpy testjs test:
pytest -xv umap/tests/
testpy:
pytest -vv umap/tests/ --dist=loadgroup --reruns 1 --maxfail 10
test-integration: test-integration:
pytest -xv umap/tests/integration/ --dist=loadgroup pytest -xv umap/tests/integration/
clean: clean:
rm -f dist/* rm -f dist/*
@ -78,27 +71,35 @@ compilemessages:
umap generate_js_locale umap generate_js_locale
messages: messages:
cd umap && umap makemessages -l en cd umap && umap makemessages -l en
node node_modules/leaflet-i18n/bin/i18n.js --dir_path=umap/static/umap/js/ --dir_path=umap/static/umap/vendors/measurable/ --locale_dir_path=umap/static/umap/locale/ --locale_codes=en --mode=json --clean --default_values --expressions=_,translate node node_modules/leaflet-i18n/bin/i18n.js --dir_path=umap/static/umap/js/ --dir_path=umap/static/umap/vendors/measurable/ --locale_dir_path=umap/static/umap/locale/ --locale_codes=en --mode=json --clean --default_values
vendors: vendors:
npm run vendors npm run vendors
installjs: installjs:
npm install npm install
testjs: node_modules testjs: node_modules
node_modules/mocha/bin/mocha.js umap/static/umap/unittests/ @{ \
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; \
}
tx_push: tx_push:
tx push -s tx push -s
tx_pull: tx_pull:
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/ jsdir = umap/static/umap/js/
filepath = "${jsdir}*.js" filepath = "${jsdir}*.js"
.PHONY: pretty .PHONY: pretty
pretty: ## Apply Biome to all JS files (or specified `jsdir`) pretty: ## Apply PrettierJS to all JS files (or specified `filepath`)
./node_modules/@biomejs/biome/bin/biome check --write ${jsdir} ./node_modules/prettier/bin-prettier.js --write ${filepath}
.PHONY: lebab .PHONY: lebab
lebab: ## Convert JS `filepath` to modern syntax with Lebab, then prettify lebab: ## Convert JS `filepath` to modern syntax with Lebab, then prettify

View file

@ -1,52 +0,0 @@
{
"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
}
}

View file

@ -1,23 +0,0 @@
# 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/

View file

@ -1,16 +0,0 @@
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

View file

@ -1,73 +0,0 @@
{{/*
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 -}}

View file

@ -1,110 +0,0 @@
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 }}

View file

@ -1,31 +0,0 @@
{{- 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 }}

View file

@ -1,24 +0,0 @@
{{- 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 }}

View file

@ -1,11 +0,0 @@
{{ 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 }}

View file

@ -1,13 +0,0 @@
{{ 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 }}

View file

@ -1,15 +0,0 @@
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 }}

View file

@ -1,13 +0,0 @@
{{- 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 }}

View file

@ -1,125 +0,0 @@
# 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

View file

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

View file

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

View file

@ -1,111 +0,0 @@
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;
}
}
}

12
docker/uwsgi.ini Normal file
View file

@ -0,0 +1,12 @@
[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

View file

@ -1,97 +0,0 @@
# 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. Its 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, well 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)
> Ive spent the last few weeks working on uMap, still with the goal of bringing real-time collaboration to the maps. Im not there yet, but <mark>Ive 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) ;
> * Ive 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, Ive 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, well 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)
> Weve 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 dinitiatives 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 }

View file

@ -1,4 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 321 B

View file

@ -1,72 +0,0 @@
# 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 dimport de données à distance en un clic.
>
> En outre, des améliorations mineures et des corrections de bogues ont rendu loutil 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 dagriculture](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 dagriculture 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 saffichent : 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 lampleur 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 linformation & 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 dun 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 dinformation 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 doutils 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 dajouter des fonds de cartes anciens en suivant la démarche indiquée avec lexemple 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 duMap ont évolué. Voilà loccasion de refaire la carte et dexplorer dautres approches. Bien entendu les fonctionnalités de diaporama sont toujours actives sur la carte dorigine.
>
> <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 savérer utile, dans le cadre dun travail préparatoire ou pour une présentation, de créer une carte personnalisée de sa commune. À cet effet, <mark>lANCT 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 dautres 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. Linstance [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 à saffranchir des enfermements numériques ? Double défi joliment relevé par Hervé Baronnet, professeur des écoles dans lacadé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 à sapproprier 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 ? Cest 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 doù 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 larticle « Les 10 cafés les plus cosy de Paris. » Super, il ny a plus quà les trouver. Sauf que, vous jetez un coup dœil à ladresse… euh le 9e, cest quels stations de métro ça ? 🤔😅
[Article complet →](https://blog.jawg.io/ajouter-des-cartes-interactives-a-vos-articles-de-blog/){ .md-button }

View file

@ -1,23 +0,0 @@
# 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 na 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).

View file

@ -1,32 +0,0 @@
# 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 dArles, 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

View file

@ -1,5 +0,0 @@
# 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`.

View file

@ -1,118 +0,0 @@
# 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 à laperç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 dimport de données
* `Ctrl+O` → ouvre le panneau dimport 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 daccueil. 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 nest 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 nont pas accès auront une page derreur 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.

View file

@ -1,228 +0,0 @@
!!! 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 dune 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** : lensemble 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 lauteur de la
carte a choisi de les cacher.
Voyons maintenant quelques fonctionnalités propres à uMap.
### 2. Le sélecteur de calques
Les éléments dune carte umap peuvent être répartis dans plusieurs
calques, ou couches. Cela permet de structurer une carte, pour quelle
soit plus claire et plus facile à maintenir. Lutilisateur peut choisir
dafficher 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
licô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 dun calque.
![Une description des différentes parties dun 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 loeil de ce calque permet de lafficher.
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 doptions."
data-width="46"
data-height="33"
data-selector=".umap-control-more"
data-padding="5"
>Icône pour afficher plus doptions.</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 dune 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 lon 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 lintégration."
data-selector=".leaflet-control-embed"
data-width="48"
data-height="48"
data-padding="5"
>Permet de partager la carte ou den 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, cest-à-dire centrer la carte sur votre position
actuelle. La géolocalisation exige de demander lautorisation de lutilisateur,
votre navigateur Web peut donc vous demander daccepter 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 : dune part il affiche la longueur
des éléments linéaires de la carte et laire des éléments
surfaciques ; dautre 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 lobjet 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 lun deux 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 à
lURL de la carte - que vous pouvez par exemple envoyer dans un
mail.
- **Embarquer la carte en iframe** permet dinclure la carte dans une
page Web : il suffit de copier le code HTML et de linsé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 laccès](7-publishing-and-permissions.md).
- **Télécharger les données** permet dobtenir les données visibles
sur la carte, dans différents formats. Cela peut vous permettre
dutiliser 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 lensemble des éléments de la
carte, organisés par calques. La loupe à gauche de chaque élément permet
dafficher 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 dune carte uMap. Nous allons maintenant
[apprendre à créer une telle carte](2-first-map.md).
??? info "Licence"
Travail initié par Antoine Riche sur [CartoCité](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).

View file

@ -1,408 +0,0 @@
!!! 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
Jusquici 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 dun
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**, cest-à-dire stockées sur un autre
serveur que le serveur uMap.
### 1. Jutilise 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/>.
Longlet **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 lAPI décrite dans longlet **API**, dont le
format nest pas compris par uMap.
Longlet **Tableau** montre les données : chaque station a un nom et une
capacité (nombre demplacements), ainsi quune position géographique.
Longlet **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 dexploiter tous les attributs présents dans les données.
Une possibilité serait de télécharger le fichier puis de limporter dans
uMap, comme nous lavons 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,
longlet **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 dexport du portail
open data
Le bouton **Vérifier lURL** permet de tester laccè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é nautorise pas laccès au fichier
depuis un service tiers.
!!! note
Il sagit du mécanisme CORS, décrit dans larticle
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 à loption **Avec proxy** quil
convient alors dactiver. 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 dafficher le nom et la capacité de chaque station dans une
infobulle, nous devons déterminer les clefs permettant daccéder à ces
informations. Pour cela il nous faut observer le fichier GeoJSON.
Nous téléchargeons ce fichier depuis longlet 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 à
louvrir 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 demplacements. Ces propriétés
correspondent à nos entêtes de colonnes dun fichier CSV (cf. tuto
précédent).
Nous pouvons alors configurer le **Gabarit de la popup** pour afficher
ces informations dans linfobulle de chaque station, comme nous lavons
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 davoir
une vue densemble de la répartition de loffre 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 dun 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 sajouter).
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. Lorsquon choisit un de ces modes, un
onglet de configuration apparaît. Pour le type *Heatmap*, longlet
**Heatmap: paramètres** permet dajuster lintensité 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é nest 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 demplacements de chaque station un bon
critère pour représenter loffre de vélos en libre-service. Quant au
**Rayon de heatmap**, un curseur permet de lajuster 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 daffichage dun calque sapplique 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, lun affichant les stations
individuelles, lautre sous forme de Heatmap. Lastuce consiste ensuite
à activer ou désactiver chaque calque en fonction du niveau de zoom.
Procédons par étapes :
1. Dupliquons notre calque avec lopération **Cloner** disponible dans
longlet **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**, longlet **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 longlet **Données distantes**, configurons le calque pour
quil saffiche **jusquau zoom** 15.
6. De la même manière, configurons le calque initial pour quil
saffiche **à 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
demplacements.
Notez que nous navons pas eu besoin de préciser lURL des données
distantes et leur format : ces paramètres ont été conservés lors de la
duplication du calque.
### 3. Jutilise des données dynamiques
Un autre jeu de données du portail open data sintitule « 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 : loption **Dynamique** de longlet
**Données distantes** doit être activée. Elle indique à uMap de
récupérer les données à chaque affichage de la carte, cest-à-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 : cest à lutilisateur 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
longlet **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 lexport 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 longlet **API** nous montre lexistence 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 lappel API** permet de générer une requête,
affichée sous ce panneau (**URL de lappel API**), et de visualiser les
données produites par cette requête dans le panneau **Résultats**. Il
permet également dajouter 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 dune 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 à laide cet onglet **API** sont au format GBFS,
qui nest pas connu de uMap. Les requêtes dexport 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 :
- lURL de base, jusquau 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 lexport 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 :
- lURL 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 lencodage du caractère **`&`** qui permet de séparer
plusieurs paramètres)
5. Nous pouvons combiner lURL 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 nafficher 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 nont
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. Jinjecte des paramètres dans la requête
uMap permet dinjecter 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
lenvoi 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**, cest-à-dire dans la *bounding_box*. Cela permet de réduire le
volume de données transférées, et de les afficher plus rapidement.
#### Jutilise la console dAPI de la plateforme open data
Longlet API du jeu de données permet daccéder à la **console dAPI
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 lidentifiant 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 linstant 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 dorigine, que lon 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
nutilisons pas ici le paramètre `{bbox}`, car lordre des valeurs ne
correspond pas à celui attendu par lAPI open data. La fonction sécrit
alors :
in_bbox(coordonnees_geo,{south},{west},{north},{east})
ce qui donne avec lencodage :
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 quil nest pas nécessaire dutiliser la forme encodée, car uMap
procédera à lencodage. LURL 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.
Dautres sites mettent à disposition des données via une API, lenjeu
est alors de sapproprier la syntaxe des requêtes en lisant la
documentation et testant les requêtes.
??? info "Licence"
Travail initié par Antoine Riche sur [CartoCité](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).

View file

@ -1,345 +0,0 @@
!!! abstract "Ce que nous allons apprendre"
- Créer un calque utilisant des *données distantes* cest-à-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 laffichage des calques en fonction du niveau de zoom
## Procédons par étapes
Lobjectif de ce tutoriel est dexplorer les différentes manières
dafficher sur une carte uMap des données externes, ou distantes,
cest-à-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 dune 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 dune requête. Activez lassistant et
saisissez le texte suivant, qui permet dextraire 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 dexporter la requête nous devons ladapter. Lassistant 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 longlet **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 saffiche.
Ouvrez longlet **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 ladresse du lien** (avec Mozilla Firefox) :
lURL 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 longlet
**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 lURL 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 dun 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 longlet
Données sur Overpass Turbo.
Par exemple le gabarit suivant permet dafficher des infobulles comme
celle de droite.
# {name}
{capacity} emplacements
Carte bancaire : {payment:credit_cards}
{note}
### 2. Jaffiche 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 lassistant :
`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)
Lexé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 dexécuter le
requête lors de laffichage 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 longlet
**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 lorsquon 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 dafficher 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 longlet **Propriétés avancées** saisissez `capacity` dans
le champ **Propriété optionnelle à utiliser pour calculter lintensité
de la heatmap**. Enfin vous pouvez ajuster lintensité de la couleur en
modifiant la **Valeur de rayon pour la heatmap**.
La carte gagne en fluidité, mais lutilisation dune *heatmap* ne permet
pas didentifier lemplacement précis des parkings à vélos. Létape
suivante propose une solution pour résoudre cette inconvénient.
### 3. Jaffiche un calque en fonction du niveau de zoom
Lorsque les données dun calque sont ***distantes*** (cest-à-dire
**non** stockées sur le serveur uMap), il est possible de contrôler
laffichage 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 lURL 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 dun accès FTP à un serveur, cela ne pose pas de
difficulté. Si vous avez accès au *back office* dun CMS comme
Wordpress, vous pouvez probablement y déposer un fichier. Prenons
lexemple de Wordpress.
Par sécurité Wordpress ne permet pas de déposer un fichier au format
JSON. Il se fie pour cela à lextension 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 longlet **Données distantes**
5. sélectionnez le format **geojson**
6. précisez la licence qui sapplique aux données : **ODbL 1.0**
puisquil sagit de données OpenStreetMap
7. activez loption **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 :
- jusquau 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 longlet **Données
distantes** saisissez la valeur **16** dans le champ **Jusquau
zoom**
2. dupliquez le calque avec laction **Cloner** de longlet **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 longlet **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}
Limage à droite montre un extrait de la carte au niveau de zoom 16,
auquel nous avons choisi dafficher les deux calques.
### 4. Jutilise une requête dynamique
Utiliser des données extraites plutôt quune requête présente un
inconvénient : la mise à jour des données sur OpenStreetMap nest 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 quil 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 sapplique sur la seule partie visible de la
carte, définie par un rectangle (ou *bounding box*). Cette requête
sexécutera à chaque zoom ou déplacement de la carte (doù le terme
*dynamique*) et récupérera les parkings à vélos à lintérieur de ce
rectangle.
#### Simplifier la requête Overpass
!!! note
Pour faciliter lopé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 quune 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)
Lopération est délicate, et exige sang froid et concentration :
1. remplacez `{{box}}` par `{south},{west},{north},{east}` : il sagit
de 4 variables quuMap remplacera, lors de lexécution de la
requête, par les valeurs définissant lemprise de la carte.
2. exportez la requête en utilisant loption **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 lURL permettant dexé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
longlet **Données distantes**
5. activez loption **Dynamique** et définissez le zoom à partir duquel
le calque est affiché
6. selon le serveur Overpass utilisé, loption **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
Nhé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** loption **Avec proxy**, alors que le serveur
`http://overpass-api.de/` nécessite que loption soit **désactivée**.
!!! note
Nutilisez pas la variable {bbox} car elle sera
remplacée par des coordonnées dont lordre (W,S,N,E) nest pas celui
attendu par Overpass (S,W,N,E) !
Vous pouvez manipuler ci-dessous la carte produite par lensemble de ce
tutoriel. Zoomez jusquà ce que les parkings à vélos apparaissent et
déplacez la carte pour constater laspect 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, à laide de requêtes Overpass. Seule la couche montrant la
densité des stationnements sous forme de *heatmap* nécessitera de
renouveler lextraction 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 lutilisation 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 [CartoCité](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).

View file

@ -1,141 +0,0 @@
!!! 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 dun 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 nest accessible quaux 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 loutil de géocodage développé par lANCT.
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 linstance Grist de lANCT,
choisir « Geocodeur » dans la liste déroulante,
sinon choisir `Custom URL` et ajouter lURL suivante:
<https://betagouv.github.io/grist-custom-widgets-fr-admin/geocode>
Dans le panneau de droite, sélectionner les colonnes permettant de connecter
loutil à 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 ladresse quil a trouvé.
Ça permet un contrôle de plus.
Renseigner ensuite une ou plusieurs lignes de données,
en essayant davoir 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 laccè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 lURL quon va indiquer côté uMap, cest ici
(clic droit « enregistrer le lien ») :
![Interface pour copier le lien vers lexport 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 lURL 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
loption `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)

View file

@ -1,235 +0,0 @@
!!! 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
Lobjet 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 linstance uMap dOSM <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 dune carte depuis laccueil."
data-width="176"
data-height="119"
data-selector=".button.button-primary"
data-padding="5"
>Bouton de création dune carte depuis laccueil.</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 dune carte](1-browsing-a-map.md).
Plusieurs éléments visibles au-dessus et à droite de la carte sont
visibles uniquement lorsque lon crée ou modifie une carte, cest-à-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 dajouter 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 dentê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 dalerte contenant le lien dédition."
data-width="790"
data-height="226"
data-selector='umap-alert-creation [role="dialog"]'
>Message dalerte 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 nest 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 nest alors pas
nécessaire de conserver de lien secret.
#### Pour les agents publics sur linstance qui leur est dédiée
Sils 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 nest pas possible denregistrer les modifications apportées à une carte anonyme sur cette instance.
### 3. Ajouter un marqueur
Commencez par déplacer et zoomer la carte pour visualiser lendroit
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 dajout de marqueur."
data-width="46"
data-height="47"
data-selector=".leaflet-toolbar-icon.umap-draw-marker"
data-padding="5"
>Bouton dajout de marqueur.</shot-scraper>
Le curseur prend la forme dun 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
dassocier 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 dun clic sur le marqueur.
Nous verrons plus loin lutilité des calques, et comment modifier les
propriétés du marqueur : forme, couleur, pictogramme, etc.
Répétez lopération pour ajouter les marqueurs que vous jugez utiles à
votre carte.
### 4. Définir lemprise de la carte
Il est important de définir lemprise initiale de la carte, cest-à-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
lemprise, déplacez et zoomez la carte afin dafficher lemprise
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 denregistrement du zoom et du centre actuels."
data-width="46"
data-height="47"
data-selector=".leaflet-toolbar-icon.update-map-extent"
data-padding="5"
>Bouton denregistrement 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 linverse le bouton **Annuler** permet de
supprimer toutes les modifications depuis la dernière sauvegarde.
!!! note
Lenregistrement se fait sur les serveurs dOpenStreetMap dans le cas
dune utilisation duMap OSM ou ceux de lANCT 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
dadresse 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. Lopé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 [CartoCité](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).

View file

@ -1,107 +0,0 @@
!!! 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 ny a pas de carte anonyme sur
[linstance 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 dassocier 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
daccé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 dautres 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 navez aucun compte sur ces outils, cest 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
dinfos](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 dutilisateur et le mot de passe. La page suivante vous
demande dautoriser lapplication uMap à utiliser ce compte : accordez
cet accès. Vous retrouvez alors la page daccueil de uMap, sur laquelle
le lien de connexion a laissé la place à un lien **Mes cartes** vous
permettant daccéder à lensemble 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 lURL de la barre dadresse 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
lutiliser 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, lopé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 souvre, il affiche lensemble 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 dafficher 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 dune seule personne.
### 2. Créer une équipe
Une fois connecté sur linstance uMap,
cliquer sur « Mon espace », puis « Mes équipes » :
![Lien vers longlet 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)
Lorsquun nouvel utilisateur est associé à une équipe,
il voit léquipe safficher sur son tableau de bord,
il accède à toutes les cartes qui sont partagées et il peut les modifier.
!!! note
Tous les membres dune é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
dune 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)

View file

@ -1,188 +0,0 @@
!!! abstract "Ce que nous allons apprendre"
- Gérer son catalogue de cartes
- Choisir un fond de carte
- Sélectionner les options dinterface
## Procédons par étapes
### 1. Retrouver une carte
Vous souhaitez modifier une carte pour lamé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 lavons 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 saffiche 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.
Noubliez 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, lun en
mode édition lautre en mode consultation. Vous devez tout de même
**enregistrer** la carte dans longlet en mode édition avant de
l**actualiser** (par exemple avec la touche F5) dans longlet 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é à laffichage 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 lun
deux : faites votre choix et noubliez pas denregistrer 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 quun 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)
dOpenStreetMap, permet daller 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, à
lexception des images aériennes de lIGN, 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 dinterface
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** longlet **Options dinterfaces**.
Vous pouvez activer ou désactiver une dizaine doptions 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
lutilisateur
- **jamais** signifie que le bouton ne sera pas disponible
- **caché** signifie que le bouton nest accessible quaprès un clic
sur le bouton « Plus ».
Les boutons cachés ne seront bien sûr accessibles que si loption
`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 doptions."
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
dautres é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**, longlet **Options
avancées** propose deux opérations peu utilisées mais quil 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 lopé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 lopen 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 [CartoCité](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).

View file

@ -1,158 +0,0 @@
!!! abstract "Ce que nous allons apprendre"
- Changer la forme, la couleur et le pictogramme dun marqueur
- Créer et modifier une ligne
- Contrôler laffichage 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 à [lemplacement 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 nest pas très explicite pour figurer un camping.
Remédions à cela. Dans le panneau latéral visible lorsquun marqueur est
sélectionné, le menu **Propriétés de la forme** permet de modifier
lapparence 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 licône** : le choix `Par défaut` correspond au marqueur
actuel, les autres choix sont Cercle, Goutte et Épingle.
- **Image de licône** : cliquer sur `définir` pour choisir parmi une
centaine de pictogrammes. Notez que le picto nest affiché que pour
les formes dicô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 soffrent à vous :
- un clic sur le marqueur vous permet soit dafficher 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 à louest de la plage de Goulien. Traçons litiné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 dune ligne."
data-width="46"
data-height="47"
data-selector=".leaflet-toolbar-icon.umap-draw-polyline"
data-padding="5"
>Bouton de dessin dune 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
loption `Scinder la ligne`
![umap_ligne.jpg](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne.jpg)
#### Propriétés dune ligne
![umap_ligne_props.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_props.png)
Les propriétés dune
ligne permettent de définir sa couleur et dautres 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
ladapter 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 lidentification des
différents éléments de notre carte, nous pouvons leur associer une
étiquette. Longlet **Options dinteraction** permet de contrôler
laffichage dune é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 dafficher linfobulle correspondante
si lutilisateur 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 navons 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 [CartoCité](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).

View file

@ -1,221 +0,0 @@
!!! 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
## Lopen data (données ouvertes)
Outre les données produites par ma communauté OpenStreetMap, accessibles sur [GeoDataMine](https://geodatamine.fr/) et dans [lassistant dimport de données de uMap](6-one-click-data-import.md), les ressources dopen 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 denregistrements 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
Cest 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 dabord 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. Limportation se référera au titre dans les entêtes de colonnes de `lat` et `lon` au début de lentê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
Cest le format denregistrement dune carte, très utilisé par exemple pour cloner une carte sur linstance OSM et limporter sur linstance uMap pour les agents publics. uMap importe toutes les données de la carte, y compris les calques et les propriétés. Il sagit dun bon moyen de sauvegarder sa carte uMap.
❓ Voir plus loin, comment cloner une carte uMap.
Ainsi quosm et georss.
## 2. Sorienter 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 ladministrateur qui a déposé le jeu de données. Il suffit dutiliser loutil 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 daccueil.
## 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 nest pas obligatoire de télécharger lillustration, certaines cartes se contentent de placer le lien pour quelle saffiche :
### 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 saffichent 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) cest à 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 dune 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 dimporter sur [linstance 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 nimpacte pas lautre carte. Si la carte est partagée sur un site Internet, il faut veiller à **mettre à jour le lien** en cas de changement dinstance.
### 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 lintégration."
data-selector=".leaflet-control-embed"
data-width="48"
data-height="48"
data-padding="5"
>Permet de partager la carte ou den 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 dimport](../../static/tutoriels/find-data-import-umap.jpg)
Le format de limport 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 nen 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 loutil 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 darbres coupés par exemple, ajout de nouveaux). Inconvénient : la carte est une carte au temps T, on ne conserve pas lhistorique 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 lURL stable dansla ligne prévue
![Capture décran du panneau dimport (1)](../../static/tutoriels/find-data-import-panel-1.png)
![Capture décran du panneau dimport (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 lURL 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 lapparence des pointeurs pour adapter à la charte dun 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 dinteraction : 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 lexplorateur 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 saffichent utilisent `name`. Pour que le nom commun saffiche, il faut remplacer `name` par `nom_commun` à droite dans les « Propriétés avancées » (Panneau dinformation 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 saffiche seulement au survol, choisir `Caché` un peu plus bas dans « Afficher une étiquette ».
!!! note
- Pour sentraî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 lexplication au point 5 plus haut.

View file

@ -1,212 +0,0 @@
!!! 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 daide au formatage."
data-caption="Panneau daide 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 daide 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
lorsquon 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 dutiliser une syntaxe décrite
en cliquant sur le point dinterrogation visible à droite de lintitulé
**description**, reprise ci-contre.
### 1. Mettre en forme le texte dune 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 linfobulle à 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 lagrandir
### 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 dOuest nous amène à aller dans lAnse 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
larticle Wikipédia sur Morgat : <https://fr.wikipedia.org/wiki/Morgat>.
Pour
ajouter à notre infobulle **un lien vers larticle**, il suffit de
copier ladresse de la page Web, affichée dans la barre dadresse du
navigateur, et de la placer entre **double-crochets**. Linfobulle à
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 ladresse du lien** et la remplacer par un
texte. Pour cela il suffit de faire suivre ladresse dune 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)
Larticle
Wikipédia montre une belle photo de lAnse de Morgat. Les photos
visibles dans Wikipédia sont sous licence libre *[Creative
Commons](http://creativecommons.fr/)*. Cela signifie que lauteur·rice
de la photo renonce à ses droits dauteur : nous pouvons donc utiliser
cette photo. Pour cela nous devons :
1. copier l**adressse de limage** (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 dun serveur vous pouvez lutiliser stocker vos photos.
#### Modifier la taille dune image
La taille de la photo est
restreinte par la taille de linfobulle. Pour **agrandir une image**
vous devez utiliser une infobulle plus grande. Pour cela ouvrez longlet
`Options dinteraction`, 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 linverse vous pouvez **réduire la taille dune image**, en faisant
suivre le lien vers la photo dune barre verticale et dun nombre qui
définit la **largeur en pixels** de limage, par exemple :
{{https://framapic.org/xxx/yyy.jpg|400}}
#### Associer une image à un lien vers une page Web
Il est possible dintégrer une image qui ouvre une page Web lorsque
lutilisateur 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
dun 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
linté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 longlet **Intégrer** visible *sous* la vidéo
2. copiez ladresse après `src=` (sans les guillemets), notez quelle
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 linfobulle :
{{{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 [CartoCité](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).

View file

@ -1,185 +0,0 @@
!!! abstract "Ce que nous allons apprendre"
- Créer des calques et organiser le contenu de la carte
- Définir les propriétés dun calque
- Gérer les calques dune 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 à lutilisateur de zoomer sur lensemble
des éléments dun calque, de le masquer ou lafficher à loisir. Chaque
calque peut être décrit dans le panneau latéral de la carte. Organiser
les éléments dune 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 dun élément déjà créé.
Nhésitez donc pas, lorsque votre carte senrichit, à *restructurer* son
contenu en plusieurs couches.
#### Comment définir les calques dune carte ?
Il ny 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 lexpérience du
cartographe. Voici, pour quelques thématiques de cartes et à titre
dexemples, une proposition de listes de calques :
- tourisme : hébergement, restauration, transports, musées, points de
vue…
- logistique dun 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 dun réseau : structures porteuses, adhérentes au réseau,
partenaires
- projet daménagement : les différents scénarios ou variantes du
projet
Nous verrons plus loin que lorsquune 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 dune 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 lexemple dune carte de la logistique dun 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 dun calque
Un intérêt majeur de lutilisation 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 quune seule fois pour lensemble 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
sappliquent 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 sapplique à 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 lexemple 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. Lordre ainsi défini est celui que lon 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
lutilité d**Éditer dans un tableau** le contenu du calque. **Supprimer
le calque** vous demandera de confirmer lopération, cette opération
supprimant le contenu du calque.
![](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_advanced.png)
Enfin, longlet **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 dun calque existant, vous pouvez cloner le
calque initial puis renommer le clone et vider son contenu.
## Faisons le point
Sil 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 à lutilisation 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
dapprendre à publier une carte sur un site internet, cest lobjet du
[prochain tutoriel](7-publishing-and-permissions.md).
??? info "Licence"
Travail initié par Antoine Riche sur [CartoCité](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).

View file

@ -1,99 +0,0 @@
!!! abstract "Ce que nous allons apprendre"
- Importer le contour dune commune
- Importer les contours des départements ou des régions
- Importer un point dintérêt (bibliothèques, parkings, …) qui est enregistré sur OpenStreetMap
## Procédons par étapes
Il est conseillé de vérifier si les données nexistent pas avant de se lancer dans leur dessin. On peut gagner un temps précieux avec lassistant dimportation intégré dans uMap et conserver une carte qui nest pas trop lourde au chargement.
Voilà les deux actions à effectuer une fois une carte préexistante, ou une nouvelle carte vierge ouverte :
- Cliquez sur loutil dimport de données dans la barre de droite puis sélectionnez les données déjà prêtes à lemploi
- Cliquez sur « Importer » et le cas échéant enjolivez la carte, car des figurés par défaut sont utilisés
uMap permet dutiliser 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. Dores et déjà, vous pouvez utiliser lassistant dimportation pour récupérer en un clic des contours administratifs et des points dintérêt.
### Ressources disponibles (20/09/2024)
Au 20 septembre 2024, les imports suivants sont disponibles :
- contour dune commune
- contours des départements et des régions
- données issues dOpenStreetMap placées dans [GeoDataMine](https://geodatamine.fr/). Comme son nom lindique, 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 lassistant, consulter les tutos plus avancés et la [page wiki](https://wiki.openstreetmap.org/wiki/Overpass_turbo/Wizard)
!!! note
Il manque des données ? Nhésitez pas à contribuer pour les ajouter et vous en serez les premiers bénéficiaires !
### Cliquez sur loutil dimport des données
Voici un bref passage en revu des différents imports proposés et pour finir limport de la localisation des bibliothèques de Clermont- Ferrand :
![Gif animé montrant lusage de lassistant dimport](../../static/tutoriels/importer.gif)
## 1. Importer le contour dune commune
Cliquez sur loutil dimportation en bas de la barre de droite, puis cliquez sur le lien « Assistants dimport ».
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é nest pas le code postal mais le code INSEE de la commune.
Voici le résultat avec la commune dArles (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 dArles 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 dune étiquette.
## 2. Importer les contours des départements ou des régions
Cliquez sur loutil dimportation en bas de la barre de droite, puis cliquez sur le lien « Assistants dimport ».
Cliquez sur « Contours nationaux » puis soit départements, soit régions et enfin le type de calque (voir supra lexplication). 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 dintérêt issu de GeoDataMine
Cliquez sur loutil dimportation en bas de la barre de droite, puis cliquez sur le lien « Assistants dimport ».
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 deau potable de la CA du Grand Avignon, puis « Copier dans un calque »
![Une carte avec les points deau potable issus dOpenStreetMap](../../static/tutoriels/importer-geodatamine.png)
Voici une réelle économie de temps plutôt que de placer pointeur après pointeur tous les points deau.
## 4. La carte combinée
Bien entendu, on peut tout à fait combiner les différentes couches dinformation et présenter par exemple la carte des Points deau potable dans la CA du Grand Avignon, avec les contours des communes qui composent lEPCI, du département et de la région :
### Points deau 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 ».

View file

@ -1,249 +0,0 @@
!!! 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 lintégration."
data-selector=".leaflet-control-embed"
data-width="48"
data-height="48"
data-padding="5"
>Permet de partager la carte ou den exporter les données.</shot-scraper>
Une **iframe** est une balise du langage informatique HTML qui permet
dintégrer (embarquer) le contenu dune page Web dans une autre page
Web. Cest 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 liframe dune
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 CartoCité :-)</p>
</div>
</body>
</html>
Voici la carte intégrée sur cette page, en utilisant les options
dexport 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 CartoCité :-)</p>
</div>
Bien entendu cela suppose de connaître un peu HTML et de disposer dun
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 liframe* 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/> nautorisent pas linclusion diframe.
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 nest 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.
Longlet **Options dexport de liframe** permet de contrôler tout cela.
Certaines de ces options correspondent aux **Options dinterface** vu
dans le tutoriel
[Personnaliser sa carte](4-customize-map.md). Il suffit
dactiver ces options pour que le *code dimport de liframe* 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 à lexport par iframe et méritent
dêtre commentées :
- la **largeur** de 100% permet dutiliser 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 à lutilisateur dafficher la
carte uMap telle nous lavons vue jusquici.
- loption **Vue courante plutôt que vue par défaut** permet
dappliquer le position et le niveau de zoom actuel de la carte à
lexport. Cette option est par exemple intéressante pour produire
plusieurs zooms dune même carte.
- loption **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
dutilisateurs.
- **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
dexport. Vous devez désactiver puis réactiver loption 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 ladresse est
`http://umap.openstreetmap.fr/fr/user/<votre-compte>/` : loption **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 napparaî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 laccès. Nutilisez 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 dautres utilisateurs à la modifier en sélectionnant
loption **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.
Loption **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 lopération
**Enregistrer** risque décraser les modifications dun autre
utilisateur, vous devez alors choisir entre ses modifications (en
validant Enregistrer) ou les vôtres (en annulant).
Si vous êtes plusieurs éditeurs dune même carte, concertez-vous avant
de modifier la carte.
Enfin vous pouvez **tranférer la propriété** dune 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 lutilisateur à 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 linté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 douverture 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 [CartoCité](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).

View file

@ -1,227 +0,0 @@
!!! 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 dOpenStreetMap
- Importer des données dans une carte
!!! question
Pourquoi traiter les polygones à part, il ne sagit que dune ligne
fermée ? Un polygone est en réalité bien plus quun 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 à linté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 dun polygone
point par point, et de le terminer en cliquant à nouveau sur le dernier
point comme pour le tracé dune ligne. Une différence toutefois : dès le
troisième point lintérieur du polygone est coloré.
#### Propriétés dun polygone
![proprietes_polygones.png](../../static/tutoriels/8-le-cas-des-polygones/proprietes_polygones.png)
La liste des
propriétés dun polygone est assez longue. Les propriétés de la moitié
supérieure du menu sappliquent au périmètre du polygone, et sont
identiques aux propriétés sappliquant 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 linté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 dun é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 loption **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 dun polygone sappliquent à tous
les périmètres - extérieurs et intérieurs.
### 2. Définir les interactions avec un polygone
Longlet **Options dinteraction** 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
loption **Autoriser les interactions**. Aucune infobulle nest alors
affichée lors dun clic sur le polygone. Cette option est intéressante
pour donner de limportance à une zone de la carte sans que
lutilisateur ne puisse interagir avec.
![ile-de-nantes.jpg](../../static/tutoriels/8-le-cas-des-polygones/ile-de-nantes.jpg)
Voici un exemple montrant
lIle de Nantes entourée dun large trait rouge et sans remplissage. Il
nest possible de cliquer ni sur le contour ni à lintérieur du
polygone.
!!! note
Linteraction 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)
À linverse, il est
possible dassocier à 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 lURL. il existe trois options permettant de définir ***où***
sera ouverte la page Web :
- **nouvelle fenêtre** : la page souvre dans un nouvel onglet du
navigateur
- **fenêtre parente** : la page souvre 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 à lintérieur de liframe
### 3. Réaliser un menu cartographique
Associer un URL à un polygone permet de créer un *menu cartographique*,
cest-à-dire une carte permettant daccéder à plusieurs pages Web selon
la zone sur laquelle clique lutilisateur. 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
dOpenStreetMap (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 dexport 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
lextension 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 dimport de données."
data-width="46"
data-height="47"
data-selector=".leaflet-toolbar-icon.upload-data"
data-padding="5"
>Bouton dimport 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 nest pas le cas, par exemple parce que
lextension du fichier nest pas `.geojson`. Cliquez sur **Importer** :
les contours apparaissent sur la carte.
#### c. Configurer la carte uMap
Configurez le calque afin dafficher une étiquette - au survol ou pas
selon votre choix. Ensuite éditez chaque polygone pour lui associer
lURL vers la page Web correspondante, comme nous lavons vu plus haut.
Enfin vous pouvez, dans les **Paramètres de la carte**, définir les
**Limites géographiques** de la carte. Cela permet dempêcher
lutilisateur 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 liframe, comme nous lavons vu dans le
[tutoriel précédent](7-publishing-and-permissions.md),
en prenant soin de désactiver toutes les options dinteraction :
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 liframe 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 dune 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 daller bien plus loin dans cette
démarche.
??? info "Licence"
Travail initié par Antoine Riche sur [CartoCité](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).

View file

@ -1,62 +0,0 @@
!!! abstract "Ce que nous allons apprendre"
- Vérifier le formats du fichier
- Importer le fichier dans uMap
- Régler lapparences 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 nest 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 ». Loutil en ligne ajoute les coordonnées géographiques des adresses.
### 2. Importer le fichier dans uMap
Cliquer sur loutil dimportation 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 dimport de données."
data-width="46"
data-height="47"
data-selector=".leaflet-toolbar-icon.upload-data"
data-padding="5"
>Bouton dimport 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 loutil « 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/).

View file

@ -1,315 +0,0 @@
!!! 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
Lobjectif 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
Lenjeu 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 nest 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
dadresses géocodées, parmi lesquelles il recherche ladresse à
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 dadresse (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 dESTUAIRE | 1 Cours dArmor | 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 |
Lutilisation de majuscules ou minuscules na en général pas
dincidence. Le tableau peut bien sûr contenir dautres 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 dautre
- 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 dautres 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 dadresses utilisée contient des adresses erronées ou nest
pas à jour
- lalgorithme chargé de comparer votre adresse à celles de la base de
données fait de mauvaises hypothèses
Aucun géocodeur nest 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
dadresses 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 dun
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 : limportant est que ce **séparateur** ne soit pas
utilisé à lintérieur dune valeur. Le point-virgule est souvent utilisé
comme séparateur pour créer un fichier CSV.
Pour géocoder les adresses dun 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 loption
vous est proposée. Voici par exemple le panneau dexport 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 à ladresse, au code postal et à la commune
3. vérifier le résultat du géocodage, lajuster 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 longlet **Encodage**, de sélectionner **Unicode (UTF-8)**.
Malheureusement cela **ne fonctionne pas pour MS Excel 2016 ni Office
365/Excel**, il sagit dun [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 dutiliser léditeur
[Notepad++](https://notepad-plus-plus.org/) que vous devez installer. Ne
pas changer lencodage lors de lexport CSV, puis ouvrir le fichier dans
Notepad++, convertir en UTF-8 dans le menu **Encodage**, enfin
enregistrer le fichier.
### 3. Jimporte 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 dimport de données."
data-width="46"
data-height="47"
data-selector=".leaflet-toolbar-icon.upload-data"
data-padding="5"
>Bouton dimport 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 nayant 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 lopé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
dimport. 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. Jinsè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 :
linfobulle affiche le nom du calque (en loccurence le nom du fichier
importé si vous ne lavez 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 longlet 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, cest-à-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 dun tableau à deux
colonnes : lintitulé et la valeur correspondante.
Dans longlet **Options dinteraction** 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 nest
pas particulièrement joli avec ses libellés en majuscules.
Dans le tutoriel [5-multimedia-tooltips.md) nous avons vu
comment formater le contenu dune infobulle. Nous pouvons utiliser la
même syntaxe pour définir le contenu de **toutes les infobulles dun
calque**, en y intégrant le contenu des cellules du tableau.
Dans longlet **Options dinteraction** 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
dune cellule dans linfobulle, il suffit dajouter 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 lutiliser 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 dinté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) quil
est possible de voir lensemble des données de la carte sous la forme
dune liste. Cette liste peut aussi filtrée par lutilisateur, à partir
dun 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 sappliquer. Cela seffectue dans
longlet **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
sappliquera à chacun des champs.
Notez que vous pouvez également trier la liste en sélectionnant la **Clé
de tri**, cest-à-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 nest pas définie pour le
calque.
!!! note
Les clés de tri et de filtre sappliquent à lensemble
des données, tous calques confondus. Si votre carte est constituée de
plusieurs calques, il est donc conseillé dutiliser le même nom de clé
pour désigner le même type dinformation. Évitez par exemple dutiliser
**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 [CartoCité](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).

View file

@ -1,61 +0,0 @@
# 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 dexpérience sur lutilisation duMap à la Chambre dagriculture des Pays de la Loire
<iframe title="Retour dexpérience sur lutilisation duMap à la Chambre dagriculture 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 dautres vidéos ?](https://github.com/umap-project/umap/issues/new/choose){ .md-button }

View file

@ -1,22 +0,0 @@
# 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)

View file

@ -1,5 +0,0 @@
# 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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 154 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.8 KiB

Some files were not shown because too many files have changed in this diff Show more