Code qui ne marche pas - Carte OpenStreetMap non affiché

Résolu/Fermé

Mahnoj Messages postés 10 Date d'inscription mardi 28 avril 2015 Statut Membre Dernière intervention 12 octobre 2015 - 11 oct. 2015 à 23:24
Mahnoj Messages postés 10 Date d'inscription mardi 28 avril 2015 Statut Membre Dernière intervention 12 octobre 2015 - 12 oct. 2015 à 12:30

Bonjour à tous,

Je me permets de demander votre aide car j'ai suivi un tuto sur internet proposant une méthode pour intégrer une carte OSM sur un site internet cependant, celui-ci ne me donne rien.

Voici le code html :


<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
		<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
		<script src="exemple.js"></script>
			<div id="map" style="height: 400px"></div>
	</head>
	<body onload="InitialiserCarte() ;">
	</body>
</html>

Voici le fichier exemple.js

function InitialiserCarte() {
var map = L.map('map').setView([45.7531152, 4.827906], 17);
var tuileUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
var attrib='Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors';
L.TileLayer(tuileUrl, {minZoom: 8, maxZoom: 18, attribution: attrib}).addTo(map);
}

Pensez-vous qu'il y a une erreur de code ou que la méthode ne fonctionne simplement plus.

Je vous remercie d'avance pour vos retours.

A voir également:

Code qui ne marche pas - Carte OpenStreetMap non affiché
Débloquer carte sim sans code puk - Guide
Code asci - Guide
Pile carte mere - Guide
Code telephone oublié - Guide
Code renvoi ooredoo ✓ - Forum Mobile

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
Modifié par Pitet le 12/10/2015 à 09:15

Salut,

Ta div #map doit être placée à l'intérieur de la balise body et non à l'intérieur de la balise head.

N'hésite pas à regarder la console de développement web de ton navigateur (raccourci F12) pour voir les erreurs javascript.

Bonne journée,

Bonne journée

Mahnoj Messages postés 10 Date d'inscription mardi 28 avril 2015 Statut Membre Dernière intervention 12 octobre 2015
12 oct. 2015 à 12:25

Bonjour Pitet,

Je te remercie pour ta réponse. Après avoir changé la position du "div", cela ne marche toujours pas.
Mais en regardant la console de développement, celui-ci m'indique que

L.TileLayer(tuileUrl, {minZoom: 8, maxZoom: 18, attribution: attrib}).addTo(map);
}

n'est pas définie.

Je vais essayer de comprendre cela.

Je te remercie énormément pour ton aide.

Très bonne journée à toi.

Mahnoj Messages postés 10 Date d'inscription mardi 28 avril 2015 Statut Membre Dernière intervention 12 octobre 2015
12 oct. 2015 à 12:30

Au final, mon problème est résolu. J'ai remplacé TileLayer par tilelayer.

Merci beaucoup pour ton coup de main.

Discussions similaires

programme qui n'affiche pas le mot secret

Arnaque ou pas?

Carte roblox mal gratté illisible

Carte bancaire passée à la machine à laver

ventilateur carte graphique ne tourne pas

Discussions similaires

Newsletters