diff --git a/examples_src/measure.css b/examples_src/measure.css new file mode 100644 index 0000000000..9d0a6a317f --- /dev/null +++ b/examples_src/measure.css @@ -0,0 +1,32 @@ +.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; +} \ No newline at end of file diff --git a/examples_src/measure.html b/examples_src/measure.html index 0341173c75..d4e665967a 100644 --- a/examples_src/measure.html +++ b/examples_src/measure.html @@ -1,98 +1,21 @@ - - -
- - - - - - - -Example of using the - ol.interaction.Draw interaction for creating simple - measuring application.
- - -NOTE: If use geodesic measures is not checked, measure is done in simple way on projected plane. Earth - curvature is not taken into account
-See the measure.js source to see how this is done.
-NOTE: If use geodesic measures is not checked, measure is done in simple way on projected plane. Earth curvature is not taken into account
+tags: "draw, edit, measure, vector" +--- +Show/hide layers depending on current view resolution.
-- Zoom in twice: the MapBox layer should hide whereas the OSM layer should be shown. -
-- If you continue to zoom in, you'll see the OSM layer also disappear. -
-- The rendering of the layers are here controlled using minResolution and maxResolution options. -
-See the min-max-resolution.js source to see how this is done.
-Zoom in twice: the MapBox layer should hide whereas the OSM layer should be shown.
+If you continue to zoom in, you'll see the OSM layer also disappear.
+The rendering of the layers are here controlled using minResolution and maxResolution options.
+tags: "minResolution, maxResolution, resolution" +--- +Editing features with the modify interaction.
-This example demonstrates how the modify and select interactions can be used together. Zoom in to an area of interest and select a feature for editing. Then drag points around to modify the feature. You can preserve topology by selecting multiple features before editing (Shift+click to select multiple features).
See the modify-features.js source to see how this is done.
-This example demonstrates how the modify and select interactions can be used together. Zoom in to an area of interest and select a feature for editing.
+ Then drag points around to modify the feature. You can preserve topology by selecting multiple features before editing (Shift+click to select multiple features).
Example for testing feature modification.
-See the modify-test.js source to see how this is done.
-Example of a mouse position control, outside the map.
-See the mouse-position.js source to see how this is done.
-Use of the moveend event.
-In this example, a listener is registered for the map's moveend event. Whenever this listener is called, it updates the inputs below with the map extent in decimal degrees.
See the moveend.js source for details on how this is done.
-In this example, a listener is registered for the map's moveend event. Whenever this listener is called, it updates the inputs below with the map extent in decimal degrees.