Scale Input Box
Will there ever be a Scale Input Box built into the HTML5 Viewer?
-
+1
yes pleeeeease!! I realise LG would be working hard on HTML5 parity - but this is a biggie!
0 -
+100!!!
0 -
+1 for me too, already asked NSG to have this added to the must have list.
0 -
+1000 from italy!
0 -
+1
We would also really like to see this!
0 -
+1000000!!!!!
0 -
+10000²
0 -
we might be able to build a workflow that zooms to scale. i will test that today. not as cool as a widget, but i could be an i want to option.
0 -
yes i just wrote a simple workflow with a form with "canned" scales. the input to the zoomtoscale command is the scale denomenator: 1:100000 would be 100000.
you might get fancier with css or the new markdown functions. but it is possible to zoom to scale with a workflow.
j
0 -
Geocortex Viewer for HTML5 does not currently support the Scale Input Box. A new feature request has been added to our wishlist for product improvements with issue number GVH-3779 . However, it has not been prioritized or scheduled for future development as of yet. I have added you to the list of stakeholders so you are notified when this gets implemented.
--Alejandro
0 -
Hi everyone,
I’ve created a scale input box that displays the current scale, and also accepts a typed scale value and zooms to that scale when the enter key is pressed while the text box has focus:
/customer/servlet/servlet.FileDownload?file=00P6000000em1Z1EAI
It may not be exactly what you are looking for, because it overwrites the current Scale Bar:
/customer/servlet/servlet.FileDownload?file=00P6000000eluJVEAY
(Given some more time to play with this, I think we could add this beside the scale bar... but this works for us for the time being).
Sharing this in case anyone else was as desperate for this functionality as we were! (With the disclaimer that I’m very new to Geocortex, and although this seems to be working great for us... there may be a better way to implement this that I’m unaware of... feedback welcome!).
Thanks,
JessicaInstructions:
1. Make sure your scale bar is enabled (Viewer -> Map Widgets -> “Show Scale Bar”)
2. Create a javascript file with the following contents:
dojo.declare("geocortex.demos.nanaimoShowScale", 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];
var zoomValue = $('#scaleTextBox').val();
app.commandRegistry.command("ZoomToScale").execute(zoomValue);
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:
$( ".scale-bar-host" ).empty();
$( ".scale-bar-host" ).append( "<div id='scaleDisplayDiv'>1 : <input type='text' id='scaleTextBox' value='' style='width: 4.3em; height: 1.5em'></input></div>" );
},
_mapExtentChanged: function() {
//Whenever the extent has changed, update the display with the current scale:
$( "#scaleTextBox" ).val("" + parseInt(window.map.getAttribute('data-scale')) + "");
}
});
geocortex.framework.notifyLibraryDownload("nanaimoShowScale");I called ours nanaimoShowScale.js. Place the file in your equivalent of:
C:\Program Files (x86)\Latitude Geographics\Geocortex Essentials\[Default]\REST Elements\Sites\[Your site]\Viewers\Map\VirtualDirectory\Resources\Config\Default\CustomModules\3. Edit your desktop.json.js to include the following:
Under libraries, add:
{
"id": "nanaimoShowScale",
"uri": "{ViewerConfigUri}CustomModules/nanaimoShowScale.js"
}Under modules, add:
{
"libraryId": "nanaimoShowScale",
"moduleName": "nanaimoShowScale",
"moduleType": "geocortex.demos.nanaimoShowScale",
"configuration": { }
}(don’t forget a comma after the closing brackets if these are not the last item in libraries or modules)
4. In your custom Desktop.css, add:
/* nanaimoShowScale */
.scale-bar-host
{
font-weight: bold;
}
.scale-bar-container.scalebar-standout
{
width: 7.95em !important;
height: 1.70em !important;
}That should be it!
0 -
Nice Jessica,
I'll give it a go! Many thanks. I find it a bit surprising that it's not earmarked for development though...
0 -
Thanks, Jeff, that was a great idea. I wrote the workflow and added it as a button on my toolbar.
0 -
Awesome post Jessica!
I tweaked your code to add the scalebar and scale box both in the .scale-bar-host area. I also reworked it to act like the old Silverlight viewer and format the number with commas, accept commas, strip decimal parts, etc.
/customer/servlet/servlet.FileDownload?file=00P6000000eltk1EAA
Thanks!
Nick
0 -
Hi Nick, would you be able to post the tweak that allowed you to have the scale bar and input box together? Thanks in advance.
0 -
So, here's what I did to tweak Jessica's original code (note that my custom code is called "LCOGCustomShowScale")...
I really just added more code to the LCOGCustomShowScale.js file. It looks like the following (don't kill me if I didn't do this right, I am hacking my way into all this js, jQuery, and dojo stuff).
//Original code by Jessica Maple
//Modifications by Nick Seigal (see [Nick] comments)//[Nick] Added formatting functions
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 : <input type='text' id='scaleTextBox' value='' style='width: 4.3em; height: 1.5em'></input></div>" );
$( ".scale-bar-host" ).append( "<p><div id='scaleDisplayDiv'>1 : <input type='text' id='scaleTextBox' value='' style='width: 4.3em; height: 1.5em'></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");Note that this does not handle internationalization issues. Probably simpler or more elegant ways to do the string-number formatting too (e.g. see http://stackoverflow.com/questions/1990512/add-comma-to-numbers-every-three-digits-using-jquery).
Note also that I only have this tested on Desktop so far, but I think it will work fine in all form factors.
I also tweaked the css file a bit:
/* LCOGCustomShowScale */
.scale-bar-host
{
font-weight: bold;
}
.scale-bar-container.scalebar-standout
{
width: 150px !important;
height: 50px !important;
}Maybe I should have done it in em units?
Other steps to implement were the same as Jessica's.
Suggestions for improvement in reply posts are welcome.
Nick
0 -
Thanks for the post Nick. One little thing I did was remove the <p> from the line:
$( ".scale-bar-host" ).append( "<p><div id='scaleDisplayDiv'>1 : <input type='text' id='scaleTextBox' value='' style='width: 4.3em; height: 1.5em'></input></div>" );
Just to tighten up the space between the input box and the scale bar.
0 -
+1. This is critical for anyone who works with engineers! 0 -
Latitude should add this featue 0 -
+1 This should be available out of the box, as with the Silverlight viewer. This kind of functionality is fundamental to any web-based GIS solution. 0 -
+1 This is one feature that is holding us back for switching to HTML5. All my users are engineers and they can't function with out scale control. 0 -
Kudos to Jessica and Nick! It seems to only honor certain set scales, but until this function is part of the OOTB tools, this is a nice workaround. Thank you both. 0 -
According to the latest "Road Ahead" video, this feature will be available with the HTML5 Viewer, version 2.6. 0 -
I've put my scale bar into the footer, so would like to have the input box beside the scale bar rather than below it. How can I force them to be side-by-side? No matter what I try, the ScaleDisplayDiv winds up on a new line. I had already done as Mike suggested, in deleting the <P> in the $( ".scale-bar-host" ).append line. 0 -
Is the scale and extent feature near fruition? Hello? 0 -
This is available in 2.6. It displays the scale, and gives you the scales of your base cache layer as input options (HTML5 currently can only display at cached scales) 0 -
When will we have a scale input box in HTML5 that allows the user to enter any scale - not just the base cache layer scales. Has this been scheduled for development yet? We had this in Silverlight. 0 -
Hi Amy,
You can currently enter any scale for a site that does not have cached/tiled layers, but the ArcGIS JavaScript API does not support zooming to scales between cached layers for version 3.X -- the Silverlight API did support zooming to any scale, which is why the Silverlight viewer was able do this. (https://geonet.esri.com/thread/167711) It is possible to zoom to any scale using the 4.X ArcGIS JavaScript API , so the 3.0 HTML5 viewer will support this. We don't have a clear picture on when this viewer will be available -- in part because the current API (version 4.2) (https://developers.arcgis.com/javascript/latest/guide/choose-version/index.html) still lacks some key functionality , like feature editing, markup, measurement, and support for OGC and time-aware layers.0 -
Am I right in reading this post that the issue is with the underlying ArcGIS JavaScript API 3.0, which limits the scales you can zoom to to those of the underlying cached map service? I've been asked by my client to implement Jessica's code. However my client is using a cached map service. From my understanding even with this code they would still not be able to zoom to a scale that is not one of the cache's scale levels. Is this correct? 0 -
I would also like to do something with inbetween scale ranges. Having switched to streamed aerial imagery now, I no longer have my own scale ranges. Is there a more structured method perhaps outside the viewer printmap... in a workflow perhaps? 0
Please sign in to leave a comment.
Comments
30 comments