BlueMap : Un map-viewer nouvelle génération

Succédant au projet Overviewer sur mTxServ, BlueMap permet d'effectuer des rendus 3D de vos mondes pour les rendre visionnables dans votre navigateur web. BlueMap est désormais nativement intégré sur votre serveur Minecraft, dans un thread indépendant, ce qui signifie que les performances ne seront pas affectées !

BlueMap Logo

Pourquoi BlueMap ?

Proposant de nombreuses features avec d'excellentes performances, BlueMap vous permettra de visionner toutes vos cartes directement dans votre navigateur, presque comme si vous y étiez !

En effet, plusieurs modes de vue sont disponibles, dont une vue satellite et une vue "joueur", comme si vous étiez en mode créatif !

Exemple vue satellite

Exemple vue créative

Crédits : Serveur Play-MC, partenaire de mTxServ

Vous remarquerez que sur la deuxième image, les paysages lointains sont rendus de manière archaïque, afin de préserver les ressources de votre ordinateur.

Si vous n'êtes pas déjà convaincus, vous pouvez consulter cette carte de démo : https://bluecolored.de/bluemap

BlueMap sur mTxServ

ATTENTION : BlueMap ne sera disponible en lieu et place de l'Overviewer que sur les versions à partir de la 1.12.2 (la version 1.5.5 de BlueMap pour la 1.12.2 n'est pas tout à fait stable et il est possible que certaines features ne soient pas disponibles).

Vous pouvez y accéder depuis votre panel grâce à l'onglet BlueMap 3D.

BlueMap panel

Lorsque votre serveur est actif, un rendu de toutes vos maps actives est effectué à la 42ème minute de chaque heure. Vous retrouverez BlueMap à cette URL https://game-x-y.mtxserv.com/bluemap/serveurXXX/.

Les mods sont pris en compte et les ressources sont copiées automatiquement dans le dossier bluemap/config/resourcepacks, cela inclut également les dimensions moddées comme la Twilight Forest par exemple.

Avec la configuration par défaut, il est impossible d'obtenir la position des joueurs en direct.

Si vous constatez un souci d'affichage ou que certaines de vos maps n'ont aucun rendu, pensez à rédiger un ticket support !

FTP & Configuration

Les fichiers de BlueMap sont présents dans le dossier minecraft/bluemap.

