Vous aimez les cartes, essayez le Leaflet Maps Plugin


#1

Bonjour,

un mot pour évoquer un travail que j’ai en cours depuis un moment. J’ai pu avancer ces derniers temps et suis assez content de vous proposer la version 0.7 du Leaflet Maps Plugin.

Si vous avez toujours rêvé de cartographier vos tiddlers, le rêve peut devenir réalité…

A découvrir, récupérer et tester sur la page de démonstration. Je sais qu’on est sur TiddlyWikiFr, mais pour l’instant, tout est en anglais désolé…

Pour les plus bricoleurs, le code souce est sur framagit. La version la plus à jour (et parfois buguée :wink: est toujours sur la branche leaflet, préférez le site de démonstration ou la branche master si vous n’êtes pas des aventuriers.

Il est aussi possible de faire des propositions d’amélioration et des rapports de bugs : cherchez “issues” sur le dépôt framagit, je ne peux pas mettre le lien, je n’ai droit qu’à deux par message…

Bonne découverte,

Sylvain


Cartographie des utilisateurs de TiddlyWiki
Cartographie des utilisateurs de TiddlyWiki
#2

Bonjour @sycom.

Super ! Merci de partager avec nous ce plugin :+1:

Sur mobile réagit plutôt bien, dès que je peux je regarde de plus près, car cela m’intéresse forcément !!

Si j’ai des questions ou besoin d’aide je te ferais signe.


#3

Bonjour à tous.

Biensur que j’aime les cartes :wink:

Quel est la difference avec TiddlyMap ?
Est-ce que ce plugin fonctionne hors-ligne ?

Bonne continuation


#4

Bonjour,

TiddlyMap fait des cartes conceptuelles, on pourrait dire mentales. Leaflet Plugin fait des cartes géographiques.

On ne peut pas dire que le plugin fonctionne hors-ligne. Disons qu’il ne fera pas planter ton wiki, mais il va dessiner les objets géographiques définis dans les tiddlers, mais sans le fond carto de openstreetmap. Ce qui perd un peu de son charme il faut le dire :wink:

Et pour tout dire, j’ai peur qu’essayer de remédier à ce problème :

  • alourdisse considérablement le wiki
  • soit clairement hors de mes capacités de codeur du dimanche

Donc pour l’heure, ce n’est pas au programme.

bonne découverte malgré tout,

Sylvain


#5

Bonjour,

Tout dabord, bravo et merci de partager ce super plugin.

Serait il possible de rentrer autre chose de plus abstrait que des coordonnées? (des noms de lieux, comme “France”, qui placerait le point quelque part au centre). L’utilisation que j’espère en faire serait un nuage de points sur la terre entière. Es-ce qu’il me serait possible par exemple de faire un fichier remplacant des noms qu’on rentreraient dans un field “localisation” du tiddler en coordonnées pour le plugin?


#6

Bonjour,

je vois qu’il existe un nombre important d’extensions à leaflet qui permettent de géocoder. Il faudrait sans doute explorer ça, mais j’ai malheureusement peu de temps à y consacrer et déjà pas mal de pain sur la planche. Donc je peux l’ajouter à la liste des choses à essayer, mais il faudra être patient… Ou appuyer sur ‘‘fork’’ et te lancer :wink:

En attendant, il est aussi possible d’utiliser des outils en ligne pour transformer les adresses en coordonnées géographiques ou d’aller utiliser l’outil que j’ai mis en ligne pour dépanner. Evidemment, c’est moins intuitif, mais c’était pour que ça ne t’empêche pas de faire des cartes.


#7

J’ai trouvé une astuce qui marche parfaitement pour la base de donnée en ligne que je suis en train de créer. Sylvain qui m’a fait découvrir le nouveau plugin excel que Jeremy Ruston est en train de développer. Je me suis servi de ça pour créer un base de données sur google sheet contenant toutes les infos de mon site. Le plugin “Geocode by Awesome Table” sur Google sheets me permet d’écrire des noms de pays ou de ville et ça me sort les coordonnées pour toute la feuille automatiquement. Il n’y a plus qu’a importer dans tiddlywiki :slight_smile:

Par contre, j’ai un petit bug report a faire: Les icones de position ne s’affichent ni sur vôtre site, ni sur le mien. Ils sont remplacés par un signe fichier corrompu. Vous avez probablement oublié


#8

Ah oui @sycom je le constate aussi. @Aknar je crois que tu as aussi oublié de terminer ta phrase :sweat_smile:

Je sais que tu n’as pas beaucoup de temps, mais je suis intéressé pour l’option de l’image pour le point (un peu à l’image d’uMap) que tu as mis dans ta feuille de route :slight_smile:


#9

haha, en effet :sweat_smile:
J’allais dire qu’il avait probablement intégré l’icone en tant qu’image extérieur et qu’il a oublié de l’intégrer par la suite. ça expliquerait qu’il s’en soit pas rendu compte puisque pour lui, ça devrait s’afficher.

Je verrais bien un point tout simple comme marqueur de position puisque je vise a montrer beaucoup de données sur une mappemonde. cela voudrait également dire de cacher les ombres qui font perdre en visibilité


#10

Bonjour,

je ne reproduit pas le bug que vous évoquez. Je viens de tester en récupérant un tiddlywiki vide (5.1.13), puis en faisant glisser mon plugin (0.7.3) dedans. Il fonctionne… Le marqueur n’est pas externe, il inclut dans le code en svg puis interprété par le plugin pour le colorer…
Il va sans doute me falloir plus de précisions : navigateur, version de votre tiddlywiki et de votre plugin, navigateur utilisé etc.

Je note votre envie pour l’option en question et vais voir ce que je peux faire pour le mettre pas trop bas dans la pile de travail :wink:

à bientôt,

Sylvain


#11

J’ai éssayé sur firefox, chrome, même sur tiddlydesktop, toujours le même problème. J’ai la dernière version de ton plugin.

Sur vôtre site de présentation (firefox et chrome):

Sur mon site (tout les browser, version pré-release 5.1.14 et j’ai verifié que j’avais bien la version 0.7.3):

Si t’as besoin d’autres infos, n’hésite pas :slight_smile:


#12

Bigre, voilà qui est incompréhensible. Chez moi ça marche parfaitement avec des configurations similaires. Peut-être une option du navigateur, mais je ne comprends pas trop pourquoi, d’autant que Chrome et Firefox renvoient tous les deux des erreurs.
Pour la version pré-release il est possible que la mise à jour “casse” le plugin, mais je ne vérifierai qu’en release officielle, histoire de ne pas travailler pour rien.

Pourrais tu faire un click-droit dans firefox sur une des images cassées et faire examiner l’élément puis copier > et l’exterieur du html et m’envoyer le code image correspondant?

J’en profite pour dire qu’il est “facile” d’enlever l’ombre soi-même (quand le plugin marche :expressionless: ) :

  • aller dans le panneau de configuration, cliquer sur le titre du plugin. Une liste des tiddlers contenus s’affiche.
  • repérer $:/plugins/sycom/leaflet/images/markershadow.svg, l’ouvrir et passer en mode édition
  • supprimer la partie path du code svg <path d="M46.53 0c-5.94 0- (...) lurFilter)"/> et sauvegarder le tiddler (éventuellement stocker le bout de code dans un tiddler si on veut remettre l’ombre un jour).
  • Les ombres ont disparu.

Avec la même procédure, en modifiant $:/plugins/sycom/leaflet/images/marker.svg il est possible de modifier le marqueur. Je reconnais que c’est un peu plus compliqué…

à plus

Sylvain


#13

Voila:

<img src="function iconUrl(col) {
        var icone = escape($tw.wiki.renderTiddler(&quot;text/html&quot;, &quot;$:/plugins/sycom/leaflet/images/marker.svg&quot;).replace(&quot;$primary$&quot;, setColor(col)).replace(&quot;</p>&quot;, &quot;&quot;).replace(&quot;<p>&quot;, &quot;&quot;));
        return ('data:image/svg+xml;charset=UTF-8,' + icone);
    }" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" style="margin-left: -12.5px; margin-top: -40px; width: 25px; height: 40px; transform: translate3d(669px, 100px, 0px); z-index: 100; outline: medium none;" tabindex="0">

