Maps - Leaflet Map - Première Carte

Récupération de l'API et création d'une carte centrée sur Paris
Sources :

Notre objectif est le même que pour le premier tutoriel Google Maps, un code minimaliste et complet pour afficher une carte avec la librairie Leaflet. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
		<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
	</head>
	<style>
		html, body { height: 100% }
	</style>

	<body onload="initialize()">
		<div id="map" style="width:100%; height:100%"></div>
	</body>
</html>
<script type="text/javascript">
	function initialize() {
		var map = L.map('map').setView([48.833, 2.333], 7); // LIGNE 18

		var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { // LIGNE 20
			attribution: '© OpenStreetMap contributors',
			maxZoom: 19
		});
	
		map.addLayer(osmLayer);
	}
</script>
Voir le résultat dans un nouvel onglet
Quelques éléments sur ce code :
  • Ligne 6 : Importation de l'API
  • Ligne 18 : Construction de la carte avec ses options : latitude, longitude et niveau de zoom
  • Ligne 20 : Ajout du Layer d'OpenStreetMap

Le niveau de zoom 0 correspond à la vue de la terre entière (répétée plusieurs fois) et plus celui-ci augmente plus le détail augmente. Une particularité de Leaflet est qu'il n'est pas le fournisseur des fonds de carte (ce qu'on appelle les Tiles ou en français Tuiles). Ce n'est donc pas lui qui peut fournir le niveau de zoom maximal.

Si votre connexion est lente ou l'a déjà été, vous devez savoir ce que sont ces Tiles. Il s'agit des images carrés que votre navigateur télécharge en fonction de votre position sur la carte et de votre niveau de zoom. Ces carrés possèdent une certaine taille et mis bout à bout ils forment votre carte. Nous pouvons nous en rendre compte en regardant par exemple dans l'onglet réseau de Firebug (avec Firefox) :

L'image fait ici 256px * 256px, ce qui correspond à la taille par défaut. Dans l'url, les lettres z, x et y ont été remplacé par notre niveau de zoom (7) et par les coordonnées du Tile. Il existe de nombreux fournisseurs de Tiles utilisables avec Leaflet et ils fonctionnent tous de cette façon. Vous pouvez en voir une liste non-exhausitive ici : Liste de Tiles.

Deux choses à savoir sur les fournisseurs de Tiles :

  • Ils n'atteignent pas tous le même niveau de zoom. Il convient donc de regarder leur spécification.
  • Il faut toujours inclure dans la définition du L.tileLayer l'attribut attribution afin de respecter le travail généralement bénévole des personnes qui ont constitué ces Tiles.

Ajout de plusieurs Layers (exemple avec Google Maps)

Il est possible de proposer autant de Layers que l'on souhaite pour une même carte, laissant à l'utilisateur le soin de choisir celui qu'il préfère. Le code suivant permet d'ajouter les 4 Layers de Google Maps et celui d'OpenStreetMap. Il faut par contre importer le code javascript que l'on trouve sur le github suivant : leaflet-google.js.

Quand les librairies sont mises à jour au fil de l'eau

Malheureusement ce code javascript n'est pas compatible avec la version 1.x de Leaflet. Les commentaires visibles sous le code permettent néanmoins de le modifier pour que tout fonctionne correctement. Le code peut être récupéré directement sur notre site : leaflet-google-correct-v1.js 

var ggRoadmap = new L.Google('ROADMAP');
var ggSatellite = new L.Google('');
var ggTerrain = new L.Google('TERRAIN');
var ggHybrid = new L.Google('HYBRID');

map.addLayer(osmLayer); // Le layer par défaut
map.addControl(new L.Control.Layers( {
	'OpenStreetMap': osmLayer, 
	'Google Roadmap' : ggRoadmap, 
	'Google Satellite': ggSatellite, 
	'Google Terrain': ggTerrain, 
	'Google Hybrid' : ggHybrid
	}, {})
);
Voir le résultat dans un nouvel onglet

A droite de la carte est apparue une icone représentant la superposition de différentes couches. En cliquant dessus on peut choisir le Layer désiré.

Ajout de plusieurs Layers avec icones de prévisualisation

Nous avons découvert la librarie Leaflet.Basemaps qui permet d'afficher une prévisualisation des Layers. Pour l'utiliser il suffit d'importer les fichiers L.Control.Basemaps.css et L.Control.Basemaps-min.js dans sa page. Ensuite on définit normalement la liste des Layers que l'on souhaite rendre disponible et on ajoute l'ensemble à la carte en utilisant la librarie.

Prévisualisation des Layers 
var map = L.map('map').setView([48.833, 2.333], 7);
	
let stamenLite = L.tileLayer('//{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png', {
	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
	subdomains: 'abcd',
	maxZoom: 20,
	minZoom: 0,
	label: 'Toner Lite'  // Libellé pour le tooltip en option
	});
		
let stamenToner = L.tileLayer('//{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
	subdomains: 'abcd',
	maxZoom: 20,
	minZoom: 0,
	label: 'Toner'
});