Il est possible de modifier les configurations des maps (celles-ci ne sont créées que lorsqu'elles sont absentes).

Réinitialiser le rendu d'une carte

Pour réinitialiser le rendu d'une map (en cas de bug visuel par exemple), il suffit de supprimer le dossier de rendu situé dans minecraft/bluemap/maps/NOM_DE_LA_MAP.

Ajouter des marqueurs

Il est possible de créer des marqueurs pour délimiter vos villes ou indiquer le nom de telle zone de votre map. Ils s'afficheront à la fois sur la map et dans le menu Markers.

Il existe plusieurs types de marqueurs, mais avant de voir ceux-ci, rendons-nous sur le FTP. Vous trouverez tous les fichiers de vos configurations de vos maps ici (DIM-1 étant le Nether et DIM1 l'End) :

FTP bluemap configuration

Cliquez par exemple sur world.conf et rendez-vous tout en bas du fichier pour y ajouter un marqueur comme ceci (vous pouvez copier-coller l'intégralité du code ci-dessous) :

# Here you can define any static marker-sets with markers that should be displayed on the map.
# You can change this at any time.
# If you need dynamic markers, you can use any plugin that integrates with BlueMap's API.
# Here is a list: https://bluemap.bluecolored.de/community/3rdPartySupport.html
marker-sets: {

    # Please check out the wiki for information on how to configure this:
    # https://bluemap.bluecolored.de/wiki/customization/Markers.html
    groupe-marqueurs: {
        label: "Exemple de groupe de marqueur"
        toggleable: true
        default-hidden: false
        sorting: 0
        markers: {
            exemple-marqueur: {
                type: "poi"
                position: { x: -54, y: 87, z: 130 }
                label: "Exemple de marqueur POI"
                
                # Optional:
                detail: "Ceci est un marqueur <b>POI</b>"
                icon: "assets/poi.svg"
                sorting: 0
                listed: true
                min-distance: 10
                max-distance: 10000000
            }

            exemple-marqueur-html: {
                type: "html"
                position: { x: 1, y: 64, z: -23 }
                label: "Example HTML Marker"
                html: "<div style='line-height: 2em; font-size: 2em; color: white; transform: translate(-50%, -50%);'>Example HTML Marker</div>"
                
                # Optional:
                sorting: 0
                listed: true
                min-distance: 10
                max-distance: 10000000
            }
        
            exemple-marqueur-ligne: {
                type: "line"
                position: { x: 1, y: 64, z: -25 }
                label: "Example Line Marker"
                line: [
                    { x: 1, y: 64, z: -23 }
                    { x: 1, y: 64, z: -24 }
                    { x: 1, y: 64, z: -25 }
                    { x: 2, y: 64, z: -25 }
                    { x: 3, y: 64, z: -25 }
                ]
                
                # Optional:
                detail: "This is a <b>line</b> marker"
                link: null
                new-tab: false
                depth-test: false
                line-width: 5
                line-color: { r: 255, g: 0, b: 0, a: 1.0 }
                sorting: 0
                listed: true
                min-distance: 10
                max-distance: 10000000
            }

            exemple-marqueur-forme: {
                type: "shape"
                position: { x: 1, y: 64, z: -23 }
                label: "Example Shape Marker"
                shape: [
                    { x: 1, z: -23 }
                    { x: 1, z: -24 }
                    { x: 1, z: -25 }
                    { x: 2, z: -25 }
                    { x: 3, z: -25 }
                ]
                shape-y: 64
                
                # Optional:
                detail: "This is a <b>shape</b> marker"
                link: null
                new-tab: false
                depth-test: false
                line-width: 5
                line-color: { r: 255, g: 0, b: 0, a: 1.0 }
                fill-color: { r: 200, g: 0, b: 0, a: 0.3 }
                sorting: 0
                listed: true
                min-distance: 10
                max-distance: 10000000
            }

            exemple-marqueur-extrude: {
                type: "extrude"
                position: { x: 1, y: 64, z: -23 }
                label: "Example Extrude Marker"
                shape: [
                    { x: 1, z: -23 }
                    { x: 1, z: -24 }
                    { x: 1, z: -25 }
                    { x: 2, z: -25 }
                    { x: 3, z: -25 }
                ]
                shape-min-y: 47
                shape-max-y: 72
                
                # Optional:
                detail: "This is a <b>extrude</b> marker"
                link: null
                new-tab: false
                depth-test: true
                line-width: 5
                line-color: { r: 255, g: 0, b: 0, a: 1.0 }
                fill-color: { r: 200, g: 0, b: 0, a: 0.3 }
                sorting: 0
                listed: true
                min-distance: 10
                max-distance: 10000000
            }


        }
    }

}

Il contient un marqueur de chaque type :

  • POI : Une image qui affiche un texte lorsque l'on clique dessus
  • HTML : Permet d'ajouter du texte, une image, un bouton ou une vidéo
  • Ligne (line) : Pour délimiter une frontière par exemple, il vous suffit d'indiquer dans shape les points et ils seront reliés en fonction de leur ordre
  • Forme (shape) : Similaire au marqueur ligne sauf que le dernier point sera relié au premier et l'intérieur sera coloré. Pratique pour délimiter une zone
  • Extrude : Similaire au marqueur forme excepté qu'il permet de délimiter une zone en relief

POI

Marqueur POI

Voici le code pour rajouter un marqueur simple, aussi appelé POI.

           exemple-marqueur: {
                type: "poi"
                position: { x: -54, y: 87, z: 130 }
                label: "Exemple de marqueur POI"
                
                # Optional:
                detail: "Ceci est un marqueur <b>POI</b>"
                icon: "assets/poi.svg"
                sorting: 0
                listed: true
                min-distance: 10
                max-distance: 10000000
            }
  • Position : Valeurs XYZ où votre marqueur apparaîtra

  • Label : Nom du marqueur

  • Detail : Texte qui s'affichera lorsque quelqu'un cliquera sur le marqueur

  • Icon : Chemin vers l'image qui sert de marqueur

Plus d'infos ici : https://bluemap.bluecolored.de/wiki/customization/Markers.html#poi-markers

HTML

Marqueur HTML

            example-marqueur-html: {
                type: "html"
                position: { x: 1, y: 64, z: -23 }
                label: "Example HTML Marker"
                html: "<div style='line-height: 2em; font-size: 2em; color: white; transform: translate(-50%, -50%);'>Example HTML Marker</div>"
                
                # Optional:
                sorting: 0
                listed: true
                min-distance: 10
                max-distance: 10000000
            }
  • Position : Valeurs XYZ où votre marqueur apparaîtra
  • Label : Nom du marqueur
  • Html : Spécifiez du code HTML ici pour personnaliser votre marqueur

Plus d'infos ici : https://bluemap.bluecolored.de/wiki/customization/Markers.html#html-markers

Ligne (line)

Marqueur HTML

           example-marqueur-ligne: {
                type: "line"
                position: { x: 1, y: 64, z: -25 }
                label: "Example Line Marker"
                line: [
                    { x: 1, y: 64, z: -23 }
                    { x: 1, y: 64, z: -24 }
                    { x: 1, y: 64, z: -25 }
                    { x: 2, y: 64, z: -25 }
                    { x: 3, y: 64, z: -25 }
                ]
                
                # Optional:
                detail: "This is a <b>line</b> marker"
                link: null
                new-tab: false
                depth-test: false
                line-width: 5
                line-color: { r: 255, g: 0, b: 0, a: 1.0 }
                sorting: 0
                listed: true
                min-distance: 10
                max-distance: 10000000
            }
  • Position : Valeurs XYZ où votre marqueur apparaîtra

  • Label : Nom du marqueur

  • Line : Tous les points que vous souhaitez relier ensemble. Ajoutez un élément { x: 4, y: 64, z: -25 } après avoir sauté une ligne pour ajouter un point

  • Detail : Texte qui s'affichera lorsque quelqu'un cliquera sur le marqueur

  • Link : Lien optionnel qui s'ouvrira lors du clic

  • New-tab : Si le lien link doit s'ouvrir ou non dans un nouvel onglet

  • Line-color : Pour choisir la couleur des points et lignes (r pour rouge, g pour vert, b pour bleu et a pour l'opacité)

Plus d'infos ici : https://bluemap.bluecolored.de/wiki/customization/Markers.html#line-markers

Forme (shape)

Marqueur HTML

           example-marqueur-forme: {
                type: "shape"
                position: { x: 1, y: 64, z: -23 }
                label: "Example Shape Marker"
                shape: [
                    { x: 1, z: -23 }
                    { x: 1, z: -24 }
                    { x: 1, z: -25 }
                    { x: 2, z: -25 }
                    { x: 3, z: -25 }
                ]
                shape-y: 64
                
                # Optional:
                detail: "This is a <b>shape</b> marker"
                link: null
                new-tab: false
                depth-test: false
                line-width: 5
                line-color: { r: 255, g: 0, b: 0, a: 1.0 }
                fill-color: { r: 200, g: 0, b: 0, a: 0.3 }
                sorting: 0
                listed: true
                min-distance: 10
                max-distance: 10000000
            }
  • Position : Valeurs XYZ où votre marqueur apparaîtra

  • Label : Nom du marqueur

  • Shape : Tous les points que vous souhaitez relier ensemble. Ajoutez un élément { x: 4, z: -25 } après avoir sauté une ligne pour ajouter un point

  • Shape-y : La hauteur de votre forme est définie ici

  • Detail : Texte qui s'affichera lorsque quelqu'un cliquera sur le marqueur

  • Link : Lien optionnel qui s'ouvrira lors du clic

  • New-tab : Si le lien link doit s'ouvrir ou non dans un nouvel onglet

  • Line-color : Pour choisir la couleur des points et lignes (r pour rouge, g pour vert, b pour bleu et a pour l'opacité)

  • Fill-color : La couleur avec laquelle votre forme doit être remplie

Plus d'infos ici : https://bluemap.bluecolored.de/wiki/customization/Markers.html#shape-markers

Extrude

Marqueur HTML

           example-extrude-marker: {
                type: "extrude"
                position: { x: 1, y: 64, z: -23 }
                label: "Example Extrude Marker"
                shape: [
                    { x: 1, z: -23 }
                    { x: 1, z: -24 }
                    { x: 1, z: -25 }
                    { x: 2, z: -25 }
                    { x: 3, z: -25 }
                ]
                shape-min-y: 47
                shape-max-y: 72
                
                # Optional:
                detail: "This is a <b>extrude</b> marker"
                link: null
                new-tab: false
                depth-test: true
                line-width: 5
                line-color: { r: 255, g: 0, b: 0, a: 1.0 }
                fill-color: { r: 200, g: 0, b: 0, a: 0.3 }
                sorting: 0
                listed: true
                min-distance: 10
                max-distance: 10000000
            }
  • Position : Valeurs XYZ où votre marqueur apparaîtra

  • Label : Nom du marqueur

  • Shape : Tous les points que vous souhaitez relier ensemble. Ajoutez un élément { x: 4, z: -25 } après avoir sauté une ligne pour ajouter un point

  • Shape-min-y : La hauteur minimale de votre forme est définie ici

  • Shape-max-y : La hauteur maximale de votre forme est définie ici

  • Detail : Texte qui s'affichera lorsque quelqu'un cliquera sur le marqueur

  • Link : Lien optionnel qui s'ouvrira lors du clic

  • New-tab : Si le lien link doit s'ouvrir ou non dans un nouvel onglet

  • Line-color : Pour choisir la couleur des points et lignes (r pour rouge, g pour vert, b pour bleu et a pour l'opacité)

  • Fill-color : La couleur avec laquelle votre forme doit être remplie

Plus d'infos ici : https://bluemap.bluecolored.de/wiki/customization/Markers.html#extrude-markers