JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Seleccionar POI</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" />
<![endif]-->
</head>
<body>
<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<div id="map" style="width: 600px; height: 250px"></div>
<div id="debug" style="width: 800px; height: 30px; border-style:solid; border-width:1px; margin-top:10px;"></div>
</body>
</html>
JavaScript
var map = L.map('map').setView([51.508, -0.0944], 15);
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
maxZoom: 17
}).addTo(map);
var defaultIcon = L.icon({
iconUrl: 'http://leaflet.cloudmade.com/examples/baseball-marker.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
});
// icon used for mouseover, slightly bigger
var highlightIcon = L.icon({
iconUrl: 'http://leaflet.cloudmade.com/examples/baseball-marker.png',
iconSize: [36, 42],
iconAnchor: [18, 42],
popupAnchor: [0, -28]
});
var marker1 = L.marker([51.508, -0.0944], {
icon: defaultIcon,
opacity: 0.7
}).addTo(map);
marker1.bindPopup("icon one");
function setHighlightIcon(e) {
var layer = e.target;
layer.setOpacity(1.0);
layer.setIcon(highlightIcon);
}
function setDefaultIcon(e) {
var layer = e.target;
layer.setOpacity(0.7);
layer.setIcon(defaultIcon);
}
function showClickTime(e) {
var layer = e.target;
var currentTime = new Date();
document.getElementById('debug').innerHTML = "showClickTime (e.type: " + e.type + ", e.target: " + L.Util.stamp(e.target) + ") @ " + currentTime;
}
// set event listeners for the marker
marker1.on({
'mouseover': setHighlightIcon
});
marker1.on({
'mouseout': setDefaultIcon
});
marker1.on({
'click': showClickTime
});