Créer un fond de carte personnalisé pour fêter Noël

Bonjour, aujourd'hui je veux prendre le temps de vous souhaiter un très Joyeux Noël ainsi que de très bonnes fêtes. Pour l'occasion, je vous mets à disposition cette carte Web mise au couleur de Noël, reprise d'un utilisateur ArcGIS Online ! Grâce au Vector Tile Style Editor vous avez la capacité de créer vos propres fonds de carte, comme celui-ci et de l'importer dans vos applications cartographiques. Il est également possible de directement éditer un objet JSON en tant que VectorTileLayer au sein de votre application Web comme indiqué dans cet exemple. Voici un tutoriel pour comprendre comment ça marche.
Le Vector Tile Style Editor tire parti de ces méthodes mentionnées.

Vous pouvez donc créer votre fond de carte, l'enregistrer dans votre portail puis l'utiliser dans une carte Web que vous pouvez réutiliser dans votre application Web !

On se retrouve très vite pour de nombreux articles liés au développement en 2020 !

Ci-dessous le code qui permet d'intégrer cette carte Web (publique) dans une application Web :


<html>

  <head>

    <meta charset="utf-8" />

    <meta

      name="viewport"

      content="initial-scale=1,maximum-scale=1,user-scalable=no"

    />



<title>Load a basic WebMap - 4.14</title>



    <style>

      html,

      body,

      #viewDiv {

        padding: 0;

        margin: 0;

        height: 100%;

        width: 100%;

      }

    </style>



    <link

      rel="stylesheet"

      href="https://js.arcgis.com/4.14/esri/themes/light/main.css"

    />



    <script src="https://js.arcgis.com/4.14/"></script>



    <script>

      require(["esri/views/MapView", "esri/WebMap"], function(MapView, WebMap) {

      

        var webmap = new WebMap({

          portalItem: {

            // autocasts as new PortalItem()

            id: "0465557e75674c4fa48765667568a1f8"

          }

        });



        var view = new MapView({

          map: webmap,

          container: "viewDiv"

        });

      });

    </script>

  </head>



  <body>

    <div id="viewDiv"></div>

  </body>

</html>