let stamenColor = L.tileLayer('//{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png', {
	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
	subdomains: 'abcd',
	maxZoom: 16,
	minZoom: 1,
	label: 'Watercolor'
});

map.addControl(L.control.basemaps({
	basemaps: [stamenLite, stamenToner, stamenColor],
	tileX: 0,  // Coordonnée X de la prévisualisation
	   tileY: 0,  // Coordonnée Y de la prévisualisation
	tileZ: 1   // Niveau de zoom de la prévisualisation
}));
Voir le résultat dans un nouvel onglet

Ajout d'un marker et personnalisation

L'ajout d'un marker est très simple à réaliser et le contenu de la popup peut être personnalisé avec de l'HTML 

L.marker([48.5, -0.09]).addTo(map)
	.bindPopup('Le texte du marker<br> On peut y mettre du code HTML');

Pour changer le marker par une image que l'on possède c'est assez simple également. Il faut par contre produire l'image correspondant à l'ombre du marker ou alors supprimer l'ombre. Il convient également de bien paramétrer les différentes tailles et anchor de l'image. Notamment iconAnchor qui détermine la position du marker, si celle-ci est incorrecte le marker va se déplacer quand l'utilisateur utilise la fonctionnalité de zoom. Les mesures se font du coin en haut à gauche. Ainsi la pointe de notre marker se trouve au milieu et en bas, ce qui nous donne bien [32, 64]. 

var customIcon = L.icon({
	iconUrl: 'icon-marker.png',
	//shadowUrl: 'icon-shadow.png',
	iconSize:     [64, 64], // taille de l'icone
	//shadowSize:   [50, 64], // taille de l'ombre
	iconAnchor:   [32, 64], // point de l'icone qui correspondra à la position du marker
	//shadowAnchor: [32, 64],  // idem pour l'ombre
	popupAnchor:  [-3, -76] // point depuis lequel la popup doit s'ouvrir relativement à l'iconAnchor
});

L.marker([48.5, 0.5], {icon: customIcon}).addTo(map);

Il est également possible d'utiliser la fonctionalité de tooltip pour afficher un texte ou code HTML de manière permanente. 

L.marker([48.5, 2]).addTo(map)
	.bindTooltip("Les Granges-le-Roi", {permanent: true, direction: 'top'});

Les valeurs possibles pour la direction sont (comme souvent) : top, left, bottom, right. Par ailleurs si vous voulez surcharger le CSS il faut utiliser les classes leaflet-tooltip et leaflet-tooltip-top par exemple. Pour modifier la marge et positionner le tooltip un peu plus haut : 

.leaflet-tooltip-top {
	margin-top: -15px; // Valeur par défaut -6px
}
Voir le résultat dans un nouvel onglet

COMMENTAIRES

Herve_be

Bonjour,
Pour afficher des marqueurs sur une carte OSM j'utilise un fichier .xml qui ne contient que des waypoints, ça fonctionne très bien, exemple : https://www.leforumrecifal....
Je voudrais seulement modifier la taille de l'icône de marqueur; je sais que je devrais modifier iconSize: [x, z] et iconAnchor: [y, z] mais je ne trouve pas où (dans quel fichier Leaflet) il doit être modifié.
J'ai même remplacé leaflet / images / marker-icon.png par un autre PNG: cela n'a aucun effet !
Comment puis-je faire ceci?
Grand merci d'avance