J’ai aucune idée si ceci t’es utile mais dans le doute, ça mange pas de pain de le mettre :slight_smile:
Dans l’inspecteur:


Dans les régles:

Dans la console:

Merci pour l’explication pour les marqeurs, je vais m’y essayer et je vous dirais si j’ai réussi à mettre mon propre marqeur :slight_smile:

Edit:

En tout cas le marquer s’affiche dans $:/plugins/sycom/leaflet/images/marker.svg mais c’est peutêtre normal, je sais pas.

Edit 2:

Est-ce ce code te semple correcte et affichera le marqueur basique que j’ai fait au bon endroit? J’y connais vraiment rien en svg ^^"


#14

Ça m’est utile, même si là tout de suite je ne comprends pas. Normalement, tu devrais avoir ça ou quelque chose du genre :
<img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20fill-rule%3D%22evenodd%22%20height%3D%2240%22%20width%3D%2225%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M6.279%204.463h12.625v14.5H6.279z%22%20fill%3D%22none%22%3E%3C/path%3E%0A%20%20%20%20%3Cpath%20class%3D%22leaflet-marker-colored%22%20d%3D%22M12.544.5C5.971.5.5%206.191.5%2012.366c0%202.778%201.564%206.308%202.694%208.746L12.5%2038.984l9.262-17.872c1.13-2.438%202.738-5.791%202.738-8.746C24.5%206.191%2019.117.5%2012.544.5zm0%207.155a4.714%204.714%200%200%201%204.679%204.71c0%202.588-2.095%204.663-4.679%204.679-2.584-.017-4.679-2.09-4.679-4.679a4.714%204.714%200%200%201%204.679-4.71z%22%20fill%3D%22%2300b500%22%20fill-opacity%3D%22.8%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%3E%3C/path%3E%0A%20%20%20%20%3Cpath%20d%3D%22M12.531%201.607c-5.944%200-10.938%205.219-10.938%2010.75%200%202.359%201.443%205.832%202.563%208.25l.031.031L12.5%2036.607l8.25-15.969.031-.031c1.135-2.448%202.625-5.706%202.625-8.25%200-5.538-4.931-10.75-10.875-10.75zm0%204.969c3.168.021%205.781%202.601%205.781%205.781%200%203.18-2.613%205.761-5.781%205.781-3.168-.02-5.75-2.61-5.75-5.781%200-3.172%202.582-5.761%205.75-5.781z%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-opacity%3D%22.9%22%3E%3C/path%3E%0A%3C/svg%3E%0A" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" style="margin-left: -12.5px; margin-top: -40px; width: 25px; height: 40px; transform: translate3d(283px, 20px, 0px); z-index: 20; opacity: 1;" tabindex="0">

