Bonjour, aujourd'hui je vous présente une
application
de la ville de Paris pour visualiser les lieux de tests de dépistages dans Paris. En effet avec la crise sanitaire actuelle, et le réveillon du 31
qui approche à grand pas, il peut être utile de s'assurer que nous ne sommes
pas infectés pour éviter d'infecter tous les proches ou amis avec qui nous
pensons fêter la fin de cette année particulière.
Pour en savoir plus n'hésitez pas à consulter leur
site.
I/ L'application
L'application présente une Webmap issue d'un portail centrée et
zoomée sur Paris sur laquelle nous pouvons visualiser les centres de
santé, de dépistage, les pharmacies et les laboratoires à
Paris. Chaque type d'établissement est représenté par une icône
spécifique.
Une barre de recherche est présente pour rechercher une adresse.
II/ L'aspect technique
Une Webmap est chargée et dans le code et la rotation a été désactivée.
var view = new MapView({
map: webmap,
constraints: {
rotationEnabled: false
}, // ROTATION
container: "viewDiv"
});
En quelques lignes, quelques widgets ont été ajoutés comme
Search,
Locate,
Home,
BasemapToggle (pour switcher entre des basemaps, ici la satellite et OSM),
Legend.
L'API JavaScript ArcGIS permet de créer des applications responsive. Vous
pouvez définir le comportement de l'application selon la taille de l'écran
sur lequel est visualisée l'application Web.
Sur un grand écran comme un écran d'ordinateur la légende est affichée
directement. Mais sur un plus petit appareil comme un téléphone, la place
est limitée par conséquent la légende est rétrécie et c'est l'utilisateur
qui choisit de la montrer ou non.
La méthode
watch() permet d'appeler une fonction lorsqu'une propriété est
affectée, ici la propriété widthBreakpoint indiquant la taille générale de la largeur de la vue.
Donc dès que la propriété change alors on entre dans la fonction et on vérifie dans quel "case" on se trouve ce qui fera un appel à la fonction updateView pour savoir si l'on ajoute ou non la légende. Ainsi sur les téléphones, on est dans le case "xsmall" donc on n'affiche pas la légende. Vous retrouverez dans la propriété widthBreakpoint quel cas correspond à quelle largeur d'écrans en termes de pixels.
// Load
isResponsiveSize = view.widthBreakpoint === "xsmall"; updateView(isResponsiveSize); // Breakpoints
view.watch("widthBreakpoint", function (breakpoint) { switch
(breakpoint) { case
"xsmall": updateView(true); break; case
"small": case
"medium": case
"large": case
"xlarge": updateView(false); break; default: } }); function
updateView(isMobile) { setLegendMobile(isMobile); } function
setLegendMobile(isMobile) { var
toAdd = isMobile ? mobilelegend : legend; var
toRemove = isMobile ? legend : mobilelegend; view.ui.remove(toRemove);
view.ui.add(toAdd, "bottom-left"); }
Je vous souhaite de très bonnes fêtes de fin d'année et à bientôt
!
Vous pouvez vous abonner à ce blog pour lire d'autres articles sur le développement Web
d'applications cartographiques et découvrir comment notre API est une
superbe alternative à Google Maps !
Vous voulez vous aussi réaliser des applications Web cartographiques et dynamiques ? N'hésitez pas à souscrire à un plan gratuit ArcGIS for Developers pour développer vos propres applications cartographiques 2D ou 3D ! Cet article résume ce que vous obtiendrez. Et pour en savoir sur l'API c'est ici.
Vous voulez vous aussi réaliser des applications Web cartographiques et dynamiques ? N'hésitez pas à souscrire à un plan gratuit ArcGIS for Developers pour développer vos propres applications cartographiques 2D ou 3D ! Cet article résume ce que vous obtiendrez. Et pour en savoir sur l'API c'est ici.
Aucun commentaire:
Enregistrer un commentaire