Si vous avez une énorme carte pour votre univers de jeu, et que vous n’avez pas envie d’imprimer 150 feuilles de papier, il est parfois plus simple de passer par le support informatique.
Mais voilà, un PDF a ses limites lui aussi.
Google Maps y a pensé avant nous, mais je vous propose non pas un tutoriel mais quelques guidelines pour vous orienter.
Je vous joint un exemple de carte que j’ai pu assembler dans l’univers de Skyrim. Carte interactive de Bordeciel
Nous allons utiliser leaflet.js, c’est un programme assez simple qui permet de se la jouer cartographe avec les moyens du bord.
La première étape, c’est de découper votre carte en petits carrés. En fait le système de zoom de la carte interactive va afficher les carrés correspondant à la taille de la fenêtre et dont la résolution est adaptée au zoom sélectionné.
Pour cela la méthode que je préfère c’est TilesGenerator, téléchargeable ci-dessous.
Tiles Generator
Préparez votre carte au format .png ou .jpg. Attention, elle doit être de taille carré (ajoutez des zones noires sur GIMP si nécessaire).
Selon la résolution de la carte vous allez devoir réfléchir à un zoom maximal. Pour ma carte de Bordeciel j’ai un zoom de 7 ce qui est énorme, vous irez probablement vers un zoom de 3 ou 4.
Maintenant ouvrez votre invité de commande (cmd) et allez dans le répertoire de Tiles generator, puis vous tapez
TilesGenerator.exe [zoom_maximal] [chemin_du_fichier_de_carte]
ça va tourner pendant un moment puis vous aurez un gros dossier output avec plein de petits carrés.
Maintenant vous allez devoir télécharger leaflet.js.
Leaflet.js
Vous allez uploader vos dossiers output et le dossier leaflet sur votre serveur. Si vous êtes chez Free vous disposez d’un serveur gratuit avec un accès FTP. Sinon il y a des alternatives mais la bande passante (donc la vitesse de chargement) est assez faible.
De mon côté j’ai un serveur Free et un serveur que je loue pour mon site (5€/mois).
Puis vous allez créer un fichier txt, recopier le texte suivant, le renommer en index.html, puis le mettre dans votre serveur à côté de vos dossiers output et leaflet.
<!DOCTYPE html>
<html style="height:100%;margin:0;">
<head>
<title>
<!--Remplacez cette ligne par le titre de votre carte-->
</title>
<link rel="stylesheet" href="leaflet/leaflet.css">
<script src="leaflet/leaflet.js"></script>
</head>
<body style="height:100%;margin:0;">
<div id="mapid" style="width: 100%; height: 100%; background: #000000; margin: 0;"></div>
<script type="text/javascript">
//Variables
var mapSW = [0,48140], <!--Inserez à la place de 48140 la hauteur de votre image en pixels-->
mapNE = [61440,0]; <!--Inserez à la place de 61440 la largeur de votre image en pixels-->
var map = L.map("mapid",{
crs: L.CRS.Simple
}).setView([0,0],1);
//Référencer les tuiles de la carte
L.tileLayer("output/tile_{z}_{x}_{y}.png",{
minZoom: 0,
maxZoom: 7, <!--Inserez votre zoom maximal-->
noWrap:true
}).addTo(map);
//Définir les limites de la carte
map.setMaxBounds(new L.LatLngBounds(
map.unproject(mapSW,map.getMaxZoom()),
map.unproject(mapNE,map.getMaxZoom()),
));
//Définir des icônes
var custom_icon= L.icon({iconUrl:'icons/Whiterun.png'}); <!--Vous pouvez déclarer des icones personnalises, sinon supprimez cette ligne-->
// Définir des marqueurs
var text="Ceci est le texte affiché lors du clic sur le marqueur"; <!--Le texte a afficher lors du click sur le marqueur-->
custom_marker=setMarker([32288,26632],custom_icon,"marqueur",text); <!--Le nom du marqueur-->
// Définir un marqueur de référence
var refmarker=L.marker(map.unproject([10000,10000],map.getMaxZoom()),{
draggable: true,
}).addTo(map);
refmarker.bindPopup('');
refmarker.on('dragend',function(e){
refmarker.getPopup().setContent(map.project(refmarker.getLatLng(),map.getMaxZoom()).toString());
});
// Ce marqueur pourra être déplacé pour connaître les coordonnées en pixel d'un point de votre carte
// Fonction
function setMarker(coord,icon,text){
var marker=L.marker(map.unproject(coord,map.getMaxZoom()),{
draggable: false,
icon: icon,
}).addTo(map);
marker.bindPopup(text);
}
</script>
</body>
</html>
Vous trouverez des informations complémentaires sur le tuto (en anglais) Tutorial Leaflet.js
Amusez vous bien !
Dites moi si vous rencontrez un problème.
