Add tooltip to show measure + help message while drawing
This commit is contained in:
Pierre GIRAUD
@@ -9,6 +9,40 @@
|
|||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||||
<title>Measure example</title>
|
<title>Measure example</title>
|
||||||
|
<style>
|
||||||
|
.tooltip {
|
||||||
|
position: relative;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 4px;
|
||||||
|
color: white;
|
||||||
|
padding: 4px 8px;
|
||||||
|
opacity: 0.7;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.tooltip-measure {
|
||||||
|
opacity: 1;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.tooltip-static {
|
||||||
|
background-color: #ffcc33;
|
||||||
|
color: black;
|
||||||
|
border: 1px solid white;
|
||||||
|
}
|
||||||
|
.tooltip-measure:before,
|
||||||
|
.tooltip-static:before {
|
||||||
|
border-top: 6px solid rgba(0, 0, 0, 0.5);
|
||||||
|
border-right: 6px solid transparent;
|
||||||
|
border-left: 6px solid transparent;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: -6px;
|
||||||
|
margin-left: -7px;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
.tooltip-static:before {
|
||||||
|
border-top-color: #ffcc33;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
@@ -43,8 +77,6 @@
|
|||||||
</select>
|
</select>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<ol id="measureOutput" reversed></ol>
|
|
||||||
|
|
||||||
<div id="docs">
|
<div id="docs">
|
||||||
<p><i>NOTE: Measure is done in simple way on projected plane. Earth
|
<p><i>NOTE: Measure is done in simple way on projected plane. Earth
|
||||||
curvature is not taken into account</i></p>
|
curvature is not taken into account</i></p>
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
goog.require('ol.Map');
|
goog.require('ol.Map');
|
||||||
|
goog.require('ol.Overlay');
|
||||||
goog.require('ol.View');
|
goog.require('ol.View');
|
||||||
goog.require('ol.geom.LineString');
|
goog.require('ol.geom.LineString');
|
||||||
goog.require('ol.geom.Polygon');
|
goog.require('ol.geom.Polygon');
|
||||||
@@ -40,38 +41,85 @@ var vector = new ol.layer.Vector({
|
|||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Currently drawed feature
|
* Currently drawn feature.
|
||||||
* @type {ol.Feature}
|
* @type {ol.Feature}
|
||||||
*/
|
*/
|
||||||
var sketch;
|
var sketch;
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Element for currently drawed feature
|
* The help tooltip element.
|
||||||
* @type {Element}
|
* @type {Element}
|
||||||
*/
|
*/
|
||||||
var sketchElement;
|
var helpTooltipElement;
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* handle pointer move
|
* Overlay to show the help messages.
|
||||||
* @param {Event} evt
|
* @type {ol.Overlay}
|
||||||
|
*/
|
||||||
|
var helpTooltip;
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The measure tooltip element.
|
||||||
|
* @type {Element}
|
||||||
|
*/
|
||||||
|
var measureTooltipElement;
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Overlay to show the measurement.
|
||||||
|
* @type {ol.Overlay}
|
||||||
|
*/
|
||||||
|
var measureTooltip;
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Message to show when the user is drawing a polygon.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
|
var continuePolygonMsg = 'Click to continue drawing the polygon';
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Message to show when the user is drawing a line.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
|
var continueLineMsg = 'Click to continue drawing the line';
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle pointer move.
|
||||||
|
* @param {ol.MapBrowserEvent} evt
|
||||||
*/
|
*/
|
||||||
var pointerMoveHandler = function(evt) {
|
var pointerMoveHandler = function(evt) {
|
||||||
if (evt.dragging) {
|
if (evt.dragging) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
/** @type {string} */
|
||||||
|
var helpMsg = 'Click to start drawing';
|
||||||
|
/** @type {ol.Coordinate|undefined} */
|
||||||
|
var tooltipCoord = evt.coordinate;
|
||||||
|
|
||||||
if (sketch) {
|
if (sketch) {
|
||||||
var output;
|
var output;
|
||||||
var geom = (sketch.getGeometry());
|
var geom = (sketch.getGeometry());
|
||||||
if (geom instanceof ol.geom.Polygon) {
|
if (geom instanceof ol.geom.Polygon) {
|
||||||
output = formatArea(/** @type {ol.geom.Polygon} */ (geom));
|
output = formatArea(/** @type {ol.geom.Polygon} */ (geom));
|
||||||
|
helpMsg = continuePolygonMsg;
|
||||||
|
tooltipCoord = geom.getInteriorPoint().getCoordinates();
|
||||||
} else if (geom instanceof ol.geom.LineString) {
|
} else if (geom instanceof ol.geom.LineString) {
|
||||||
output = formatLength( /** @type {ol.geom.LineString} */ (geom));
|
output = formatLength( /** @type {ol.geom.LineString} */ (geom));
|
||||||
|
helpMsg = continueLineMsg;
|
||||||
|
tooltipCoord = geom.getLastCoordinate();
|
||||||
}
|
}
|
||||||
sketchElement.innerHTML = output;
|
measureTooltipElement.innerHTML = output;
|
||||||
|
measureTooltip.setPosition(tooltipCoord);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
helpTooltipElement.innerHTML = helpMsg;
|
||||||
|
helpTooltip.setPosition(evt.coordinate);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
@@ -97,29 +145,64 @@ function addInteraction() {
|
|||||||
});
|
});
|
||||||
map.addInteraction(draw);
|
map.addInteraction(draw);
|
||||||
|
|
||||||
|
createMeasureTooltip();
|
||||||
|
createHelpTooltip();
|
||||||
|
|
||||||
draw.on('drawstart',
|
draw.on('drawstart',
|
||||||
function(evt) {
|
function(evt) {
|
||||||
// set sketch
|
// set sketch
|
||||||
sketch = evt.feature;
|
sketch = evt.feature;
|
||||||
sketchElement = document.createElement('li');
|
|
||||||
var outputList = document.getElementById('measureOutput');
|
|
||||||
|
|
||||||
if (outputList.childNodes) {
|
|
||||||
outputList.insertBefore(sketchElement, outputList.firstChild);
|
|
||||||
} else {
|
|
||||||
outputList.appendChild(sketchElement);
|
|
||||||
}
|
|
||||||
}, this);
|
}, this);
|
||||||
|
|
||||||
draw.on('drawend',
|
draw.on('drawend',
|
||||||
function(evt) {
|
function(evt) {
|
||||||
|
measureTooltipElement.className = 'tooltip tooltip-static';
|
||||||
|
measureTooltip.setOffset([0, -7]);
|
||||||
// unset sketch
|
// unset sketch
|
||||||
sketch = null;
|
sketch = null;
|
||||||
sketchElement = null;
|
// unset tooltip so that a new one can be created
|
||||||
|
measureTooltipElement = null;
|
||||||
|
createMeasureTooltip();
|
||||||
}, this);
|
}, this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a new help tooltip
|
||||||
|
*/
|
||||||
|
function createHelpTooltip() {
|
||||||
|
if (helpTooltipElement) {
|
||||||
|
helpTooltipElement.parentNode.removeChild(helpTooltipElement);
|
||||||
|
}
|
||||||
|
helpTooltipElement = document.createElement('div');
|
||||||
|
helpTooltipElement.className = 'tooltip';
|
||||||
|
helpTooltip = new ol.Overlay({
|
||||||
|
element: helpTooltipElement,
|
||||||
|
offset: [15, 0],
|
||||||
|
positioning: 'center-left'
|
||||||
|
});
|
||||||
|
map.addOverlay(helpTooltip);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a new measure tooltip
|
||||||
|
*/
|
||||||
|
function createMeasureTooltip() {
|
||||||
|
if (measureTooltipElement) {
|
||||||
|
measureTooltipElement.parentNode.removeChild(measureTooltipElement);
|
||||||
|
}
|
||||||
|
measureTooltipElement = document.createElement('div');
|
||||||
|
measureTooltipElement.className = 'tooltip tooltip-measure';
|
||||||
|
measureTooltip = new ol.Overlay({
|
||||||
|
element: measureTooltipElement,
|
||||||
|
offset: [0, -15],
|
||||||
|
positioning: 'bottom-center'
|
||||||
|
});
|
||||||
|
map.addOverlay(measureTooltip);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Let user change the geometry type.
|
* Let user change the geometry type.
|
||||||
* @param {Event} e Change event.
|
* @param {Event} e Change event.
|
||||||
|
|||||||
Reference in New Issue
Block a user