You are here

Home » API reference » IP Geolocation Views & Maps 7

ip_geoloc_leaflet_markers.css in IP Geolocation Views & Maps 7

Same filename and directory in other branches
  1. 8 css/ip_geoloc_leaflet_markers.css
/* Note that the name of the marker directory, e.g. "/amarkers" is output in
   the HTML as a CSS class, so you can customise a version to go with your
   specific markers by prefixing your CSS rules with .amarkers (or whatever the
   name of your marker directory is)
*/

/* div is the element used for marker tags, i for font icons */
.leaflet-tagged-marker div,
.leaflet-tagged-marker i {
  position: relative;
  top: -37px;
  left: -40px;
  min-width: 80px; /* -2 times left */
  text-align: center;
  height: 0;  /* to avoid marker position shifting */
}
.leaflet-tagged-marker div {
  font-size: 11px;
}
.leaflet-tagged-marker i {
  font-size: 17px;
  font-style: normal;
  display: block; /* block and zero width to avoid marker position shifting */
  width: 0;
}

.leaflet-tagged-marker i.light {
  color: seashell;
}
.leaflet-tagged-marker i.dark {
  color: darkslategrey;
}
.leaflet-tagged-marker i.green {
  color: green;
}
.leaflet-tagged-marker i.red {
  color: red;
}

/* For http://www.flaticon.com, tested for /amarkers (32 x 42px) */
.leaflet-tagged-marker i[class^="flaticon-"]:before,
.leaflet-tagged-marker i[class*=" flaticon-"]:before {
  font-size: 14px;
  position: relative;
  top: -4px;
  left: -10px;
}

/* For http://fontello.com */
.leaflet-tagged-marker i[class^="icon-"]:before,
.leaflet-tagged-marker i[class*=" icon-"]:before {
  position: relative;
  top: -2px;
  left: 1px;
}

/* Adjust for the Google-style markers that live in the /markers directory */
.markers .leaflet-tagged-marker i {
  font-size: 11px;
  top: -30px;
}

.leaflet-tagged-marker div.tag-above-marker {
  top: -56px;
  color: red;
}
.leaflet-tagged-marker div.tag-below-marker {
  top: -1px;
  color: red;
}

.leaflet-marker-icon.tag-rounded-corners {
  font-size: 10px;
  width: 60px;
  padding: 0 3px 1px 2px;
  border-radius: 0 9px 9px 9px;
  border: 1px solid black;
  background-color: white;
}

.leaflet-marker-icon.tag-pointy-circle {
  text-align: center;
  width: 30px;
  height: 25px;
  padding-top: 5px;
  border-radius: 0 20px 20px 20px;
  border: 1px solid black;
  border-top: 1px solid red;
  border-left: 1px solid red;
  background-color: white;
}

File

css/ip_geoloc_leaflet_markers.css
View source 
  1. /* Note that the name of the marker directory, e.g. "/amarkers" is output in

  2.    the HTML as a CSS class, so you can customise a version to go with your

  3.    specific markers by prefixing your CSS rules with .amarkers (or whatever the

  4.    name of your marker directory is)

  5. */

  6. 

  7. /* div is the element used for marker tags, i for font icons */

  8. .leaflet-tagged-marker div,

  9. .leaflet-tagged-marker i {

  10.   position: relative;

  11.   top: -37px;

  12.   left: -40px;

  13.   min-width: 80px; /* -2 times left */

  14.   text-align: center;

  15.   height: 0;  /* to avoid marker position shifting */

  16. }

  17. .leaflet-tagged-marker div {

  18.   font-size: 11px;

  19. }

  20. .leaflet-tagged-marker i {

  21.   font-size: 17px;

  22.   font-style: normal;

  23.   display: block; /* block and zero width to avoid marker position shifting */

  24.   width: 0;

  25. }

  26. 

  27. .leaflet-tagged-marker i.light {

  28.   color: seashell;

  29. }

  30. .leaflet-tagged-marker i.dark {

  31.   color: darkslategrey;

  32. }

  33. .leaflet-tagged-marker i.green {

  34.   color: green;

  35. }

  36. .leaflet-tagged-marker i.red {

  37.   color: red;

  38. }

  39. 

  40. /* For http://www.flaticon.com, tested for /amarkers (32 x 42px) */

  41. .leaflet-tagged-marker i[class^="flaticon-"]:before,

  42. .leaflet-tagged-marker i[class*=" flaticon-"]:before {

  43.   font-size: 14px;

  44.   position: relative;

  45.   top: -4px;

  46.   left: -10px;

  47. }

  48. 

  49. /* For http://fontello.com */

  50. .leaflet-tagged-marker i[class^="icon-"]:before,

  51. .leaflet-tagged-marker i[class*=" icon-"]:before {

  52.   position: relative;

  53.   top: -2px;

  54.   left: 1px;

  55. }

  56. 

  57. /* Adjust for the Google-style markers that live in the /markers directory */

  58. .markers .leaflet-tagged-marker i {

  59.   font-size: 11px;

  60.   top: -30px;

  61. }

  62. 

  63. .leaflet-tagged-marker div.tag-above-marker {

  64.   top: -56px;

  65.   color: red;

  66. }

  67. .leaflet-tagged-marker div.tag-below-marker {

  68.   top: -1px;

  69.   color: red;

  70. }

  71. 

  72. .leaflet-marker-icon.tag-rounded-corners {

  73.   font-size: 10px;

  74.   width: 60px;

  75.   padding: 0 3px 1px 2px;

  76.   border-radius: 0 9px 9px 9px;

  77.   border: 1px solid black;

  78.   background-color: white;

  79. }

  80. 

  81. .leaflet-marker-icon.tag-pointy-circle {

  82.   text-align: center;

  83.   width: 30px;

  84.   height: 25px;

  85.   padding-top: 5px;

  86.   border-radius: 0 20px 20px 20px;

  87.   border: 1px solid black;

  88.   border-top: 1px solid red;

  89.   border-left: 1px solid red;

  90.   background-color: white;

  91. }