Workshop webmapping avec here ap is.pptx

WORKSHOP
WEBMAPPING
AZYAT ABDELILAH
HERE Maps API for
JavaScript
FSTT 2019/2020

PLAN
• Introduction
• Objectifs
• Architecture d’un système webmapping
• HTML : introduction et composants
• Editeur Web
• Langage CSS
• JavaScript
• Environnements de développement
• Here Maps API for Javascript
• Créer une carte interactive

INTRODUCTION
✔Le webmapping est la diffusion de données
cartographiques par le biais d'un site web.
✔L'accès à l'information doit être dynamique ce qui
signifie que ce qui s'affiche doit être le résultat d'un
traitement demandé par l’utilisateur.

OBJECTIFS
• Comprendre l’architecture d’une application
webmapping,
• Savoir choisir un environnement et les outils de
développement,
Architecture et
environnement
• Identifier les fonctionnalités HERE Maps API for
JavaScript,
• Savoir les different module de Maps API for
JavaScript,
Fonctionnalités
et modules
• Apprendre à créer et à gérer un projet
• S’initier et prendre en main la creation des
cartes dynamiques.
Projet et
pratique

ARCHITECTURE D’UN SYSTÈME DE
WEBMAPPING
https://www.e-education.psu.edu/geog585/node/684

HTML
•HyperText Markup Language (HTML) utilisé pour structurer une
page web et son contenu.
•Par exemple, le contenu pourra être structuré en
– un ensemble de paragraphes,
– une liste à puces
– des images
– et des tableaux de données.

STRUCTURE DE BASE D'UN DOCUMENT HTML

