Aller au contenu
  • billets
    30
  • commentaire
    1
  • vues
    592

SIG et FileMaker

FileMaker, Inc

53 vues

Cette article est une version traduite de l’article d’origine publié par LuminFire, membre Platinum de FileMaker Business Alliance.

Notre premier article Mapping and More expliquait ce que sont les systèmes d’information géographique (SIG) et quels pouvaient être les multiples avantages de l’utilisation de SIG dans FileMaker. Il convient maintenant de s’intéresser à comment les utiliser. Dans cet article-ci, nous allons aborder les bases de la création de cartes dans vos applications FileMaker, depuis les options intégrées sans code, jusqu’aux cartes interactives de Leaflet qui requièrent seulement un peu de HTML, CSS et JS.

Si vous êtes novice en matière de programmation Web et que ces acronymes vous font grincer des dents, ne vous inquiétez pas, nous fournissons un fichier de démonstration avec le code dont vous avez besoin pour commencer. Le fichier de démonstration est configuré de telle sorte que vous pouvez expérimenter la création de cartes et autres technologies de navigateur Web dans FileMaker. Pour l’instant, lançons-nous en supposant que vous avez une base de données qui stocke des informations liées à des adresses d’une manière ou d’une autre, et que vous voulez une carte interactive.

Vous avez besoin d’une carte dans FileMaker, par où commencez-vous ?

Si vous avez déjà ajouté un navigateur Web à une solution, vous savez que la boîte de dialogue de configuration vous permet de créer un certain nombre d’adresses Web différentes, y compris Google Maps et MapQuest. Choisissez simplement les champs (ou entrez le texte statique) pour chaque paramètre requis et FileMaker calcule l’URL appropriée.

1*Wz1yWxVHnJkOropEYZyjeQ.png

Lorsque vous accédez à la mise en page, FileMaker ouvre la page Web spécifiée par l’URL calculée dans le navibateur Web. Ceci est de loin l’approche la plus facile, toutefois elle est souvent accompagnée de problèmes, et nous constatons que cela ne fonctionne presque jamais pour nos clients. Pour ceux qui débutent, comme vous chargez une page Web tierce dans votre solution, vous n’avez aucun contrôle sur son apparence. Pour ne rien arranger, l’utilisation d’un petit navigateur Web ne va souvent pas de pair avec des pages optimisées pour mobiles, même si elles existent, et les résultats sont souvent inutilisables. Voici une comparaison du même emplacement mappé à l’aide de MapQuest et de Google Maps calculés par FileMaker. Comme vous pouvez le constater, les éléments de la page — comme la barre de recherche, le résultat, le menu, la barre de défilement, le ‘Sign in’ etc .— submergent complètement la carte, la rendant presque inutile car sans possibilité d’interaction ou élargissement de votre navigateur Web. C’est là que Leaflet vient à la rescousse — Cf. les deux cartes ci-dessous. Ces cartes Leaflet nécessitent des coordonnées (c’est-à-dire latitude et longitude) et environ 5 lignes de JavaScript, mais l’avantage est clair, en particulier lorsque l’espace sur écran est limité. (NB : nous allons discuter du processus de conversion d’adresses en coordonnées, connu sous le nom de géocodage, dans le prochain article de cette série.) La carte de gauche utilise des images satellite à haute résolution de HERE.com (qui offre un niveau gratuit mais avec des limites d’utilisation relativement élevées) tandis que celle de droite utilise l’OpenStreetmap, qui est complètement gratuit.

1*jw2nFBC4blLWFFEVZmvhUA.jpeg

Google Maps et Mapquest offrent toutes deux des API permettant aux développeurs de créer des cartes et d’avoir plus de contrôle sur leur interface. Le problème avec cette approche est que vous devez être vous-même développeur professionnel, en faire appel à un, acheter un outil tiers ou passer beaucoup de temps à apprendre comment fonctionnent ces API et les technologies nécessaires pour les utiliser. De plus, vous devez vous conformer à leurs conditions de service et, à moins que vos besoins soient très simples, par exemple pour une utilisation à faible volume et très public, vous aurez probablement besoin de payer pour ces services. Pour en savoir plus sur ce sujet, nous vous invitons à visiter les sites Internet suivants :

Il est à noter qu’il existe des produits spécifiques à FileMaker qui facilitent le travail avec l’API Google Maps. Si vous souhaitez obtenir une carte qui ressemblerait à celle de Google Maps, et que vous pouvez vous permettre d’utiliser l’API Google et de vous conformer à leurs conditions d’utilisation, alors l’un de ces produits pourrait vous convenir:

  • ProMaps by Seedcode —Un produit commercial qui permet d’ajouter une carte Google Maps personnalisable, avec marqueurs, à vos mises en page FileMaker Pro.
  • FMEasyMaps by Tim Dietrich — Une solution open source pour générer des cartes interactives basées sur les adresses dans les bases de données FileMaker.

Maintenant, passons à la démo !

1*k_zLlPeirIBlkYFl2Gyp2g.jpeg

