Integrate HTML viewer in existing page

Berend Veldkamp

February 22, 2017 12:28

A few years ago I worked on a project where the Silverlight viewer was embedded in an existing application. I used the JavaScript integration module to cimmunicate with the map, e.g. plugin.Content.essentialsViewer.RunCommand("StepZoomIn", null);

 

Now I want to do a similar thing with the HTML viewer, and was wondering what the best approach is. Since it's just JavaScript in the end, I don't think it's very hard, but I can't seem to find a way to get a reference to the application or map object.

 

 

0

• 

  Zack Robison

  February 23, 2017 20:16

  Can you use an iframe?  I think that we have a few web pages with viewers living in iframes, lying around here somewhere...

  0
• 

  Permanently deleted user

  February 23, 2017 21:32

  Hi Berend,

   

  Embedding an HTML5 viewer in another page is covered in the Admin and Developer Guide in the Custom Development section (section 22.12 in the 2.7 edition). It covers both using an iframe and embedding in the entire page.

   

  You could also embed it in a div on the page. The simplest way to demo this would be to make a copy of Index.html and add a div for the viewer after the one for the splash screen, e.g.: <!-- Splash Screen Markup --> <div class="splash-overlay"> <img class="splash-pre-loader" src="Resources/Images/loader-small.gif" alt="" /> <div class="splash-plate splash-invisible"> <img class="splash-image" alt="" /> <p class="splash-paragraph">This application uses licensed Geocortex Essentials technology for the Esri<sup>&reg;</sup> ArcGIS platform. All rights reserved.</p> </div> </div> <!-- Example viewer div --> <div id="viewer_div" style="width:1024px;height:768px;float:left;border:4px solid orange;margin:10px"> You would then change the loadAndInitialize() method to specify the viewer div, e.g.: new geocortex.essentialsHtmlViewer.ViewerLoader().loadAndInitialize({hostElement:document.querySelector('#viewer_div')}); That's the quick-and-dirty version.

  0
• 

  Berend Veldkamp

  February 28, 2017 10:01

  Thanks Jordan, I don't know how I could have missed that in the documentation!

   

  One more thing: Should embedding the entire page work cross domain? I can see that all the necessary js files are loaded, the splash screen appears and disappears, but I get this error in the console: "Could not load viewer because the specified configuration file is not on the same domain as the viewer (http://name-of-gcx-server/path/to/ViewerSettings.json.js)". Do I need to have ViewerSettings.json.js on the server where the 'host page' is, or is there a way to avoid that?

   

  FYI, I have set up CORS on the machine that hosts GCX (on both the HTML Viewer and the REST endpoint), so that shouldn't be the problem.

  0
• 

  Berend Veldkamp

  February 28, 2017 10:29

  Wait, the reference to ViewerSettings is my fault. I've now set it to a proper Desktop.json.js, but I get the same error message (config file not on same domain). Is this possible at all?

   

  This is my code: new geocortex.essentialsHtmlViewer .ViewerLoader({loaderResourcePrefix: "https://gcx-server/HTML5viewer/"}) .loadAndInitialize({ debug: true, hostElement: document.querySelector('#geoweb_div'), viewerConfigUri: "https://gcx-server/Geocortex/Essentials/GeoWeb51/REST/sites/GeoStede/viewers/GeoStede/virtualdirectory/Resources/Config/Default/Desktop.json.js", onSiteInitialized: function(){alert("Initialized");} });

   

   

  0

Please sign in to leave a comment.