When I have two externalComponents the second one fails. Can't get both Streetview and Maps to work together

Permanently deleted user

5. Juni 2017 20:22

Are we sure this is Geocortex and not Google? I'm also having issues today, but I already had two - Street View and Bing - and both were working. I recently went from 2.8 to 2.8.2. Today I've had two calls about Street View not working. I tried removing the Bing, but it still errors out...

0

Permanently deleted user

5. Juni 2017 21:33

Hi Justin and Mike,

I just tested the instructions in the linked post, and it seems to work just fine for me. Here's a couple of things you may want to check:

1) Justin, since you just added the new map, maybe double check your desktop.json.js file to make sure you didn't miss a comma when adding the googleMaps entry to the ExternalComponents list in the ExternalComponentViewModel. Since your top entry works, and the bottom entry doesn't, I think this is likely the culprit. If you could post your googleMaps.html file, and the section of your desktop.json.js file that you modified, that would really help!

2) Mike, yours is a little more tricky. Do you see anything in the browser console when you load the linked maps? Since I can connect, I'm confident this is not an issue with Google Maps.

I hope these will help you guys get started! Please let me know how your troubleshooting goes! If you'd like some direct assistance, please open a support case, and we can set up a screen share.

Thanks,

Danny

0

Permanently deleted user

5. Juni 2017 22:47

Mine is a bit different from Justin's - instead of getting the gray screen, I'm getting a 404 error - file not found. You can see this when you do an identify on a parcel, and then choose the link in the result:

https://maps.srcity.org/Html5Viewer/Index.html?viewer=parcel

0

Permanently deleted user

5. Juni 2017 22:57

Hey Mike,

In your case, can you please confirm that the GoogleMaps.html file exists in your wwwroot folder? From the look of your URL, I think the path should be:

C:\inetpub\wwwroot\Html5Viewer\Resources\3rdPartyMaps\GoogleMaps.html

Thanks!

Danny

0

Justin Kraemer

6. Juni 2017 12:57

Hi Danny,

Thank you for the reply. The externalComponents list is not a missing comma, because as you can see here, there is one between the two items:

"viewModels": [
          {
            "id": "ExternalComponentViewModel",
            "type": "geocortex.essentialsHtmlViewer.mapping.modules.integration.ExternalComponentViewModel",
            "configuration": {
              "containerRegionName": "ExternalComponentRegion",
              "containerRegionType": "geocortex.framework.ui.DivStackRegionAdapter",
              "headerIsVisible": true,
              "showXButton": true,
              "showMaximizeButton": true,
              "resizeY": true,
              "selectorIconUri": "Resources/Images/Icons/Toolbar/map-24.png",
              "selectorText": "@language-integration-selector-text",
              "statusText": "@language-integration-viewpoint-indicator-desc",
              "defaultComponents": [],
              "externalComponents": [
                {
                  "id": "googleMaps",
                  "displayName": "Google Street View",
                  "uri": "Resources/3rdPartyMaps/GoogleMapsSV.html",
                  "viewpointIndicatorUri": "Resources/Images/Icons/location-direction-blue-32.png"
                },
				{
                  "id": "googleMaps",
                  "displayName": "Google Maps™",
                  "uri": "Resources/3rdPartyMaps/GoogleMaps.html",
                  "viewpointIndicatorUri": "Resources/Images/Icons/location-direction-blue-32.png"
                }
              ]
            }
          }
        ]

The GoogleMapsSV.html in the above is simple a renaming of the original GoogleMaps.html that existed when I had only Streetview. I appended "SV" so I could have a separate GoogleMaps.html specifically for Google Maps. It bothers me I need two files to support both Maps and Streetview, but here's what I have in GoogleMaps.html (from which I removed the actual key for this post):

<!DOCTYPE html>
<html>
<head>
    <title>Google Maps</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link href="3rdParty.css" rel="stylesheet" type="text/css" />
	<link href="https://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=<my key was here>&callback=initMap" type="text/javascript"></script>
    
    <script src="../Scripts/Bridge.js"></script>
    <script src="ThirdPartyMap.js"></script>
    <script type="text/javascript">
        /*
        * jQuery throttle / debounce - v1.1 - 3/7/2010
        * http://benalman.com/projects/jquery-throttle-debounce-plugin/
        * Copyright (c) 2010 "Cowboy" Ben Alman
        * Dual licensed under the MIT and GPL licenses.
        * http://benalman.com/about/license/
        */
        (function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);
    </script>
	
    <script type="text/javascript">

       
        var map;
        var currentZoom = 10;
        var isReady = false;
		
        var thirdPartyMap = new geocortex.essentialsHtmlViewer.integration.ThirdPartyMap("googleMaps",
            initializeMap,
            getMapViewpointParams,
            handleViewerPositionUpdatedEvent,
            handleViewpointIndicatorUpdatedEvent);

        /**
         * Initializes the google map.
         */
        function initializeMap() {
		
            var mapOptions = {
                zoom: currentZoom,
				mapTypeId: google.maps.MapTypeId.HYBRID
            };

            map = new google.maps.Map(document.getElementById("map-container"), mapOptions);
            
        }

        /**
         * Gets the current position of the google map.
         */
        function getMapViewpointParams() {
		
            var pos = map.getCenter();
            var scale = thirdPartyMap.zoomLevelToScale(map.getZoom());
			
            return {
                center: {
                    x: pos.lng(),
                    y: pos.lat()
                },
                scale: scale
            };
        }

        /**
         * Updates the google map to match the viewer.
         */
        function handleViewerPositionUpdatedEvent(arg) {
            if (!isReady) {
                // Add handlers after we have received our first position
				google.maps.event.addListener(map,'bounds_changed', function() {
                    thirdPartyMap.handleViewpointChanged();
                });
                isReady = true;
            }

			
            currentZoom = thirdPartyMap.scaleToZoomLevel(arg.scale);
			var ltlng = new google.maps.LatLng( arg.position.y,arg.position.x)
			map.setCenter(ltlng);
			map.setZoom(currentZoom);
			
        }

        /**
         * Updates the google map to match the viewpoint indicator position.
         */
        function handleViewpointIndicatorUpdatedEvent(arg) {
			var ltlng = new google.maps.LatLng(arg.y,arg.x)
			map.setCenter(ltlng);
        }

    </script>