ce qui donne ce que tu vois dans tiddlywiki (à la couleur près) :

Donc pour une raison que j’ignore, chez toi il balance le code de la fonction au lieu de balancer le résultat. Je vais essayer de comprendre maintenant…

Edit:
Ok j’ai trouvé merci. C’est un problème de définition d’écran. Enfin, c’est un problème de code, mais le code n’est en panne que pour les “petites” définitions d’écran. En attendant le fix qui ne saurait tarder, vous pouvez corriger le bug vous même en éditant la ligne 532 de $:/plugins/sycom/leaflet/mapWidget.tid :
Remplacer

// create icon !todo only if there are points to display;
function lfltIcon(col) {
    var theIcon = L.icon({
        iconUrl: iconUrl, // <-- erreur
        iconRetinaUrl: iconUrl(col),

Par

// create icon !todo only if there are points to display;
function lfltIcon(col) {
    var theIcon = L.icon({
        iconUrl: iconUrl(col), // <-- erreur corrigée
        iconRetinaUrl: iconUrl(col),

#15

Si je fais un clic droit sur une image manquante sur la démo en ligne, j’ai ça :

http://sycom.github.io/TiddlyWiki-Plugins/function%20iconUrl(col)%20%7B%20%20%20%20%20%20%20%20var%20icone%20=%20escape($tw.wiki.renderTiddler(%22text/html%22,%20%22$:/plugins/sycom/leaflet/images/marker.svg%22).replace(%22$primary$%22,%20setColor(col)).replace(%22%3C/p%3E%22,%20%22%22).replace(%22%3Cp%3E%22,%20%22%22));%20%20%20%20%20%20%20%20return%20('data:image/svg+xml;charset=UTF-8,'%20+%20icone);%20%20%20%20%7D

Moi aussi peu importe l’OS ou le navigateur, c’est KO partout.


#16

ça marche, merci :slight_smile:

Par contre maintenant j’ai besoin de comprendre positionner mes icones au centre de l’élément ciblé ^^’

pour le moment, j’ai ça:

<svg xmlns="http://www.w3.org/2000/svg" width="25" height="40" fill-rule="evenodd">
<path d="M0,5a5,5 0 1,0 10,0a5,5 0 1,0 -10,0" fill="none"/>
<path class="leaflet-marker-colored" d="M0,5a5,5 0 1,0 10,0a5,5 0 1,0 -10,0" fill-opacity=".8" stroke="#fff" stroke-   linecap="round" fill="$primary$"/>
<path d="M2,5a3,3 0 1,0 6,0a3,3 0 1,0 -6,0" fill="none" stroke="#fff" stroke-linecap="round" stroke-opacity=".9"/>
</svg>

J’imagine que c’est au niveau de xmlns="http://www.w3.org/2000/svg width=“25” height=“40” que ça ce joue mais je n’y comprends rien :sweat_smile:


#17

c’est pour ça que je disais que c’est “un peu plus compliqué” il y a une question d’ancrage de l’icone en fonction de sa forme. Pour que tes marqueurs fonctionnent avec mon code, il faut que tu les dessines en bas et au mileu d’un svg qui fait 25 de large par 40 de haut parce que mon code définit l’ancre à cet endroit :

<svg xmlns="http://www.w3.org/2000/svg" width="25" height="40" fill-rule="evenodd">
   <path d="M0 0h25v40h-25z" fill="none" stroke="black"/>
   <path d="M6.279 4.463h12.625v14.5H6.279z" fill="none"/>
   <path class="leaflet-marker-colored" d="M7.5,35a5,5 0 1,0 10,0a5,5 0 1,0 -10 0" fill-opacity=".8" stroke="#fff" stroke-linecap="round" fill="$primary$"/>
   <path d="M9.5,35a3,3 0 1,0 6,0a3,3 0 1,0 -6,0" fill="none" stroke="#fff" stroke-linecap="round" stroke-opacity=".9"/>

sera un peu mieux. J’ai mis le rectangle pour avoir un repère, il faut juste que tu effaces le premier path

Sylvain


#18

ok, merci. :slight_smile:


#19

J’ai une autre suggestion: Es ce qu’on pourrait avoir une option permettant d’ouvrir le tiddler concerné avec un seul clic sur l’icone?


#20

pour l’instant, voilà ce que je peux faire. C’est un peu plus complexe que ça n’en a l’air en fait.