ad62739a6e
In addition to using const and let, this also upgrades our linter config and removes lint (mostly whitespace).
96 lines
2.3 KiB
JavaScript
96 lines
2.3 KiB
JavaScript
import Feature from '../src/ol/Feature.js';
|
|
import Map from '../src/ol/Map.js';
|
|
import Overlay from '../src/ol/Overlay.js';
|
|
import View from '../src/ol/View.js';
|
|
import Point from '../src/ol/geom/Point.js';
|
|
import TileLayer from '../src/ol/layer/Tile.js';
|
|
import VectorLayer from '../src/ol/layer/Vector.js';
|
|
import TileJSON from '../src/ol/source/TileJSON.js';
|
|
import VectorSource from '../src/ol/source/Vector.js';
|
|
import Icon from '../src/ol/style/Icon.js';
|
|
import Style from '../src/ol/style/Style.js';
|
|
|
|
|
|
const iconFeature = new Feature({
|
|
geometry: new Point([0, 0]),
|
|
name: 'Null Island',
|
|
population: 4000,
|
|
rainfall: 500
|
|
});
|
|
|
|
const iconStyle = new Style({
|
|
image: new Icon(/** @type {olx.style.IconOptions} */ ({
|
|
anchor: [0.5, 46],
|
|
anchorXUnits: 'fraction',
|
|
anchorYUnits: 'pixels',
|
|
src: 'data/icon.png'
|
|
}))
|
|
});
|
|
|
|
iconFeature.setStyle(iconStyle);
|
|
|
|
const vectorSource = new VectorSource({
|
|
features: [iconFeature]
|
|
});
|
|
|
|
const vectorLayer = new VectorLayer({
|
|
source: vectorSource
|
|
});
|
|
|
|
const rasterLayer = new TileLayer({
|
|
source: new TileJSON({
|
|
url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
|
|
crossOrigin: ''
|
|
})
|
|
});
|
|
|
|
const map = new Map({
|
|
layers: [rasterLayer, vectorLayer],
|
|
target: document.getElementById('map'),
|
|
view: new View({
|
|
center: [0, 0],
|
|
zoom: 3
|
|
})
|
|
});
|
|
|
|
const element = document.getElementById('popup');
|
|
|
|
const popup = new Overlay({
|
|
element: element,
|
|
positioning: 'bottom-center',
|
|
stopEvent: false,
|
|
offset: [0, -50]
|
|
});
|
|
map.addOverlay(popup);
|
|
|
|
// display popup on click
|
|
map.on('click', function(evt) {
|
|
const feature = map.forEachFeatureAtPixel(evt.pixel,
|
|
function(feature) {
|
|
return feature;
|
|
});
|
|
if (feature) {
|
|
const coordinates = feature.getGeometry().getCoordinates();
|
|
popup.setPosition(coordinates);
|
|
$(element).popover({
|
|
'placement': 'top',
|
|
'html': true,
|
|
'content': feature.get('name')
|
|
});
|
|
$(element).popover('show');
|
|
} else {
|
|
$(element).popover('destroy');
|
|
}
|
|
});
|
|
|
|
// change mouse cursor when over marker
|
|
map.on('pointermove', function(e) {
|
|
if (e.dragging) {
|
|
$(element).popover('destroy');
|
|
return;
|
|
}
|
|
const pixel = map.getEventPixel(e.originalEvent);
|
|
const hit = map.hasFeatureAtPixel(pixel);
|
|
map.getTarget().style.cursor = hit ? 'pointer' : '';
|
|
});
|