HEXAGON

Hexagon Geospatial

Examples: Viewfinder Consumer Portal

by

Technical Evangelist

on - edited on by (1,085 Views)

Description

Viewfinder on Leaflet map adapter in the Consumer Portal. This extension creates a button in the toolbar, which activates "viewfinder" mode when clicked. When the map is clicked in the "viewfinder" mode, the "viewfinder" mode is disactivated. A viewfinder mode displays map with a hole in the topmost layer (technically it's a little different, see the implementation ), so it is possible to see what is in the layer underneath.

Browser compatibility

Chrome 35+
Firefox

It will NOT WORK ON Internet Explorer due to lack of CSS clip-path support.

Private API

This extension uses private API and leaflet API.

Installation

Add the script with the following source code to your page.

Source code

Rate this article:

Yes No

[{"id":"c_1","title":"Getting Started","items":[{"id":"1533","title":"Accessing Shared Samples","view_href":"/t5/Shared-Samples/Accessing-Shared-Samples/ta-p/1533","isArticle":true,"isUnordered":false,"items":[]}]},{"id":"c_2","title":"WebMap","items":[{"id":"1362","title":"WebMap API Code Sample","view_href":"/t5/Shared-Samples/WebMap-API-Code-Sample/ta-p/1362","isArticle":true,"isUnordered":false,"items":[]}]},{"id":"c_3","title":"GeospatialPortal","items":[{"id":"377","title":"Add Google Location API in the livesearch control","view_href":"/t5/Shared-Samples/Add-Google-Location-API-in-the-livesearch-control/ta-p/377","isArticle":true,"isUnordered":false,"items":[]},{"id":"447","title":"Custom Feature Info With Handler","view_href":"/t5/Shared-Samples/Custom-Feature-Info-With-Handler/ta-p/447","isArticle":true,"isUnordered":false,"items":[]},{"id":"448","title":"Custom Feature Info With External Service","view_href":"/t5/Shared-Samples/Custom-Feature-Info-With-External-Service/ta-p/448","isArticle":true,"isUnordered":false,"items":[]},{"id":"370","title":"Examples: Flicker","view_href":"/t5/Shared-Samples/Examples-Flicker/ta-p/370","isArticle":true,"isUnordered":false,"items":[]},{"id":"365","title":"Examples: Swipe","view_href":"/t5/Shared-Samples/Examples-Swipe/ta-p/365","isArticle":true,"isUnordered":false,"items":[]},{"id":"367","title":"Examples: Viewfinder","view_href":"/t5/Shared-Samples/Examples-Viewfinder/ta-p/367","isArticle":true,"isUnordered":false,"items":[]},{"id":"366","title":"Examples: Zoom To Feature","view_href":"/t5/Shared-Samples/Examples-Zoom-To-Feature/ta-p/366","isArticle":true,"isUnordered":false,"items":[]},{"id":"431","title":"Examples: Zoom To BBox Url","view_href":"/t5/Shared-Samples/Examples-Zoom-To-BBox-Url/ta-p/431","isArticle":true,"isUnordered":false,"items":[]},{"id":"351","title":"Solution Deployment - Custom Solution Installation","view_href":"/t5/Shared-Samples/Solution-Deployment-Custom-Solution-Installation/ta-p/351","isArticle":true,"isUnordered":false,"items":[]}]},{"id":"c_4","title":"ConsumerPortal","items":[{"id":"362","title":"Examples: Swipe ConsumerPortal","view_href":"/t5/Shared-Samples/Examples-Swipe-ConsumerPortal/ta-p/362","isArticle":true,"isUnordered":false,"items":[]},{"id":"361","title":"Examples: Viewfinder Consumer Portal","view_href":"/t5/Shared-Samples/Examples-Viewfinder-Consumer-Portal/ta-p/361","isArticle":true,"isUnordered":false,"items":[]}],"isUnordered":false},{"id":"c_5","title":"Uncategorised Samples","items":[{"id":"432","title":"Examples: Control Layers Opacity","view_href":"/t5/Shared-Samples/Examples-Control-Layers-Opacity/ta-p/432","isArticle":true,"isUnordered":false,"items":[]},{"id":"444","title":"Example: Google Geocoding","view_href":"/t5/Shared-Samples/Example-Google-Geocoding/ta-p/444","isArticle":true,"isUnordered":false,"items":[]},{"id":"368","title":"Capture Map Click Event","view_href":"/t5/Shared-Samples/Capture-Map-Click-Event/ta-p/368","isArticle":true,"isUnordered":false,"items":[]},{"id":"371","title":"Get Selected Features From The Map","view_href":"/t5/Shared-Samples/Get-Selected-Features-From-The-Map/ta-p/371","isArticle":true,"isUnordered":false,"items":[]},{"id":"446","title":"FitLayer For PSS","view_href":"/t5/Shared-Samples/FitLayer-For-PSS/ta-p/446","isArticle":true,"isUnordered":false,"items":[]},{"id":"369","title":"Examples: Adding Custom Search Result Panel Actions","view_href":"/t5/Shared-Samples/Examples-Adding-Custom-Search-Result-Panel-Actions/ta-p/369","isArticle":true,"isUnordered":false,"items":[]},{"id":"359","title":"Perform APOLLO search using drawn geometry","view_href":"/t5/Shared-Samples/Perform-APOLLO-search-using-drawn-geometry/ta-p/359","isArticle":true,"isUnordered":false,"items":[]},{"id":"430","title":"Register Google Maps","view_href":"/t5/Shared-Samples/Register-Google-Maps/ta-p/430","isArticle":true,"isUnordered":false,"items":[]},{"id":"374","title":"Switch Google Maps","view_href":"/t5/Shared-Samples/Switch-Google-Maps/ta-p/374","isArticle":true,"isUnordered":false,"items":[]},{"id":"358","title":"Perform APOLLO search using geometry from WFS","view_href":"/t5/Shared-Samples/Perform-APOLLO-search-using-geometry-from-WFS/ta-p/358","isArticle":true,"isUnordered":false,"items":[]}]}]

Overview