Purple dot is element being hovered on, red dot is where the mouse is.
Full repo here
Site hosted here
For whatever reason, my mouse is offset down and to the right of what it is supposedly hovering over inside of a mapbox map. It doesn’t line up. The red dot in the image is where my mouse is and the purple dot with the popup is where it is ‘hovering’ over to be selected. It persists to all elements on the map, including the other point layer and the polygon layer.
It is also not dependent on zoom level. It is offset by a fixed amount no matter what the zoom is.
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwdXNlcjAzIiwiYSI6ImNtMHpzYTFiZzAyd2cyanBrYWhpYXZsZ3gifQ.paRv0YlSRjmXUZKSMTjGEA';
const mymap = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v11',
projection: 'mercator',
center: [-122.32070, 47.61360],
zoom:10.79
});
mymap.on('load', () => {
mymap.addSource('income', {
type: 'geojson',
data: 'census_tracts_income_schools.geojson'
});
mymap.addSource('publicschools', {
type: 'geojson',
data: 'Public_Schools_Seattle.geojson'
});
mymap.addSource('privateschools', {
type: 'geojson',
data: 'Private_Schools_Seattle.geojson'
});
mymap.addLayer( {
id: 'income-layer',
type: 'fill',
source: 'income',
layout: {
'visibility': 'visible'
},
paint: {
'fill-color':['interpolate',['linear'],['get', 'B19301_per_capita_income_5YALL_B19301_001'],
24000, '#ffffcc',
50000, '#a1dab4',
75000, '#41b6c4',
100000, '#2c7fb8',
150000, '#253494'],
'fill-outline-color':'lightgrey'
}
});
mymap.addLayer( {
id: 'public-schools-layer',
type: 'circle',
source: 'publicschools',
layout: {
'visibility': 'visible'
},
paint: {
'circle-radius': 6,
'circle-color': "#ffaf0f",
'circle-stroke-width': 1,
'circle-stroke-color': 'white',
'circle-stroke-opacity': 0.6,
'circle-opacity': 0.9
}
});
mymap.addLayer( {
id: 'private-schools-layer',
type: 'circle',
source: 'privateschools',
layout: {
'visibility': 'visible'
},
paint: {
'circle-radius': 6,
'circle-color': "#cf10e0",
'circle-stroke-width': 1,
'circle-stroke-color': 'white',
'circle-stroke-opacity': 0.6,
'circle-opacity': 0.9
}
});
});
// Add click event for public schools
mymap.on('click', 'public-schools-layer', (event) => {
const features = event.features;
if (!features || !features.length) return;
const properties = features[0].properties;
// Create a popup and set its content
new mapboxgl.Popup()
.setLngLat(event.lngLat)
.setHTML(`
<h3 class="popup">Public School</h3>
<p class="popup"><strong>Name:</strong> ${properties.school_name || 'N/A'}</p>
<p class="popup"><strong>Address:</strong> ${properties.address || 'N/A'}</p>
<p class="popup"><strong>Grades:</strong> ${properties.grades || 'N/A'}</p>
`)
.addTo(mymap);
});
mymap.on('click', 'private-schools-layer', (event) => {
const features = event.features;
if (!features || !features.length) return;
const properties = features[0].properties;
// Create a popup and set its content
new mapboxgl.Popup()
.setLngLat(event.lngLat)
.setHTML(`
<h3 class="popup">Private School</h3>
<p class="popup"><strong>Name:</strong> ${properties.NAME || 'N/A'}</p>
<p class="popup"><strong>Address:</strong> ${properties.SCHOOL_STREET_ADDRESS || 'N/A'}</p>
<p class="popup"><strong>Profit/Nonprofit:</strong> ${properties.FOR_PROFIT_OR_NON_PROFIT || 'N/A'}</p>
`)
.addTo(mymap);
});
I made sure that my data was in the right projection for a mapbox mercator (EPSG:3857) in QGIS. Didn’t seem to change anything. Not sure what else it could be.
