Remove popup code from color example
This commit is contained in:
@@ -6,8 +6,5 @@ docs: >
|
|||||||
Example assigning a custom color to an icon. The features in this examples are all using the same image with the different colors coming from the javascript file
|
Example assigning a custom color to an icon. The features in this examples are all using the same image with the different colors coming from the javascript file
|
||||||
tags: "vector, style, icon, marker"
|
tags: "vector, style, icon, marker"
|
||||||
resources:
|
resources:
|
||||||
- https://code.jquery.com/jquery-1.11.2.min.js
|
|
||||||
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
|
|
||||||
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
|
|
||||||
---
|
---
|
||||||
<div id="map" class="map"><div id="popup"></div></div>
|
<div id="map" class="map"></div>
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
goog.require('ol.Feature');
|
goog.require('ol.Feature');
|
||||||
goog.require('ol.Map');
|
goog.require('ol.Map');
|
||||||
goog.require('ol.Overlay');
|
|
||||||
goog.require('ol.View');
|
goog.require('ol.View');
|
||||||
goog.require('ol.geom.Point');
|
goog.require('ol.geom.Point');
|
||||||
goog.require('ol.layer.Tile');
|
goog.require('ol.layer.Tile');
|
||||||
@@ -70,42 +69,3 @@ var map = new ol.Map({
|
|||||||
zoom: 3
|
zoom: 3
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
var element = document.getElementById('popup');
|
|
||||||
|
|
||||||
var popup = new ol.Overlay({
|
|
||||||
element: element,
|
|
||||||
positioning: 'bottom-center',
|
|
||||||
stopEvent: false
|
|
||||||
});
|
|
||||||
map.addOverlay(popup);
|
|
||||||
|
|
||||||
// display popup on click
|
|
||||||
map.on('click', function(evt) {
|
|
||||||
var feature = map.forEachFeatureAtPixel(evt.pixel,
|
|
||||||
function(feature, layer) {
|
|
||||||
return feature;
|
|
||||||
});
|
|
||||||
if (feature) {
|
|
||||||
popup.setPosition(evt.coordinate);
|
|
||||||
$(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;
|
|
||||||
}
|
|
||||||
var pixel = map.getEventPixel(e.originalEvent);
|
|
||||||
var hit = map.hasFeatureAtPixel(pixel);
|
|
||||||
map.getTarget().style.cursor = hit ? 'pointer' : '';
|
|
||||||
});
|
|
||||||
|
|||||||
Reference in New Issue
Block a user