ELÉMENTS DE BASE D’UN DOCUMENT HTML
Elément Description
<html> représente la racine d'un document HTML ou XHTML.
<head> fournit des informations générales (métadonnées) sur le document, incluant son
titre et des liens ou des définitions vers des scripts et feuilles de style.
<title>
définit le titre du document (qui est affiché dans la barre de titre du navigateur ou dans
l'onglet de la page)
<link> définit la relation entre le document courant et une ressource externe
<style>
contient des informations de mise en forme pour un document ou une partie d'un
document.
<body> représente le contenu principal du document HTML.
<h1>, <h2>, <h3>,
<h4>, <h5>, <h6>
représentent six niveaux de titres dans un document, <h1> est le plus important
et <h6> est le moins important.
<div> conteneur générique qui permet d'organiser le contenu sans représenter rien de
particulier.
<p> représente un paragraphe de texte

JAVASCRIPT
•JavaScript est utilisé principalement pour améliorer l'interaction
d'un utilisateur avec la page Web.
•Il est un langage interactif qui pourrait être appliqué au document
HTML

LANGAGE CSS
✔Les feuilles de style en cascade permettent de décrire le style d'un
document HTML.
✔CSS décrit comment les éléments HTML doivent être affichés tels
que:
✔ styles de texte, couleur du texte, tailles des tableaux et autres aspects des
pages Web qui ne pouvait être défini que dans le code HTML d'une page.
✔CSS permet de séparer le contenu de la présentation.

ENVIRONNEMENTS DE DÉVELOPPEMENT
• Editeur de Text:
faciliter la préparation et la modification de documents HTML
Éditeur Système d'exploitation
Atom Windows, Mac, Linux
Brackets Windows, Mac, Linux
Sublime Text Windows, Mac, Linux
Notepad++
…
Windows
…

SERVEUR WEB
Localhost: Wampserver64

DOSSIER DE TRAVAIL
• Créer un sous-dossier
dans le dossier www, par
exemple: mymap

EN CLOUD
jsfiddle

INSTALLER UN EDITEUR HTML
• Lien de téléchargement: https://www.sublimetext.com/
• Dans la page Download, clickez sur la version Windows…
• Lancer l’installation,
Sublime Text

CRÉER UN PROJET
•Créer un nouveau dossier (par exemple:
mymap),
•Dans le même dossier créer les fichiers suivants:
–demo.html,
–demo.js,
–demo.css.

HERE MAPS API FOR JAVASCRIPT
✔ Outils pour créer des applications webmapping riches et
interactives.
✔ Ensemble de classes et librairies avec lesquelles on peut
implémenter des applications ayant des fonctionnalités
interactives.

MAPS API FOR JAVASCRIPT (1)
HERE Maps
map data • access to map data and map images, with a choice of view modes
• customization,
• main map types: map, terrain and hybrid.
Geocoding • full access to geocoding and reverse geocoding services
Routing
• supporting route calculation and display,
• customization options such as public transport routing and others.
https://developer.here.com/cn/documentation/maps/hls-chn/topics/overview.htmlSource:
Main features of the HERE Maps API for JavaScript

Main features of the HERE Maps API for JavaScript
Mouse and
touch
interaction
• supporting mouse and touch interaction with the map, including pan,
zoom
Pre-built UI
controls
• pre-built, customizable UI controls
• to change the base map, zoom, and display the current map scale.
• info bubbles with arbitrary HTML content and SVG images can be
placed on the map.

Modules
core
(mapsjs-cor
e.js)
• core
functionality
for
rendering
maps
• map layers
and map
objects
service
(mapsjs-servic
e.js)
• Module
supports map
tile retrieval,
• routing,
geocoding,
mapevents
(mapsjs-mape
vents.js)
• Enabling
user-interaction
with the map
• Normalizing
various browser
event systems
(mouse events,
touch events,
pointer events)
ui
(mapsjs-ui.js +
mapsjs-ui.css)
set of
pre-built
cross-browse
r UI
components
map settings,
zoom control,
map scale
clustering
(mapsjs-cluste
ring.js)
for marker
clustering.
data
(mapsjs-data.js
)
provides set
of classes for
display of
KML and
GeoJSON
data
https://developer.here.com/cn/documentation/maps/hls-chn/topics/overview.htmlSource:

CREATING WEB MAP STEPS
• S’enregistrer dans le site here.com 🡪 Developers
• Ensuite créer un projet pour avoir API key
1
2

3
Remplir
tous les
champs et
valider

4
Après
l’enregistrement,
Cliquer sur créer
projet

AFFICHER CARTE STATIQUE
•Exercice 1:
Créer une page web qui permet d’afficher une carte statique
en localisant la région de Tanger,

• Démarche
1. Chargez les bibliothèques de codes de l'API Maps.
2. Initialisez la communication avec les services principaux HERE (pour
demander des tuiles d'image de carte).
3. Initialisez un objet de H.Map, en spécifiant:
• le conteneur de carte,
• le type de carte à utiliser,
• le niveau de zoom pour afficher la carte
• les coordonnées géographiques du point sur lequel la carte est centrée.

1
2
3
https://developer.here.com/documentation/maps/dev_guide/topics/get-started.html

CRÉER UNE CARTE DYNAMIQUE (1)
•Exercice 2:
–Créer une page web contenant une carte interactive, c.à.d.,
qui possède des possibilités d’afficher l’échelle, de faire un
zoom, de choisir une couche vecteur parmi d’autres…
– Se positionner sur l’aéroport de Tanger,

• Résultat à obtenir

• Mettre ce code dans le fichier demo.html

• Mettre ce code dans le fichier demo.js
https://developer.here.com/documentation/maps/api_reference/H.mapevents.MapEvents.html

AJOUTER UN RECTANGLE
• https://developer.here.com/documentation/maps/api_reference/H.geo.Rect.html

AJOUTER INFOBUBBLE (INFOBULLE)
•Exercice 3:
–Créer une carte interactive, avec affichage de deux markers,
lorsqu’on click sur le premier, il doit afficher une infobulle
(pop-up) ENSA de Tanger, le 2éme affiche FST de Tanger.

CONVERTIR DES POINTS EN LIGNE
•Exercice 4:
–Supposons qu’on a un certain nombre de points et on veut
les tracer sous forme d’une drooite.

Workshop webmapping avec here ap is.pptx

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Workshop webmapping avec here ap is.pptx

Similaire à Workshop webmapping avec here ap is.pptx (20)

Workshop webmapping avec here ap is.pptx