layout, title
| layout |
title |
| tutorial_frame |
Grid coordinates |
<style>
#info {
position:absolute;
top:0;
right:0;
width: 20em;
height: 7.5em;
background: rgba(255,255,255,.5);
z-index:500;
font: 12px Sans;
}
.crsMarker {
border-top: 2px green solid;
border-left: 2px green solid;
}
</style>
<script type='text/javascript'>
const trd = [63.41, 10.41];
const map = L.map('map', {
center: [40, 0],
zoom: 1
});
const positron = L.tileLayer('
https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '©
OpenStreetMap contributors, ©
CARTO'
}).addTo(map);
const marker = L.marker(trd).addTo(map);
const pane = map.getPane('markerPane');
const paneCorner = document.createElement('div');
paneCorner.style.width = '12px';
paneCorner.style.height = '12px';
paneCorner.style.borderTop = '2px red solid';
paneCorner.style.borderLeft = '2px red solid';
pane.appendChild(paneCorner);
marker._icon.style.border = '1px solid blue';
const crsMarker = L.marker(map.unproject([0, 0]), {
icon: L.divIcon({
className: 'crsMarker',
iconAnchor: [0, 0]
})
}).addTo(map);
const markerOffsetLine = L.polyline(
0, 0], [0, 0, {color: 'skyblue'}).addTo(map);
const iconOffsetLine = L.polyline(
0, 0], [0, 0, {color: 'blue'}).addTo(map);
function info() {
const pixelOrigin = map.getPixelOrigin();
const markerPixelCoords = map.project(trd, map.getZoom());
const markerAnchor = marker.options.icon.options.iconAnchor;
const markerOffset = L.DomUtil.getPosition(marker._icon);
document.getElementById('info').innerHTML =
'
CRS origin: 0,0
' +
`
px origin: Δ${pixelOrigin.x},${pixelOrigin.y}
` +
`
marker px coords:${markerPixelCoords.x.toFixed(2)},${markerPixelCoords.y.toFixed(2)}
` +
`
marker anchor: Δ${markerAnchor[0]},${markerAnchor[1]}
` +
`
marker pane offset: Δ${markerOffset.x},${markerOffset.y}
`;
markerOffsetLine.setLatLngs([map.unproject(pixelOrigin), map.unproject(pixelOrigin.add(markerOffset))]);
iconOffsetLine.setLatLngs([map.unproject(pixelOrigin.add(markerOffset)), map.unproject(pixelOrigin.add(markerOffset).subtract(markerAnchor))]);
}
map.on('load move moveend zoomend viewreset', info);
info();
</script>