</head>
<body>
    <ul class="integration-panel-actions">
        <li class="panel-action-button">
            <button class="viewpoint-indicator viewpoint-indicator-bing" title="Viewpoint Indicator"></button>
        </li>
        <li class="panel-action-button">
            <button id="centerButton" class="center-map" title="Center this map to the viewer"></button>
        </li>
        <li class="panel-action-button">
            <button id="syncButton" class="sync-toggle-off" title="Synchronize Maps"></button>
        </li>
        <li class="panel-action-button">
            <button id="dockButton" class="window-popout" title="Open in new window"></button>
        </li>
        <li class="panel-action-button">
            <button id="closeButton" class="window-close" title="Close this map view"></button>
        </li>
    </ul>
    <div id="map-container" class="map-container"></div>
</body>
</html>

So I'm puzzled that Maps and Streeview display properly when just one of them is in externalComponents. Let me know if you need to see GoogleMapsSV.html. The only thing I changed in that one aside from renaming was to add the same key I obtained for Maps. Streetview worked fine before I did this, and still does since, so long as Streetview is alone in externalComponents.

0

Permanently deleted user

6. Juni 2017 14:52

Danny, yes that file was missing, and after I copied it back it is working again. Thanks!

Is there anything else from the inetpub/wwwroot/html5Viewer folder that would not have been copied over during the upgrade to 2.8.2?

0

Permanently deleted user

6. Juni 2017 15:24

Hi Justin and Mike,

Justin, can you please try setting the top ID to something different? Both entries are using the same ID ("googleMaps"), which I think may be causing issues. Other than that, your code looks OK. If that does not work, can you please open a support case so we can assist you?

Mike, I'm glad to hear that it's working! Usually the only files that are replaced during the upgrade are the third party maps, and the index.html files. Sometimes other files can be replaced too, depending on how much customization your did to your viewer application. You can always find the replaced files in the following directory after an upgrade:

C:\Program Files (x86)\Latitude Geographics\Geocortex Essentials\Default\Backups

Thanks!

Danny

0

Permanently deleted user

6. Juni 2017 15:26

Sorry, let me amend that to say that all the files are replaced during an upgrade, but the only ones that usually have user customization that may be overwritten are the ones I mentioned in my previous post.

0

Permanently deleted user

6. Juni 2017 15:35

So, I suggestion/question about External Maps. I'm removing Bing Maps, since it is not used that much, but when Street View is open, there is still a Select Map down arrow on the new window, even though there are no other options - is there a way to remove that, or could it be added as an improvement to not show the arrow when there is only one option?

0

Justin Kraemer

6. Juni 2017 15:49

Danny when I made the Streetview id googleMapsSV, then Maps displayed, but Streetview did not. Seems the only id value it accepts is googleMaps, because if I rename Maps id, it refuses to render. I was going to ask where else I must change it, but found that myself. In my GoogleMapsSV.html, I changed the thirdPartyMap variable to "googleMapsSV" to match its id in externalComponents and reloaded the viewer. Voila! problem solved! Thanks so much!

0

Permanently deleted user

6. Juni 2017 16:34

Hi Mike and Justin,

You bet Mike, I don't see why not! Can you please submit your suggestion to the Ideas section, so it can be voted on?

That's great Justin, I'm glad you got it working!

Cheers,

Danny

0

Permanently deleted user

23. Juli 2018 18:02

Hi all,

I am noticing a very similar issue after uppgrading our sandbox to e4.10 gvh2.11. Google Maps ends up with just a grey box if implemented with a second external component. I am using the same Google Maps html as above. Street View always works. Google Maps will work fine if implemented by itself.

Our production sites at e4.7.1 gvh2.8.2 work perfect with 2 externals at the same time (streetview & google maps).

I have ensured my ids are unique in the viewer's externalComponents and match in the html as Justin suggested above.

Thanks,

Dave

0

When I have two externalComponents the second one fails. Can't get both Streetview and Maps to work together

Kommentare

Sie haben nicht gefunden, wonach Sie suchten?