Не добавлять пользовательский маркер с добавленной CSS с листовкой и L.Routing.control

Question

Я пытаюсь добавить пользовательские маркеры на карту листовки при рисовании маршрута на карте с помощью L.Routing.control.У меня это работает нормально, но когда я пытаюсь добавить маркер с некоторыми пользовательскими CSS, он ничего не делает, и я не могу понять, почему, потому что у меня нет ошибок консоли?

Это код для добавления моих пользовательских маркеровкоторый работает

route = L.Routing.control({
  waypoints: [
    L.latLng(window.my_lat, window.my_lng),
    L.latLng(window.job_p_lat, window.job_p_lng)
  ],show: true, units: 'imperial',
 router: L.Routing.mapbox('API-KEY HERE'),
  createMarker: function(i, wp, nWps) {
    if (i === 0 || i === nWps + 1) {
      return mymarker = L.marker(wp.latLng, {
        icon: redIcon
      });
    } else {
      return job_start = L.marker(wp.latLng, {
        icon: greenIcon
      }); 
    }
  }
}).addTo(map);

var greenIcon = new L.Icon({
  iconUrl: 'assets/marker-yellow.png',
  shadowUrl: 'assets/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

var redIcon = new L.Icon({
  iconUrl: 'assets/marker-red.png',
  shadowUrl: 'assets/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

И CSS и код для нового маркера, который я пытаюсь добавить, и не работает

CSS

.css-icon {

    }

    .gps_ring { 
        border: 3px solid #999;
         -webkit-border-radius: 30px;
         height: 18px;
         width: 18px;       
        -webkit-animation: pulsate 1s ease-out;
        -webkit-animation-iteration-count: infinite; 
        /*opacity: 0.0*/
    }

    @-webkit-keyframes pulsate {
            0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
            50% {opacity: 1.0;}
            100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
    }

JS

var cssIcon = new L.divIcon({
          // Specify a class name we can refer to in CSS.
          className: 'css-icon',
          html: '<div class="gps_ring"></div>'
          // Set marker width and height
          ,iconSize: [22,22]
          // ,iconAnchor: [11,11]
        });

Но когда я добавляю 'icon: cssIcon', он ничего не отображает?

Любая помощь будет великолепна, спасибо

Answer 1

Хорошо, мне удалось сделать это таким образом, который хорошо работает, кроме того, что в верхней левой части поля маркера есть линия, и я не могу выяснить, почему она там есть?

JS

var jobicon = L.divIcon({
     html:'<div style="background-image: url(img/avatar-small.png);height:46px;width:46px" class="map-label-content"></div><div class="map-label-arrow"></div>'
   });

CSS

.map-label {
  position: absolute;
  bottom: 0;left: -50%;
  display: flex;
  flex-direction: column;
  text-align: center;
}
/*Wrap the content of the divicon (text) in this class*/
.map-label-content {
  order: 1;
  position: relative; left: -50%;
  background-color: #fff;
  border-radius: 5px;
  border-width: 2px;
  border-style: solid;
  border-color: #444;
  padding: 0px;
  white-space: wrap;
}
/*Add this arrow*/
.map-label-arrow {
  order: 2;
  width: 0px; height: 0px; left: 50%;
  border-style: solid;
  border-color: #444 transparent transparent transparent;
  border-width: 10px 6px 0 6px; /*[first number is height, second/fourth are rigth/left width]*/
  margin-left: 14px;
}
/*Instance classes*/
.map-label.inactive {
  opacity: 0.9;
}

Answer 2

.gps_ring { 
    position: absolute;
    border: 3px solid #999;
     -webkit-border-radius: 30px;
     height: 18px;
     width: 18px;       
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    /*opacity: 0.0*/
}

А или

.css-icon {
   position relative;
}

@-webkit-keyframes pulsate { 
      position: absolute; 
      z-index:9999; 
     0% {-webkit-transform: scale(0.1, 0.1); 
     opacity: 0.0;} 
    50% {opacity: 1.0;} 
  100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;} }