Ce fichier de démo (téléchargement ci-dessous) est basé sur jsFiddle.net, populaire auprès des développeurs Web front-end, créé et entretenu par Piotr et Oskar. Notre version de FileMaker rend l’expérimentation HTML, CSS et JavaScript dans FileMaker incroyablement facile. Il vous suffit de créer un nouvel enregistrement, d’entrer quelques lignes de code, de valider l’enregistrement et d’examiner les résultats dans un navigateur Web ainsi que la source dans un champ de calcul. Il gère facilement l’ajout de bibliothèques CSS et JavaScript externes pour vous comme Leaflet ou JQuery, et vous permet d’ouvrir le résultat dans un navigateur Web pour le débogage.

fmFiddle.fmp12 est complètement déverrouillé et la première chose que nous vous conseillons de faire est d’entrer dans le mode de mise en page afin que vous puissiez voir comment ‘l’adresse Web’ du navigateur Web est configurée. Ce que vous trouverez est qu’au lieu de construire une URL, il construit tout le code source nécessaire pour une page Web complète. Le HTML que vous voyez est un squelette de base de page Web. La fonction List () est simplement utilisée pour gérer les fins de ligne (c’est-à-dire & “¶” &).

1*KYzXkLgdQ2gW3fbE6OUOoA.jpeg

La démo contient 4 exemples :

1. Getting Started with HTML : Ce fiddle fournit un aperçu des tags les plus couramment utilisés en HTML. Si vous êtes novice en HTML, c’est une excellente référence.

2. Getting Started with Interactive Webviewers : Ce fiddle révèle une manière de communiquer avec FileMaker depuis un navigateur Web, ainsi que des méthodes de débogage utiles. Il y a 3 lignes de JavaScript, qu’il convient d’expliquer :

  • console.log () est une méthode JavaScript très utile pour le débogage. Pour en savoir plus sur l’utilisation de console.log sur Mac, consultez le site blog.beezwax.net/2015/07/20/enable-debugger-for-a-filemaker-web-viewer/
    et Safari_Developer_Guide / Debugger
  • alert () est une méthode qui affiche une boîte de dialogue d’alerte avec un message spécifié et un bouton OK qui n’est pas différent du ‘Show Custom Dialog’ de FileMaker.
  • onclick=”window.location = ‘fmp://$/fmFiddle?script=Navigate&param=Next’”
    Cette ligne de JavaScript, qui appelle un script FileMaker appelé Navigate, est écrite inline. La pratique du JavaScript inline n’est généralement pas recommandée lors de la création de sites Internet/applications plus importants, car cela rend le débogage difficile, mais pour les navigateurs Web simples dans FileMaker, cela fonctionne bien et peut-être la solution qui présente le moins de difficultés. Activez le Script Debugger et essayez de cliquer sur le bouton.

3. Leaflet Map from Unconference Demo : Nous avons promis de partager des exemples que nous avions présentés lors de notre Unconference. Voici le premier. Ceci est la carte leaflet que nous utilisons dans notre Real Estate et applications similaires pour la cartographie d’un emplacement sur l’imagerie satellite à haute résolution. Il y a beaucoup d’options pour les cartes de base — assurez-vous d’en lire plus à ce sujet dans notre article Basics of Basemaps. Dans cette démo, les coordonnées sont hard coded dans JavaScript, mais vous pouvez facilement les indiquer dynamiquement à partir des champs de votre solution en utilisant Substitute ou un calcul ou l’une des méthodes décrites dans fmAjax par Beezwax. Nous publierons davantage d’exemples de ces techniques dans de futurs articles.

4. Leaflet Map Quickstart Example : Si vous êtes nouveau dans Leaflet, suivez ce tutoriel de démarrage rapide, l’exemple de travail utilisé est fourni dans ce fiddle avec 2 compléments :

  • Un lien hypertexte FMP url placé dans une icône de carte contextuelle qui appelle un script FileMaker.
  • Un fond de carte Openstreetmap totalement gratuit à utiliser sans clé d’accès. Encore une fois, pour plus d’informations sur les cartes de base, consultez cet article.

Si vous créez des cartes interactives dans FileMaker, nous vous invitons à prendre connaissance de notre série d’articles Anatomy of a Web Map qui résume toutes les infos des Webmaps et discute de vos options pour les SIG et WordPress aussi! Comme promis, vous pouvez bientôt vous attendre à plus de techniques et de démos dans les prochains articles de la série, y compris le géocodage, les requêtes spatiales, les cartes avancées, et plus encore. Inscrivez-vous sur luminfire.com/gis si vous souhaitez être averti à chaque nouvelle publication. Vos commentaires et vos questions sont les bienvenus et, comme toujours, si vous avez besoin d’aide pour créer un SIG dans votre application personnalisée, n’hésitez pas à nous contacter.

Télécharger fmFiddle

Retrouvez l’article source, en anglais, à cette adresse.

stat?event=post.clientViewed&referrerSource=full_rss&postId=352935089e6a

SIG et FileMaker was originally published in FileMaker Fr on Medium, where people are continuing the conversation by highlighting and responding to this story.


Afficher la totalité du billet



0 Commentaire


Commentaires recommandés

Il n’y a aucun commentaire à afficher.

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant
×