Return to Answer

updated css

Source Link

edited Feb 2, 2017 at 14:41

A very similar answer to IvanSanchez, but you could switch from L.CircleMarker and use L.DivIcon to instead create your circle completely with CSS:

.circle {
  background: #0000ff; /* color of the circle */
  border-radius: 50%; /* make the div a circular shape */
  box-shadow: 10px4px 10px4px 3px grey; /* see http://www.w3schools.com/css/css3_shadows.asp */
  -moz-box-shadow: 10px4px 10px4px 3px grey;
  -webkit-box-shadow: 10px4px 10px4px 3px grey;
}

HTML:

var div_circle = L.divIcon({ className: 'circle'})
var marker = L.marker([51.509, -0.08], {icon: div_circle} ).addTo(mymap);

Here's aan (updated) demo: https://jsfiddle.net/Lna57q3m/https://jsfiddle.net/Lna57q3m/1/

A very similar answer to IvanSanchez, but you could switch from L.CircleMarker and use L.DivIcon to instead create your circle completely with CSS:

.circle {
  background: #0000ff; /* color of the circle */
  border-radius: 50%; /* make the div a circular shape */
  box-shadow: 10px 10px 3px grey; /* see http://www.w3schools.com/css/css3_shadows.asp */
  -moz-box-shadow: 10px 10px 3px grey;
  -webkit-box-shadow: 10px 10px 3px grey;
}

HTML:

var div_circle = L.divIcon({ className: 'circle'})
var marker = L.marker([51.509, -0.08], {icon: div_circle} ).addTo(mymap);

Here's a demo: https://jsfiddle.net/Lna57q3m/

A very similar answer to IvanSanchez, but you could switch from L.CircleMarker and use L.DivIcon to instead create your circle completely with CSS:

.circle {
  background: #0000ff; /* color of the circle */
  border-radius: 50%; /* make the div a circular shape */
  box-shadow: 4px 4px 3px grey; /* see http://www.w3schools.com/css/css3_shadows.asp */
  -moz-box-shadow: 4px 4px 3px grey;
  -webkit-box-shadow: 4px 4px 3px grey;
}

HTML:

var div_circle = L.divIcon({ className: 'circle'})
var marker = L.marker([51.509, -0.08], {icon: div_circle} ).addTo(mymap);

Here's an (updated) demo: https://jsfiddle.net/Lna57q3m/1/

Source Link

created Feb 2, 2017 at 14:05

user2441511

A very similar answer to IvanSanchez, but you could switch from L.CircleMarker and use L.DivIcon to instead create your circle completely with CSS:

.circle {
  background: #0000ff; /* color of the circle */
  border-radius: 50%; /* make the div a circular shape */
  box-shadow: 10px 10px 3px grey; /* see http://www.w3schools.com/css/css3_shadows.asp */
  -moz-box-shadow: 10px 10px 3px grey;
  -webkit-box-shadow: 10px 10px 3px grey;
}

HTML:

var div_circle = L.divIcon({ className: 'circle'})
var marker = L.marker([51.509, -0.08], {icon: div_circle} ).addTo(mymap);

Here's a demo: https://jsfiddle.net/Lna57q3m/