Change content of divIcon
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet-src.js"></script>
<div id="map" ></div>
CSS
#map {
height: 400px;
}
.image-icon img {
height: 52px !important;
width: 52px !important;
border-radius: 50%;
border: solid;
border-color: green;
}
JavaScript
var lat = 46.566414;
var lng = 2.4609375;
var zoom = 5;
var map = new L.Map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 8, attribution: osmAttrib});
map.addLayer(osm);
map.setView(new L.LatLng(lat, lng), zoom);
var img = "<img src='http://photos.tripomatic.com/photo/70x70/612664395a40232133447d33247d38313138363832.jpg' />";
var marker = new L.Marker([48.862312, 2.332317], {
icon: L.divIcon({
html: img,
// Specify a class name we can refer to in CSS.
className: 'image-icon',
// Set a markers width and height.
iconSize: [52, 52]
})
});
marker.addTo(map);
var img2 = "<img src='http://photos.tripomatic.com/photo/70x70/612664395a40232133447d33247d38313138343332.jpg' />";
var icon2 = L.divIcon({
html: img2,
// Specify a class name we can refer to in CSS.
className: 'image-icon',
// Set a markers width and height.
iconSize: [52, 52]
});
setTimeout(function(){
marker.setIcon(icon2);
}, 3000);