Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow extra custom icon links/elements beside a layer or group node (was: Add a quick layer's data download link) #1441

Closed
nimcnaan opened this issue Mar 8, 2023 · 2 comments
Closed

Allow extra custom icon links/elements beside a layer or group node (was: Add a quick layer's data download link) #1441

nimcnaan opened this issue Mar 8, 2023 · 2 comments
Milestone
0.14.9

Comments

@nimcnaan
Copy link

nimcnaan commented Mar 8, 2023

** Lack of quick download link **
There seem to a need for a . I'm always frustrated when
we need to redirect the users to a dedicated form for such a link

Describe the solution you'd like
A small download link icon in the map layer's legend,
for selectable layers only, to get a CSV data file format.

  • It would be nice to control a data limit value, in the serverconfig.ini
  • We'll be happy to fund the time needed for this feature.

mg-layer-dowload
@jumpinjackie jumpinjackie added this to the 0.15 milestone Apr 5, 2023
@jumpinjackie jumpinjackie modified the milestones: 0.15, 0.14.9 Jun 5, 2023
jumpinjackie added a commit that referenced this issue Jun 5, 2023
@jumpinjackie
Allow custom icons to be injected into a layer or group entry of a Le…
6843ca0 
…gend component.

A viewer may be mounted with a custom legend.provideExtraLayerIconsHtml or legend. provideExtraGroupIconsHtml option which specifies a function to add extra HTML elements for a given layer or group.

The intention behind these custom icons is to serve as links for layer or group-specific functionality (eg. A download data link for a layer)

Fixes #1441
@jumpinjackie jumpinjackie changed the title Add a quick layer's data download link Allow extra custom icon links beside a layer or group node (was: Add a quick layer's data download link) Jun 8, 2023
@jumpinjackie jumpinjackie changed the title Allow extra custom icon links beside a layer or group node (was: Add a quick layer's data download link) Allow extra custom icon links/elements beside a layer or group node (was: Add a quick layer's data download link) Jun 8, 2023
@nimcnaan
Copy link
Author

nimcnaan commented Jun 9, 2023 via email •
edited

@jumpinjackie
Copy link
Owner

jumpinjackie commented Jun 14, 2023 •
edited

Once 0.14.9 releases, here's an example of the slate template HTML modified to include custom SVG icon links for a certain layer and group. Replace about:blank with the URL you want to link the icon to, using the information from the provided MapLayer or MapGroup to generate the right URL if required:

<!DOCTYPE html>
<html>
    <head>
        <title>MapGuide React Viewer</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <link rel="stylesheet" href="dist/vendor.css" type="text/css" />
        <link rel="stylesheet" href="dist/viewer.css" type="text/css" />
        <!-- Template specific css -->
        <link rel="stylesheet" href="css/slate.css" type="text/css" />
        <script type="text/javascript" src="dist/vendor.js" charset="utf-8"></script>
        <script type="text/javascript" src="dist/viewer.js" charset="utf-8"></script>
        <style type="text/css">
            /* Prevent scrollbars due to floating modal dialogs going past the bounds of the root element */
            html { overflow: hidden; }
            html, body, #map { padding: 0; margin: 0; font: 10pt Verdana, sans-serif; }
            
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script type="text/javascript">
            var el = document.getElementById("map");
            var viewer = new MapGuide.Application();
            viewer.mount(el, {
                layout: "slate",/*
                externalBaseLayers: [
                    { name: "OpenStreetMap", kind: "OSM" },
                    { name: "Stamen - Toner", kind: "Stamen", visible: true, options: { layer: "toner" } },
                    { name: "Stamen - Watercolor", kind: "Stamen", options: { layer: "watercolor" } }
                ],*/
                mapguide: {
                    agentUri: "../mapagent/mapagent.fcgi",
                    legendSettings: {
                        provideExtraLayerIconsHtml: function(options) {
                            var layer = options.item; // type: MapLayer
                            var size = options.elementSize;
                            if (layer.LayerDefinition === "Library://Samples/Sheboygan/Layers/Parcels.LayerDefinition") {
                                console.log("options", options);
                                var downloadUrl = "about:blank";
                                return [
                                `<a href="${downloadUrl}" title="Download data for this layer" target="_blank" rel="noopener">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 ${size} ${size}" enable-background="new 0 0 ${size} ${size}" xml:space="preserve">
        <g id="cloud_download_3_">
            <g>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M15,4c-0.12,0-0.24,0.03-0.36,0.04C13.83,1.69,11.62,0,9,0C5.69,0,3,2.69,3,6
                    c0,0.05,0.01,0.09,0.01,0.14C1.28,6.58,0,8.13,0,10c0,2.21,1.79,4,4,4h0.78c0.55-0.61,1.34-1,2.22-1v-2c0-1.66,1.34-3,3-3
                    s3,1.34,3,3v2c0.88,0,1.66,0.38,2.2,0.98C17.87,13.87,20,11.69,20,9C20,6.24,17.76,4,15,4z M13,15c-0.28,0-0.53,0.11-0.71,0.29
                    L11,16.59V11c0-0.55-0.45-1-1-1s-1,0.45-1,1v5.59l-1.29-1.29C7.53,15.11,7.28,15,7,15c-0.55,0-1,0.45-1,1
                    c0,0.28,0.11,0.53,0.29,0.71l3,3C9.47,19.89,9.72,20,10,20s0.53-0.11,0.71-0.29l3-3C13.89,16.53,14,16.28,14,16
                    C14,15.45,13.55,15,13,15z"/>
            </g>
        </g>
    </svg>
</a>`
                                ];
                            } else {
                                return [];
                            }
                        },
                        provideExtraGroupIconsHtml: function(options) {
                            var group = options.item; // type: MapGroup
                            var size = options.elementSize;
                            if (group.Name === "Base Map") {
                                console.log("options", options);
                                var downloadUrl = "about:blank";
                                return [
                                `<a href="${downloadUrl}" title="Download data for this group" target="_blank" rel="noopener">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 ${size} ${size}" enable-background="new 0 0 ${size} ${size}" xml:space="preserve">
        <g id="cloud_download_3_">
            <g>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M15,4c-0.12,0-0.24,0.03-0.36,0.04C13.83,1.69,11.62,0,9,0C5.69,0,3,2.69,3,6
                    c0,0.05,0.01,0.09,0.01,0.14C1.28,6.58,0,8.13,0,10c0,2.21,1.79,4,4,4h0.78c0.55-0.61,1.34-1,2.22-1v-2c0-1.66,1.34-3,3-3
                    s3,1.34,3,3v2c0.88,0,1.66,0.38,2.2,0.98C17.87,13.87,20,11.69,20,9C20,6.24,17.76,4,15,4z M13,15c-0.28,0-0.53,0.11-0.71,0.29
                    L11,16.59V11c0-0.55-0.45-1-1-1s-1,0.45-1,1v5.59l-1.29-1.29C7.53,15.11,7.28,15,7,15c-0.55,0-1,0.45-1,1
                    c0,0.28,0.11,0.53,0.29,0.71l3,3C9.47,19.89,9.72,20,10,20s0.53-0.11,0.71-0.29l3-3C13.89,16.53,14,16.28,14,16
                    C14,15.45,13.55,15,13,15z"/>
            </g>
        </g>
    </svg>
</a>`
                                ];
                            } else {
                                return [];
                            }
                        }
                    }
                }
            });
        </script>
    </body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
0.14.9
Development

No branches or pull requests
2 participants
@jumpinjackie @nimcnaan