@seventty/leaflet-x v1.0.2

Leaflet X

Configure Angular.json

Open the angular.json file and add leaflet.css:

{
  // ...
  "projects": {
    "angular-leaflet-example": {
      // ...
      "architect": {
        "build": {
          // ...
          "options": {
            // ...
            "styles": [
              "./node_modules/leaflet/dist/leaflet.css",
              "src/styles.css"
            ],
            // ..
          },
          // ...
        },
        // ...
      }
    }},
  "defaultProject": "angular-leaflet-example"
}

Set styles.sass like this

/* Importing Bootstrap SCSS file. */
@import 'bootstrap/scss/bootstrap'

.upload-map {
  background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg enable-background="new 0 0 128 128" height="128px" id="Layer_1" version="1.1" viewBox="0 0 128 128" width="128px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M111.276,77.913l-3.286-3.286c-2.293-2.292-6.006-2.299-8.292-0.013l-4.254,4.253V26.081   c0-3.204-2.606-5.804-5.822-5.804h-4.608c-3.213,0-5.818,2.6-5.818,5.804v52.785l-4.254-4.252c-2.287-2.287-6-2.279-8.292,0.013   l-3.288,3.285c-2.292,2.295-2.299,6.006-0.011,8.293l19.807,19.81c1.147,1.147,2.656,1.716,4.163,1.708   c1.507,0.007,3.013-0.561,4.161-1.709l19.809-19.809C113.574,83.92,113.569,80.207,111.276,77.913z" fill="5B5B5B"/><path d="M16.724,50.086l3.287,3.287c2.293,2.292,6.005,2.299,8.292,0.014l4.254-4.253v52.786   c0,3.205,2.606,5.804,5.821,5.804h4.609c3.214,0,5.82-2.599,5.82-5.804V49.134l4.253,4.252c2.287,2.287,6,2.279,8.292-0.014   l3.287-3.286c2.292-2.293,2.298-6.004,0.011-8.292L44.843,21.985c-1.147-1.146-2.656-1.716-4.162-1.708   c-1.508-0.006-3.014,0.562-4.163,1.709L16.71,41.794C14.425,44.08,14.43,47.793,16.724,50.086z" fill="5B5B5B"/></g></svg>');
}