Custon SVG icon on ArcGIS map widget

Question

Welcome To Ask or Share your Answers For Others

Custon SVG icon on ArcGIS map widget

asked Jan 27, 2021 in Technique[技术] by 深蓝 (71.8m points)

Custon SVG icon on ArcGIS map widget

I have to add a custon SVG file instead of the navigation icon from ArcGIS in the 'locate' widget ('esri-icon-locate'). Here the problem is, the default icon is appearing top of the custom svg file. Is there any way to hide the default icon?

view.when(_ => {
        const n = document.getElementsByClassName("esri-icon-locate");
        if (n && n.length === 1) {
            n[0].classList += " mapnavigation"
        }
    });

and the css,

.mapnavigation:before{
  display: block;
  background: url('mapnavigation.svg');
  background-repeat: no-repeat;
  background-size: 17px 17px;
  background-color: #ffffff;
}

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-01-27T03:50:30+0000

You were really close to the solution, you just need to make it the only class of the node. Take a look at the example I put for you,

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Locate button | Sample | ArcGIS API for JavaScript 4.18</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    .my-svg-icon {
      background: url(https://openlayers.org/en/latest/examples/data/square.svg);
      width: 20px;
      height: 20px;
    }
  </style>
  <script src="https://js.arcgis.com/4.18/"></script>
  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/Locate"
    ], function (Map, MapView, Locate) {
      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-56.049, 38.485, 78],
        zoom: 3
      });

      var locateBtn = new Locate({
        view: view
      });

      // Add the locate widget to the top left corner of the view
      view.ui.add(locateBtn, {
        position: "top-left"
      });

      view.when(_ => {
        const n = document.getElementsByClassName("esri-icon-locate");
        if (n && n.length === 1) {
          n[0].classList = 'my-svg-icon';
        }
      });

    });
  </script>
</head>

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

</html>

Categories

Custon SVG icon on ArcGIS map widget

Custon SVG icon on ArcGIS map widget

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags