Leaflet lat-lng to pixel

by Leo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2/leaflet-src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2/leaflet.css">
<body>
<div id="mapWrapper">
  <div id="map" ></div>
</div>
</body>

CSS

html, body, #map {
        margin: 0;
        width: 100%;
        height: 100%;
}

#mapWrapper
{
  padding: 10px;
  margin: 10px;
  width: 100%;
  height: 100%;
}

JavaScript

var map = new L.Map('map', {
                center: new L.LatLng(45.5 + 0.003,-73.5 + 0.003),
                zoom: 16
            });

L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

var polygon1 = L.polygon(
            [
              [45.5        , -73.5        ],
			        [45.5 + 0.005, -73.5        ],
              [45.5 + 0.005, -73.5 + 0.005],
              [45.5        , -73.5 + 0.005]
            ], 
            {
                fillColor: 'red', 
                fillOpacity: 1,
                "nonBubblingEvents": []
            });
map.addLayer(polygon1);

polygon1.on('click', function(e){
   var containerPoint = map.latLngToContainerPoint(e.latlng);
   var layerPoint = map.latLngToLayerPoint(e.latlng);
   console.log("container point: " + containerPoint.x + "," + containerPoint.y);
   console.log("layer point: " + layerPoint.x + "," + layerPoint.y);
   console.log("layer point from event: " + e.layerPoint.x + "," + e.layerPoint.y);
   
   console.log("contains for layer point: " + (polygon1._containsPoint(layerPoint)))
   console.log("contains for container point: " + (polygon1._containsPoint(containerPoint)))
});