Eric de Lagarde

Bonjour,
je me permet de m'incruster sans pouvoir répondre à votre question, mais pour en poser une autre : pourriez vous expliquer comment vous faites pour afficher les marqueurs à partir d'un fichier XML ?
Merci
Eric

Herve_be

Bonjour,
Il faut évidemment connaître les coordonnées de chaque point.
Ensuite il suffit de les mettre dans un fichier .XML el le formattant comme ceci (exemple)
! il faut un < devant et un > derrière la première ligne mais si je les mets il n'apparaissent pas ici !
?xml version='1.0' encoding='UTF-8' standalone='no' ?
<gpx>
<wpt lat="49.5779" lon="3.0006"><desc>alain</desc></wpt>
<wpt lat="47.8692" lon="7.4528"><desc>alain6265</desc></wpt>
...
<wpt lat="48.6124" lon="2.3831"><desc>Yann</desc></wpt>
<wpt lat="48.4945" lon="-2.7144"><desc>Yves_22</desc></wpt>
</gpx>
Le libellé derrière le tag "desc" s'affiche quand on clique sur le point.

Eric de Lagarde

Merci

ericfrigot

Bonjour, je n'ai jamais travaillé avec ce mode de chargement des données mais en regardant le lien que vous m'avez donné, à priori vous devez intervenir ici : https://www.leforumrecifal...., précisément dans le fichier Map.html au niveau de la ligne 48. J'espère que vous avez bien la main sur ce fichier.
N'hésitez pas à me tenir au courant,
Eric

Herve_be

Merci, entretemps j'ai trouvé, effectivement dans ce fichier, il suffit d'écraser les valeurs par défaut du marqueur : L.Icon.Default.prototype.options. properties (iconSize, iconAnchor, ...).
Par contre j'aurais voulu remplacer l'icone elle-même mais si j'écris L.Icon.Default.prototype.options.iconUrl = 'Point.png' qui est dans le même répertoire que le fichier html j'ai une image brisée : il ne trouve pas le .png, une idée ?

ericfrigot

Bonjour, j'allais vous répondre mais j'ai l'impression que vous avez finalement trouvé la réponse. J'ai l'impression qu'il y a une déformation sur les markers que vous avez choisis, je pense qu'il faut réviser la hauteur et la largeur. Eric

Herve_be

Bonjour et merci pour cette remarque.
En effet j'utilisais une icône bleue qui mesure 25 x 41 px, je la voulais plus petite donc j'ai mis 19 x 30 (environ 75%).
https://uploads.disquscdn.c...
Puis j'ai changé pour une icône transparente https://uploads.disquscdn.c... qui mesure 27 x 32 px mais j'ai gardé les mêmes dimensions (19 x 30) ce qui fait qu'elle n'est plus bien proportionnée, j'ai corrigé, c'est mieux, encore merci.

Awaz Leon

Bonjour,
Merci pour ce tuto. J'avais l'habitude d'utiliser Leaflet mais avec Python en statique. Google Map API étant payant, j'ai pu utiliser Leaflet avec PHP et mySQL pour mon site sans aucun problème. J'ai juste adapté votre code avec celui d'un autre tuto trouvé sur le Net ;-)
Maintenant, la question : J'arrive à afficher les infos que je veux quand on clique sur un marqueur sur la carte, mais peut-on afficher une image en plus ? J'ai beau chercher, je ne trouve des solutions qu'avec ce "satané" Google Map API. Apparemment ce n'est pas prévu dans l'API Leaflet.
Bravo pour les tutos
Cordialement

ericfrigot

Bonjour,
Je n'ai pas testé directement avec une image mais la fonction bindPopup mentionné dans le paragraphe "Ajout d'un marker et personnalisation" indique bien qu'on peut mettre de l'HTML et donc référencé une image sur avec la balise IMG.
Dites-moi si vous avez déjà fait ce test et dans ce cas-là je creuserais un peu plus.
Eric

Awaz Leon

Salut,
Cela fonctionne parfaitement, merci. je ne sais pas pourquoi, mais j'étais resté bloqué sur le fait que l'HTML servirait dans ce cas uniquement pour la présentation dans le popup (saut de ligne, fonte...) Allez savoir pourquoi ;-)

