body {
margin: 0;
padding: 0;
}
h2,
h3 {
margin: 8px;
font-size: 1em;
text-align: right;
}
h3 {
font-size: 0.85em;
}
p {
font-size: 0.7em;
margin: 8px;
text-align: right;
}
/**
* Create a position for the map
* on the page */
#map {
position: absolute;
height: 1000px;
top: 0;
bottom: 0;
width: 100%;
}
/**
* Set rules for how the map overlays
* (info box and legend) will be displayed
* on the page. */
.map-overlay {
position: absolute;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 0.1);
margin-right: 20px;
font-family: Arial, sans-serif;
overflow: auto;
border-radius: 3px;
}
#features {
top: 0;
height: 250px;
margin-top: 20px;
width: 250px;
}
mapboxgl.accessToken = ‘pk.eyJ1IjoidG9tYXNhYXMiLCJhIjoiY2o3OTM4ZjZpMWhwOTJ3dDV2cWRocGUybiJ9._uMLsNz0MP3nGJ0CSFNoRg’;
var map = new mapboxgl.Map({
container: ‘tomasaas.cj7952otr1uxw2ws3rfl8kdh5-3l5rj’, // container id
style: ‘mapbox://styles/tomasaas/cj793chy57sm42qtkv3x25knn’ // replace this with your style URL
});
map.on(‘mousemove’, function(e) {
var states = map.queryRenderedFeatures(e.point, {
layers: [‘butikker-grnlandsleiret’]
});
if (states.length > 0) {
document.getElementById(‘pd’).innerHTML = ‘
‘ + states[0].properties.Butikknavn + ‘
‘ + states[0].properties.Butikktype + ‘
‘ + states[0].properties.Adresse;
} else {
document.getElementById(‘pd’).innerHTML = ‘
Før musepekeren over en butikk:
‘;
}
});
map.getCanvas().style.cursor = ‘default’;
map.fitBounds([[10.757194, 59.913202], [10.765251, 59.910108]]);