Rechercher dans le blog

Un mardi, une appli #17 Lieux de tests de dépistage de la Covid-19 à Paris

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.

Aucun commentaire:

Publier un commentaire