1 | goog.require('ol.Feature');
|
2 | goog.require('ol.Map');
|
3 | goog.require('ol.Overlay');
|
4 | goog.require('ol.View');
|
5 | goog.require('ol.geom.Point');
|
6 | goog.require('ol.layer.Tile');
|
7 | goog.require('ol.layer.Vector');
|
8 | goog.require('ol.source.TileJSON');
|
9 | goog.require('ol.source.Vector');
|
10 | goog.require('ol.style.Icon');
|
11 | goog.require('ol.style.Style');
|
12 |
|
13 |
|
14 | var iconFeature = new ol.Feature({
|
15 | geometry: new ol.geom.Point([0, 0]),
|
16 | name: 'Null Island',
|
17 | population: 4000,
|
18 | rainfall: 500
|
19 | });
|
20 |
|
21 | var iconStyle = new ol.style.Style({
|
22 | image: new ol.style.Icon( ({
|
23 | anchor: [0.5, 46],
|
24 | anchorXUnits: 'fraction',
|
25 | anchorYUnits: 'pixels',
|
26 | src: 'data/icon.png'
|
27 | }))
|
28 | });
|
29 |
|
30 | iconFeature.setStyle(iconStyle);
|
31 |
|
32 | var vectorSource = new ol.source.Vector({
|
33 | features: [iconFeature]
|
34 | });
|
35 |
|
36 | var vectorLayer = new ol.layer.Vector({
|
37 | source: vectorSource
|
38 | });
|
39 |
|
40 | var rasterLayer = new ol.layer.Tile({
|
41 | source: new ol.source.TileJSON({
|
42 | url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
|
43 | crossOrigin: ''
|
44 | })
|
45 | });
|
46 |
|
47 | var map = new ol.Map({
|
48 | layers: [rasterLayer, vectorLayer],
|
49 | target: document.getElementById('map'),
|
50 | view: new ol.View({
|
51 | center: [0, 0],
|
52 | zoom: 3
|
53 | })
|
54 | });
|
55 |
|
56 | var element = document.getElementById('popup');
|
57 |
|
58 | var popup = new ol.Overlay({
|
59 | element: element,
|
60 | positioning: 'bottom-center',
|
61 | stopEvent: false,
|
62 | offset: [0, -50]
|
63 | });
|
64 | map.addOverlay(popup);
|
65 |
|
66 |
|
67 | map.on('click', function(evt) {
|
68 | var feature = map.forEachFeatureAtPixel(evt.pixel,
|
69 | function(feature) {
|
70 | return feature;
|
71 | });
|
72 | if (feature) {
|
73 | var coordinates = feature.getGeometry().getCoordinates();
|
74 | popup.setPosition(coordinates);
|
75 | $(element).popover({
|
76 | 'placement': 'top',
|
77 | 'html': true,
|
78 | 'content': feature.get('name')
|
79 | });
|
80 | $(element).popover('show');
|
81 | } else {
|
82 | $(element).popover('destroy');
|
83 | }
|
84 | });
|
85 |
|
86 |
|
87 | map.on('pointermove', function(e) {
|
88 | if (e.dragging) {
|
89 | $(element).popover('destroy');
|
90 | return;
|
91 | }
|
92 | var pixel = map.getEventPixel(e.originalEvent);
|
93 | var hit = map.hasFeatureAtPixel(pixel);
|
94 | map.getTarget().style.cursor = hit ? 'pointer' : '';
|
95 | });
|