Schaalinvoerveld

21 januari 2016

Wist u dat het in GeoWeb 5.0 mogelijk is om een schaalinvoerveld toe te voegen aan de HTML5 viewer waarmee u rechtstreeks naar de gewenste schaal kunt zoomen? In de Silverlight viewer is het kiezen van een schaal standaard mogelijk met behulp van een drop-down menu of door de schaal handmatig in te voeren. Een dergelijk schaalinvoerveld kunt u ook configureren voor de HTML5 viewer: 

1. Controleer of de schaalbar geactiveerd is voor de HTML5 viewer in uw site (GeoWeb Manager > Viewer > HTML5 viewer > Map Widgets > Toon schaalbalk)

2. Maak een tekstbestand aan met de naam ‘LCOGCustomShowScale.js’ en voeg de volgende code toe:

function stripDecimalPart(nStr)

{

    nStr += '';

    p = nStr.split('.');

    iStr = p[0];

    return iStr

}

function addCommas(nStr)

{

    nStr += '';

    x = nStr.split('.');

    x1 = x[0];

    x2 = x.length > 1 ? '.' + x[1] : '';

    var rgx = /(\d+)(\d{3})/;

    while (rgx.test(x1)) {

        x1 = x1.replace(rgx, '$1' + '.' + '$2');

    }

    return x1 + x2;

}

function removeCommas(nStr)

{

    nStr += '';

    var rgx = /,/;

    while (rgx.test(nStr)) {

        nStr = nStr.replace(rgx, '');

    }

    return nStr;

}

dojo.declare("geocortex.demos.LCOGCustomShowScale", geocortex.framework.application.ModuleBase, {

    initialize: function (config) {

        if (config) {

                //subscribe to the following events:

                this.app.eventRegistry.event("MapLoadedEvent").subscribe(this, this._mapLoaded);

                this.app.eventRegistry.event("MapExtentChangedEvent").subscribe(this, this._mapExtentChanged);

                //set up the text box behaviour when the Enter key is pressed:

                var $this = $(this);

                $('#scaleTextBox').live("keypress", function(e) {

                        if (e.keyCode == 13) {

                            var app = geocortex.framework.applications[0];

                            //Nick added (removeCommas() and stripDecimalPart())

                            var zoomValue = removeCommas(stripDecimalPart($('#scaleTextBox').val()));

                            app.commandRegistry.command("ZoomToScale").execute(zoomValue);

                            //Nick added (next line)

                            $( "#scaleTextBox" ).val("" + addCommas(parseInt(window.map.getAttribute('data-scale'))) + "");

                            return false;

                        }

                });

        }

    },

    _mapLoaded: function() {

        //when the map is loaded for the first time, overwrite the scale box with the text box you will use for scale input/display:

        //Nick commented out (next two lines from Jessica)

        //$( ".scale-bar-host" ).empty();

        //$( ".scale-bar-host" ).append( "<div id='scaleDisplayDiv'>1 :&nbsp;&nbsp;<input type='text' id='scaleTextBox' value='' style='width: 4.3em; height: 1.5em'></input></div>" );

        $( ".scale-bar-host" ).append( "<div id='scaleDisplayDiv'>1 : <input type='text' id='scaleTextBox' value='' style='width: 4.3em; height: 1.8em'></input></div>" );

        //Nick added (next line)

        $( "#scaleTextBox" ).val("" + addCommas(parseInt(window.map.getAttribute('data-scale'))) + "");

    },

    _mapExtentChanged: function() {

        //Whenever the extent has changed, update the display with the current scale:

        //Nick (addCommas())

        $( "#scaleTextBox" ).val("" + addCommas(parseInt(window.map.getAttribute('data-scale'))) + "");

    }   

});

geocortex.framework.notifyLibraryDownload("LCOGCustomShowScale");

3. Ga naar de virtuele directory van uw HTML5 viewer (C:\Program Files (x86)\Latitude Geographics\Geocortex Essentials\[InstanceNaam]\REST Elements\Sites\[SiteNaam]\Viewers\Map\VirtualDirectory\Resources\Config\Default) en maak een nieuwe map aan met de naam ‘Custom Modules’

4. Sla het ‘LCOGCustomShowScale.js’ bestand op in deze map

5. Maak een reservekopie van het bestand ‘Desktop.json.js’ (C:\Program Files (x86)\Latitude Geographics\Geocortex Essentials\[InstanceNaam]\REST Elements\Sites\[SiteNaam]\Viewers\Map\VirtualDirectory\Resources\Config\Default

6. Open het bestand ‘Desktop.json.js’ en voeg de volgende code toe:

Onder ‘libraries’:

{"id": "LCOGCustomShowScale",

   "uri": "{ViewerConfigUri}CustomModules/LCOGCustomShowScale.js"

}

Onder ‘modules’:

{

  "libraryId": "LCOGCustomShowScale",

  "moduleName": "LCOGCustomShowScale",

   "moduleType": "geocortex.demos.LCOGCustomShowScale",

   "configuration": {}

}

Vergeet niet de komma achter de accolades indien het item niet het laatste item is in de libraries of modules! 

7. Open het bestand ‘Desktop.css’ (C:\Program Files (x86)\Latitude Geographics\Geocortex Essentials\[InstanceNaam]\REST Elements\Sites\[SiteNaam]\Viewers\Map\VirtualDirectory\Resources\Styles\Custom) en voeg de volgende code toe:

/* LCOGCustomShowScale */

.scale-bar-host

{

    font-weight: bold;

}

.scale-bar-container.scalebar-standout

{

    width: 150px !important;

    height: 50px !important;

}

Als u nu de HTML5 viewer opent in uw browser, verschijnt er een schaalinvoerveld. Door een schaalwaarde in te typen kunt u zoomen naar het gewenste schaalniveau.

Let op: het is alleen mogelijk om te zoomen naar de gecashte schaalniveaus van uw basiskaart. Voorbeeld: als uw basiskaart gecasht is op de schaalniveaus 1:48.000 en 1:96.000 dan kunt u niet zoomen naar schaal 1:60.000 maar wordt er gezoomd naar het dichtstbijzijnde gecashte schaalniveau (1:48.000).

Vanaf GeoWeb 5.1 komt er overigens standaard een schaalkeuzemenu en -invoerveld beschikbaar in de HTML5 viewer!

Meer informatie 

E-mail voor meer informatie over dit artikel naar .