leaflet-extra-markers/src/assets/less/leaflet.extra-markers.less

Custom Markers for Leaflet JS based on Awesome Markers

// Path should include a trailing slash
@extra-markers-image-path: "../img/";

@extra-markers-sprite-url: "@{extra-markers-image-path}markers_default.png";
@extra-markers-sprite-retina-url: "@{extra-markers-image-path}markers_default@2x.png";
@extra-markers-shadow-url: "@{extra-markers-image-path}markers_shadow.png";
@extra-markers-shadow-retina-url: "@{extra-markers-image-path}markers_shadow@2x.png";

@extra-marker-width: 35px;

/* Marker setup */
.extra-marker {
  background: url(@extra-markers-sprite-url) no-repeat 0 0;
  width: @extra-marker-width;
  height: 46px;
  position:absolute;
  left:0;
  top:0;
  display: block;
  text-align: center;
}

.extra-marker-shadow {
  background: url(@extra-markers-shadow-url) no-repeat 0 0;
  width: 36px;
  height: 16px;
}

/* Retina displays */
@media (min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx) {
  .extra-marker {
    background-image: url(@extra-markers-sprite-retina-url);
    background-size: 540px 184px;
  }
  .extra-marker-shadow {
    background-image: url(@extra-markers-shadow-retina-url);
    background-size: @extra-marker-width 16px;
  }
}

/* Icons */
.extra-marker {

  &.extra-marker-svg {
    background: none;
  }

  &.extra-marker-svg .svg-inline--fa,
  &.extra-marker-svg i {
    position: absolute;
    left: 0;
    width: @extra-marker-width;
  }

  .svg-inline--fa,
  i {
    color: #fff;
    margin-top: 7px;
    display: inline-block;
    font-size: 14px;
  }

  .svg-inline--fa {
    margin-top: 10px;
    background: none;
  }

  /* Font Awesome */
  .svg-inline--fa,
  i.fa,
  i.fab,
  i.fas,
  i.far,
  i.fal {
    margin-top: 10px;
    &.fa-2x {
      font-size: 16px;
      margin-top: 9px;
    }
    &.fa-3x {
      font-size: 18px;
      margin-top: 9px;
    }
    &.fa-4x {
      font-size: 20px;
      margin-top: 8px;
    }
    &.fa-5x {
      font-size: 24px;
      margin-top: 6px;
    }
  }

  .fa-number:before {
    content: attr(number)
  }

/* Bootstrap 3 */
  i.glyphicon {
    margin-top: 10px;
  }

/* Semantic UI Fix */
  i.icon {
    margin-right: 0;
    opacity: 1;
  }

} //end extra-marker

/* Sprites setup */
.extra-marker-circle-red          { background-position: 0          0 }
.extra-marker-circle-orange-dark  { background-position: -36px      0 }
.extra-marker-circle-orange       { background-position: -72px      0 }
.extra-marker-circle-yellow       { background-position: -108px     0 }
.extra-marker-circle-blue-dark    { background-position: -144px     0 }
.extra-marker-circle-blue         { background-position: -180px     0 }
.extra-marker-circle-cyan         { background-position: -216px     0 }
.extra-marker-circle-purple       { background-position: -252px     0 }
.extra-marker-circle-violet       { background-position: -288px     0 }
.extra-marker-circle-pink         { background-position: -324px     0 }
.extra-marker-circle-green-dark   { background-position: -360px     0 }
.extra-marker-circle-green        { background-position: -396px     0 }
.extra-marker-circle-green-light  { background-position: -432px     0 }
.extra-marker-circle-black        { background-position: -468px     0 }
.extra-marker-circle-white        { background-position: -504px     0 }

.extra-marker-square-red          { background-position: 0          -46px }
.extra-marker-square-orange-dark  { background-position: -36px      -46px }
.extra-marker-square-orange       { background-position: -72px      -46px }
.extra-marker-square-yellow       { background-position: -108px     -46px }
.extra-marker-square-blue-dark    { background-position: -144px     -46px }
.extra-marker-square-blue         { background-position: -180px     -46px }
.extra-marker-square-cyan         { background-position: -216px     -46px }
.extra-marker-square-purple       { background-position: -252px     -46px }
.extra-marker-square-violet       { background-position: -288px     -46px }
.extra-marker-square-pink         { background-position: -324px     -46px }
.extra-marker-square-green-dark   { background-position: -360px     -46px }
.extra-marker-square-green        { background-position: -396px     -46px }
.extra-marker-square-green-light  { background-position: -432px     -46px }
.extra-marker-square-black        { background-position: -468px     -46px }
.extra-marker-square-white        { background-position: -504px     -46px }

.extra-marker-star-red            { background-position: 0          -92px }
.extra-marker-star-orange-dark    { background-position: -36px      -92px }
.extra-marker-star-orange         { background-position: -72px      -92px }
.extra-marker-star-yellow         { background-position: -108px     -92px }
.extra-marker-star-blue-dark      { background-position: -144px     -92px }
.extra-marker-star-blue           { background-position: -180px     -92px }
.extra-marker-star-cyan           { background-position: -216px     -92px }
.extra-marker-star-purple         { background-position: -252px     -92px }
.extra-marker-star-violet         { background-position: -288px     -92px }
.extra-marker-star-pink           { background-position: -324px     -92px }
.extra-marker-star-green-dark     { background-position: -360px     -92px }
.extra-marker-star-green          { background-position: -396px     -92px }
.extra-marker-star-green-light    { background-position: -432px     -92px }
.extra-marker-star-black          { background-position: -468px     -92px }
.extra-marker-star-white          { background-position: -504px     -92px }

.extra-marker-penta-red           { background-position: 0          -138px }
.extra-marker-penta-orange-dark   { background-position: -36px      -138px }
.extra-marker-penta-orange        { background-position: -72px      -138px }
.extra-marker-penta-yellow        { background-position: -108px     -138px }
.extra-marker-penta-blue-dark     { background-position: -144px     -138px }
.extra-marker-penta-blue          { background-position: -180px     -138px }
.extra-marker-penta-cyan          { background-position: -216px     -138px }
.extra-marker-penta-purple        { background-position: -252px     -138px }
.extra-marker-penta-violet        { background-position: -288px     -138px }
.extra-marker-penta-pink          { background-position: -324px     -138px }
.extra-marker-penta-green-dark    { background-position: -360px     -138px }
.extra-marker-penta-green         { background-position: -396px     -138px }
.extra-marker-penta-green-light   { background-position: -432px     -138px }
.extra-marker-penta-black         { background-position: -468px     -138px }
.extra-marker-penta-white         { background-position: -504px     -138px }