Maintenant il faut que j'ajoute l’agrandissement de l'image quand on clique dessus, mais cela ne devrait pas poser de problème.
Cordialement

Awaz Leon

Merci Eric pour ce retour rapide,
Je n'ai jamais testé cette possibilité. Je sais que l'on peut mettre du code HTML dans bindPopup et je l'utilise déjà pour parfaire l’affichage des infos dans le PopUp. Ce qui va poser problème c'est la localisation des fichiers images, Java étant exécuté (à contrario de PHP) sur la machine (client) qui charge la page HTML. Il faut que les images se trouvent sur un serveur accessible depuis le client. Je vais quand même creuser de ce coté. Si cela fonctionne, je m’arrangerais pour que les images soient dispos quelque part sur un serveur. Je vous tiendrais informé de mes progrès dans ce sens.
Pascal

Cloé PERRIN

Bonjour,
Merci pour toutes ces explications. Mais je voudrais savoir : peut on géolocaliser avec leaflet? (Obtenir longitude et latitude à partir d’une adresse d’une base de donnée) grâce à vous j’ai déjà bien appris mais j’ai vraiment du mal à trouver réponse à ma question. Merci beaucoup pour votre temps.
Cordialement

ericfrigot

Bonjour,
Vous vous attaquez là à un sujet bien délicat :)
Ce n'est pas possible avec Leaflet, pour réaliser ce que vous voulez faire il faut utiliser une API de geocoding (tenter la recherche dans Google). D'ailleurs Google en propose une mais il faut s'inscrire pour avoir une clé et au bout d'une certaine limite par jour ça devient payant. En français le site suivant du gouvernement permet de le faire : https://geo.api.gouv.fr/adr.... J'avais prévu de faire un tutoriel sur ce sujet mais je n'ai pas encore pris le temps de le faire. N'hésitez pas à revenir faire un tour ici si vous avez des questions, en espérant que ces premiers éléments pourront vous aider.

CD

Bonjour,

je suis un peu novice en programmation et je me suis basé sur ce code pour afficher une carte OSM avec plusieurs markers stockés dans un bdd.
Je fais une requette sql et une boucle while pour générer autant de ligne de marker L.marker([,]).addTo(map).bindPopup() et les afficher.

Je souhaiterais pouvoir actualiser ma carte avec les markers créés ou supprimés de la bdd sans recharger la carte.
Je suppose qu'il faut ajouter un setIntervale d'une fonction mais je ne comprends pas comment la faire.
Si quelqu'un a une idée je suis preneur...
Merci d'avance.

ericfrigot

Bonjour, je pense que vous pouvez partir sur quelque chose comme ça :
window.addEventListener("load", function() { updatePoints(); });

function updatePoints() {
// Récupération des points depuis le serveur
// Mise à jour des markers
setTimeout(function(){ updatePoints(); }, 10000); // Mise à jour toutes les 10 secondes
}

Il vous faudra dans vos données le moyen de savoir quels sont les nouveaux markers et pouvoir retrouver ceux qui sont à supprimer.

CD

Bonjour,
est ce que je peux vous envoyer ma fonction qui affiche la carte et les markers pour que vous puissiez regarder? je comprends le principe mais je n'arrive pas à le coder.

ericfrigot

Bonjour, oui vous pouvez me montrer votre fonction. Utilisez pastebin si le code est un peu long.

CD

Bonjour,

voilà les liens de deux exemples que j'ai testé sans succès...désolé d'avance pour le code...

exemple 1 :https://pastebin.com/u9sE6CQQ

exemple 2 : https://pastebin.com/WZtqysZ5

en vous remerciant.

ericfrigot

