Adding float-no-zero branch hosted build
This commit is contained in:
85
float-no-zero/examples/icon.js
Normal file
85
float-no-zero/examples/icon.js
Normal file
@@ -0,0 +1,85 @@
|
||||
var iconFeature = new ol.Feature({
|
||||
geometry: new ol.geom.Point([0, 0]),
|
||||
name: 'Null Island',
|
||||
population: 4000,
|
||||
rainfall: 500
|
||||
});
|
||||
|
||||
var iconStyle = new ol.style.Style({
|
||||
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
|
||||
anchor: [0.5, 46],
|
||||
anchorXUnits: 'fraction',
|
||||
anchorYUnits: 'pixels',
|
||||
opacity: 0.75,
|
||||
src: 'data/icon.png'
|
||||
}))
|
||||
});
|
||||
|
||||
iconFeature.setStyle(iconStyle);
|
||||
|
||||
var vectorSource = new ol.source.Vector({
|
||||
features: [iconFeature]
|
||||
});
|
||||
|
||||
var vectorLayer = new ol.layer.Vector({
|
||||
source: vectorSource
|
||||
});
|
||||
|
||||
var rasterLayer = new ol.layer.Tile({
|
||||
source: new ol.source.TileJSON({
|
||||
url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
|
||||
})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [rasterLayer, vectorLayer],
|
||||
renderer: 'canvas',
|
||||
target: document.getElementById('map'),
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
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('singleclick', function(evt) {
|
||||
var feature = map.forEachFeatureAtPixel(evt.pixel,
|
||||
function(feature, layer) {
|
||||
return feature;
|
||||
});
|
||||
if (feature) {
|
||||
var geometry = feature.getGeometry();
|
||||
var coord = geometry.getCoordinates();
|
||||
popup.setPosition(coord);
|
||||
$(element).popover({
|
||||
'placement': 'top',
|
||||
'html': true,
|
||||
'content': feature.get('name')
|
||||
});
|
||||
$(element).popover('show');
|
||||
} else {
|
||||
$(element).popover('destroy');
|
||||
}
|
||||
});
|
||||
|
||||
// change mouse cursor when over marker
|
||||
$(map.getViewport()).on('mousemove', function(e) {
|
||||
var pixel = map.getEventPixel(e.originalEvent);
|
||||
var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
||||
return true;
|
||||
});
|
||||
if (hit) {
|
||||
map.getTarget().style.cursor = 'pointer';
|
||||
} else {
|
||||
map.getTarget().style.cursor = '';
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user