Adding an option to share the current map view via URL – VertiGIS

Overview:
This article will show you how to share the current map extent with someone via a URL. Our thanks go out to Gerben Tiemens for the submission!

Solution:

Navigate to your site's viewer configuration folder. The file path should look something like this:

C:\Program Files (x86)\Latitude Geographics\Geocortex Essentials\Default\REST Elements\Sites\YourSite\Viewers\YourViewer\VirtualDirectory\Resources\Config\Default

Make a backup of your desktop.json.js file
Edit the original
Search for "shareOptions"
You should see something like this:

"moduleName": "Share",
        "moduleType": "geocortex.essentialsHtmlViewer.mapping.modules.share.ShareModule",
        "configuration": {
          "shareOptions": [
            {
              "id": "facebook",
              "displayName": "Facebook",
              "url": "https://www.facebook.com/sharer/sharer.php?u={ViewerUrl}",
              "iconUri": "Resources/Images/Icons/facebook-24.png"
            },
            {
              "id": "twitter",
              "displayName": "Twitter",
              "url": "https://twitter.com/intent/tweet?text={ViewerUrl}",
              "iconUri": "Resources/Images/Icons/twitter-24.png"
            },
            {
              "id": "linkedin",
              "displayName": "Linkedin",
              "url": "https://www.linkedin.com/shareArticle?ro=false&mini=true&url={ViewerUrl}",
              "iconUri": "Resources/Images/Icons/linkedin-24.png"
            },
            {
              "id": "googleplus",
              "displayName": "Google+",
              "url": "https://plus.google.com/up/?continue=https://plus.google.com/share?url={ViewerUrl}",
              "iconUri": "Resources/Images/Icons/google-plus-24.png"
            },
            {
              "id": "email",
              "displayName": "Email",
              "url": "mailto:?body={ViewerUrl}",
              "iconUri": "Resources/Images/Icons/Toolbar/contact-24.png"
            }
          ]
        },

We need to add our custom share option to the list, as follows:

"moduleName": "Share",
        "moduleType": "geocortex.essentialsHtmlViewer.mapping.modules.share.ShareModule",
        "configuration": {
          "shareOptions": [
            {
              "id": "facebook",
              "displayName": "Facebook",
              "url": "https://www.facebook.com/sharer/sharer.php?u={ViewerUrl}",
              "iconUri": "Resources/Images/Icons/facebook-24.png"
            },
            {
              "id": "twitter",
              "displayName": "Twitter",
              "url": "https://twitter.com/intent/tweet?text={ViewerUrl}",
              "iconUri": "Resources/Images/Icons/twitter-24.png"
            },
            {
              "id": "linkedin",
              "displayName": "Linkedin",
              "url": "https://www.linkedin.com/shareArticle?ro=false&mini=true&url={ViewerUrl}",
              "iconUri": "Resources/Images/Icons/linkedin-24.png"
            },
            {
              "id": "googleplus",
              "displayName": "Google+",
              "url": "https://plus.google.com/up/?continue=https://plus.google.com/share?url={ViewerUrl}",
              "iconUri": "Resources/Images/Icons/google-plus-24.png"
            },
            {
              "id": "email",
              "displayName": "Email",
              "url": "mailto:?body={ViewerUrl}",
              "iconUri": "Resources/Images/Icons/Toolbar/contact-24.png"
            },
            {
              "id": "copylink",
              "displayName": "Copy Map Link",
              "url": "javascript:prompt(\"Copy Map URL\",\"{ViewerUrl}\");e:preventDefault();",
              "iconUri": "Resources/Images/Icons/Toolbar/contact-24.png"
            }
          ]
        },

Notice the new id at the bottom that looks like this:

            {
              "id": "copylink",
              "displayName": "Copy Map Link",
              "url": "javascript:prompt(\"Copy Map URL\",\"{ViewerUrl}\");e:preventDefault();",
              "iconUri": "Resources/Images/Icons/Toolbar/contact-24.png"
            }

Note: Make sure you add a comma to the end of the previous element. This is JSON notation for a separator between list items!

Save the file
Reload your site
Select the share tool from your toolbar
Select "Copy Map Link"
You should see a popup box with a URL you can manually copy and share. The URL will zoom to your current extent, and activate the layer theme you currently have active.

Note: Most browsers do not let you copy text to the clipboard with Javascript (which is what we are using here), so you still need to manually copy the contents of the alert box before you can paste them somewhere else.

Related articles