Get absolute pixel coordinates from LatLng - leaflet

Question

I need the absolute pixel coordinates from a LatLng coordinate in Leaflet. Just to make it clear, these coordinates are the pixel distance from the upper left corner till a LatLng coordinate on the map.
I read the The pixel origin chapter from the extending Leaflet Tutorial but I don't get it. latLngToLayerPoint or project conversion methods should do it - but I don't get the real pixel position:
const pixelPoint = map.project(feature.geometry.coordinates[0], map.getZoom());
const pixelOrigin = map.getPixelOrigin();
const pixelCoord = pixelPoint.subtract(pixelOrigin);
const layerPoint = map.latLngToLayerPoint(feature.geometry.coordinates[0]);
Here is the jsfiddle with my failed tests.

Answer 1

Your projection code is not the problem, it is the data format: leaflet assumes arrays as latlon, while in the geojson it is lonlat! Try swapping or use the L.latLng object.
var freeBus = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-105.00341892242432, 39.75383843460583],
[-105.0008225440979, 39.751891803969535]
]
},
"properties": {
"popupContent": "This is a free bus line that will take you across downtown.",
"underConstruction": false
},
"id": 1
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-105.0008225440979, 39.751891803969535],
[-104.99820470809937, 39.74979664004068]
]
},
"properties": {
"popupContent": "This is a free bus line that will take you across downtown.",
"underConstruction": true
},
"id": 2
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-104.99820470809937, 39.74979664004068],
[-104.98689651489258, 39.741052354709055]
]
},
"properties": {
"popupContent": "This is a free bus line that will take you across downtown.",
"underConstruction": false
},
"id": 3
}
]
};
var map = L.map('map', {
center: [39.74739, -105],
zoom: 13
});
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.light'
}).addTo(map);
function onEachFeature(feature, layer) {
layer.bindPopup(
function(layer) {
// get pixel coordinates from first LatLng coordinate
const latlon = L.latLng(feature.geometry.coordinates[0][1], feature.geometry.coordinates[0][0]);
const pixelPoint = map.project(latlon, map.getZoom());
const pixelOrigin = map.getPixelOrigin();
const pixelCoord = pixelPoint.subtract(pixelOrigin);
const layerPoint = map.latLngToLayerPoint(latlon);
var popupContent = "<h1>Pixel coordinates</h1>";
popupContent += "<p>Point: " + pixelPoint + "</p>";
popupContent += "<p>Origin: " + pixelOrigin + "</p>";
popupContent += "<p>Diff: " + pixelCoord + "</p>";
popupContent += "<p>layerPoint: " + layerPoint + "</p>";
return popupContent;
}
);
}
L.geoJSON(freeBus, {
filter: function(feature, layer) {
if (feature.properties) {
// If the property "underConstruction" exists and is true, return false (don't render features under construction)
return feature.properties.underConstruction !== undefined ? !feature.properties.underConstruction : true;
}
return false;
},
onEachFeature: onEachFeature
}).addTo(map);
html, body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
position: absolute;
}
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" rel="stylesheet"/>
<div id='map'></div>