Bonjour, j'ai regardé votre code et il est très bien. Malheureusement sans environnement d'exécution ce n'est pas évident d'analyser ce qui ne va pas. Est-il possible que vous fassiez héberger ce code quelque part ? Il me faudrait le debugger en live pour pouvoir comprendre ce qui ne va pas. Si vraiment ce n'est pas possible je vous propose une solution ou on fait une réunion téléphonique avec partage d'écran (j'ai les outils pour).

CD

Bonjour,
j'ai hébergé ce code pour faire des tests, pouvez vous me dire comment vous transmettre les informations de ce site de test?
Merci d'avance.
Cordialement.

ericfrigot

Bonjour,
Malheureusement je ne dispose pas d'assez de temps pour analyser des pages complètes. Je peux répondre à des problèmes précis mais le temps que j'y accorde doit rester restreint.
En espérant que vous puissiez trouver une solution.
Eric

CD

Bonjour, je regarde ce que je peux faire. Est ce que je peux vous joindre à cette adresse : contact@datavis.fr ??

CD

bonjour,
merci pour ces informations. J'ai maintenant une piste pour essayer. Vu le nombre de markers je pense que je vais tous les tous effacer et les ré afficher.
Merci encore. Cordialement.

Jean-Paul Remacle

Bonjour,
Sur le site de Leaflet, il propose un exemple qui fournit une solution compatible avec la version 1.6.0.
https://leafletjs.com/examp...

ericfrigot

Bonjour, je ne suis pas sûr de saisir à quoi cet exemple apporte une solution. Est-ce que vous parlez du problème avec les Tiles de Google ou s'agit il d'un autre sujet ? Merci

Jean-Paul Remacle

Il s'agit de l'affichage du menu de sélection en haut a droite. Pour choisir le calque/layer.

steeve kevin

bonjour je suis tombé sur se turto ou je ne comprend rien apparemment il ne faut lire les turto précédant alors sil vous plait j'aimerais avoir le lien des turto précédant merci

ericfrigot

Bonjour, il s'agit bien du premier tutoriel sur la création de carte avec leaflet. Quand vous dites que vous ne comprenez rien, de quoi parlez vous en particulier ? Normalement vous pouvez recopier le contenu du premier bloc de code dans un fichier .html et vous obtiendrez un résultat. Néanmoins pour suivre tous les tutoriels de ce site il faut avoir un minimum de connaissances en HTML, CSS et Javascript.

F5AIB

Bonjour,

Merci pour vos tutos, très utiles pour démarrer dans ce nouveau domaine pour moi.
J'utilise votre code "Ajout de plusieurs Layers (exemple avec Google Maps)" qui convient très bien pour mon application.
Par contre, je n'arrive pas à fixer des limites de zoom (mini/maxi) aux layers Google comme je le fais pour le layer OSM.
(var osmLayer = L.tileLayer ('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {maxZoom:8 ,minZoom:4});)

Merci d'avance.

ericfrigot

Bonjour,
Je pense que le comportement est différent pour les layers Google effectivement. La documentation Leaflet indique qu'il est bien possible de limiter le niveau de zoom mais cela doit se faire sur la Map et non le Layer (https://leafletjs.com/examp.... J'ai testé de modifier l'initialisation de la Map et ça fonctionne pour tous les layers : var map = L.map('map', {maxZoom:9}).setView([48.833, 2.333], 7);. Le problème vient du fait que les layers OSM étendent L.tileLayer qui fournissent l'option pour limiter le zoom alors que le Layer utilisé pour Google étend L.Layer qui n'a pas cette option. Si vous voulez des limites de niveaux de zoom différents en fonction du layer sélectionné, il faudra ajouter un event sur le changement de layer.
Eric

F5AIB

Je ne sais pas si j'ai répondu au bon endroit ...., je renouvelle donc ma réponse
Eric,
Je viens de faire la modification. C'est ok.
Merci encore.
Ce qui m'intéresse, c'est de na pas aller au dessous de zoom 2 pour ne pas dupliquer la carte en horizontal.
Bon dimanche et bravo pour ce que vous faites.

F5AIB

Merci Eric pour votre réponse, c'est du service hyper rapide....
Je vais regarder ça dans la journée, mais je ne suis pas très familiarisé avec les "Event".
Pour info : je suis radioamateur et ces applis servent à situer les pays contactés (ou à contacter).
C'est visible ici : http://f5aib.net/carto/loca... et ici : http://f5aib.net/mesdxcc_mu...
Bonne journée.
Robert

F5AIB

Eric,
Je viens de faire la modification. C'est ok.
Merci encore.
Ce qui m'intéresse, c'est de na pas aller au dessous de zoom 2 pour ne pas dupliquer la carte en horizontal.
Bon dimanche et bravo pour ce que vous faites.

Tivoch

Bonjour,

Merci beaucoup pour le tuto, je cherche seulement à afficher un fond de carte Google Maps avec Leaflet, jusqu'ici tout va bien sauf que la carte est grisée et est recouverte de "For developpement purposes only", hors sur votre exemple elle est claire et nette, je ne sais pas ce que j'ai raté mais je suppose que j'ai raté l'endroit ou on renseigne sa clé d'API Google Maps je voulais savoir si vous aviez des éclaircissements à m'apporter.

Merci d'avance

ericfrigot

Bonjour,
Effectivement, vous devez bien demander une clé à Google pour pouvoir utiliser ses fonds de carte. C'est d'ailleurs visible dans le code source de la page à la ligne 7 j'importe l'API Google et je fournis une clé qui est uniquement valable pour mon site www.datavis.fr. La procédure est assez simple à suivre et se trouve sur ce lien : https://developers.google.c...

Laurent

Bonjour,

En reprenant votre code et votre clé (par ignorance de la gestion des clés google, désolé - je l'ai supprimée depuis), j'ai réussi sans aucune difficulté à avoir le fond de carte google. Donc attention, votre clé semble compatible sur n'importe quel site!

Cordialement

ericfrigot

Bonjour, merci d'être revenu pour m'en avertir ! Eric

Riggins

Bonjour,

Merci pour tes tutoriels sur Leaflet.
Je débute sur Leaflet et je me pose une question, est-il possible de récupérer un clic (longitude, latitude) sur la carte pour ajouter un marker en base ? (un peu à l'image de Google Maps lorsque qu'on fait un clic droit sur la carte)

Merci par avance :)

ericfrigot

Bonjour, il est bien sûr possible avec Leaflet de récupérer la latitude et la longitude à partir d'un clic. Je vous renvoie directement vers une page de StackOverFlow qui contient le code nécessaire : https://stackoverflow.com/q.... Si vous avez des difficultés à le mettre en oeuvre n'hésitez pas. L'idée est d'ajouter un Listener sur la carte pour capturer le clic. Le code peut se résumer à ceci :
map.on('click', function(e) {
var latlng = map.layerPointToLatLng(L.point(e.layerPoint.x, e.layerPoint.y));
});

Riggins

Merci beaucoup pour ta réponse, je vais regarder tout ça :)

BESTCHOICE ARTDRINKCOFFEE

Bonjour

j aimerais savoir si c'est possible de changer la couleur des markeur car dans mon projet j'utilise un capteur grov GPS pour carte arduino et un capteur RFID et le but est de pouvoir changer la couleur du marker sur la carte en temps réel pour connaître l'état d'occupation d'un véhicule d'une place de parking ("rouge" si place libre, "orange" si occupation véhicule mais pas de badge RFID et "vert" si occupation et détection d'un badge RFID)

merci davance

Abdel

ericfrigot

Bonjour,
Il y a au moins deux solutions à votre problème, soit vous utilisez les icônes et le procédé décrit sur ce site : https://github.com/pointhi/... (je vous conseille de récupérer les markers qui vous intéressent en local), soit vous avez réellement besoin d'une palette plus large de couleurs et vous pouvez utiliser cette autre solution : https://stackoverflow.com/q.... Dans les deux cas si vous ne parvenez pas à vos fins, n'hésitez pas !
Eric

Flanez Bougez

Bonjour,

Merci pour le tuto efficace,

J'ai mis en place tout est OK mais au bout de queleques jours le fond devient gris plus de carte mais le pointeur est ok
quelle piste pourrais je explorer pour résoudre ce disfonctionnement ?

ericfrigot

Bonjour,
Si le fond de carte n'apparaît plus c'est que le script n'arrive plus à télécharger les tiles (les fonds de carte). Avez-vous des problèmes d'accès à Internet ?
Pour vérifier cela vous pouvez utiliser le plugins firebug de Firefox qui permet de voir les fichiers qui transitent vers le navigateur. Normalement quand vous rafraichissez la page avec firebug ouvert vous devez voir quelque chose comme ça (l'important c'est le OK de la colonne status) https://uploads.disquscdn.c...