I am unable to use the Google Street View widget when hosting a Proj4js file on my server. Line 60 in my code (after projCustomURL:) is a working url to the file when testing on my server, yet I continue to receive errors when attempting to use the widget. Any ideas? https://map.sccmo.org/Main/gis_dev/viewer/

Below is lines 1 - 202 of the code from StreetView.js

define([
'dojo/_base/declare',
'dijit/_WidgetBase',
'dijit/_TemplatedMixin',
'dijit/_WidgetsInTemplateMixin',
'dojo/_base/lang',
'dojo/aspect',
'dojo/topic',
'esri/layers/GraphicsLayer',
'esri/graphic',
'esri/renderers/SimpleRenderer',
'dojo/text!./StreetView/templates/StreetView.html',
'esri/symbols/PictureMarkerSymbol',
'dojo/dom-style',
'esri/geometry/Point',
'esri/SpatialReference',
'dijit/MenuItem',
'//cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.3/proj4.js',
'dojo/i18n!./StreetView/nls/resource',

'dijit/form/Button',
'xstyle/css!./StreetView/css/StreetView.css',
'gis/plugins/async!//maps.google.com/maps/api/js?v=3&sensor=false'
], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin,       lang, aspect, topic, GraphicsLayer, Graphic, SimpleRenderer, template,     PictureMarkerSymbol, domStyle, Point, SpatialReference, MenuItem, proj4, i18n) {

return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
    widgetsInTemplate: true,
    templateString: template,
    i18n: i18n,
    mapClickMode: null,

    panoOptions: {
        addressControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        linksControl: false,
        panControl: false,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
        enableCloseButton: false
    },

    // in case this changes some day
    //proj4BaseURL: 'http://spatialreference.org/',

    //  options are ESRI, EPSG and SR-ORG
    // See http://spatialreference.org/ for more information
    //proj4Catalog: 'ESPG',
    proj4Catalog: 'ESRI',

    // if desired, you can load a projection file from your server
    // instead of using one from spatialreference.org
    // i.e., http://server/projections/102642.js
    //projCustomURL: 'gis/dijit/StreetView/projection/102696.js',
    //projCustomURL: '\\1hwa-gisadpt-01/inetpub/external/Shared/102696.js',
    //projCustomURL:    'C:\inetpub\external\Main\gis_dev\viewer\projection\102696.js',
    projCustomURL:    'https://map.sccmo.org/Main/gis_dev/viewer/projection/102696.js',

    postCreate: function () {
        this.inherited(arguments);
        this.createGraphicsLayer();
        this.map.on('click', lang.hitch(this, 'getStreetView'));

        this.own(topic.subscribe('mapClickMode/currentSet', lang.hitch(this,    **strong text**'setMapClickMode')));

        if (this.parentWidget) {
            if (this.parentWidget.toggleable) {
                this.own(aspect.after(this.parentWidget, 'toggle',    lang.hitch(this, function () {
                    this.onLayoutChange(this.parentWidget.open);
                })));
            }
            this.own(aspect.after(this.parentWidget, 'resize', lang.hitch(this, function () {
                if (this.panorama) {
                    google.maps.event.trigger(this.panorama, 'resize');
                }
            })));
        }

        // spatialreference.org uses the old
        // Proj4js style so we need an alias
        // https://github.com/proj4js/proj4js/issues/23
        window.Proj4js = proj4;

        if (this.mapRightClickMenu) {
            this.addRightClickMenu();
        }
    },
    createGraphicsLayer: function () {
        this.pointSymbol = new PictureMarkerSymbol(require.toUrl('gis/dijit/StreetView/images/blueArrow.png'), 30, 30);
        this.pointGraphics = new GraphicsLayer({
            id: 'streetview_graphics',
            title: 'Street View'
        });
        this.pointRenderer = new SimpleRenderer(this.pointSymbol);
        this.pointRenderer.label = 'Street View';
        this.pointRenderer.description = 'Street View';
        this.pointGraphics.setRenderer(this.pointRenderer);
        this.map.addLayer(this.pointGraphics);
    },
    addRightClickMenu: function () {
        this.map.on('MouseDown', lang.hitch(this, function (evt) {
            this.mapRightClickPoint = evt.mapPoint;
        }));
        this.mapRightClickMenu.addChild(new MenuItem({
            label: this.i18n.rightClickMenuItem.label,
            onClick: lang.hitch(this, 'streetViewFromMapRightClick')
        }));
    },
    onOpen: function () {
        this.pointGraphics.show();
        if (!this.panorama || !this.panoramaService) {
            this.panorama = new google.maps.StreetViewPanorama(this.panoNode, this.panoOptions);
            this.panoramaService = new google.maps.StreetViewService();
        }
        if (this.panorama) {
            google.maps.event.trigger(this.panorama, 'resize');
        }
    },
    onClose: function () {
        // end streetview on close of title pane
        this.pointGraphics.hide();
        if (this.mapClickMode === 'streetview') {
            this.connectMapClick();
        }
    },
    onLayoutChange: function (open) {
        if (open) {
            this.onOpen();
        } else {
            this.onClose();
        }
    },
    placePoint: function () {
        this.disconnectMapClick();
        //get map click, set up listener in post create
    },
    disconnectMapClick: function () {
        this.map.setMapCursor('crosshair');
        topic.publish('mapClickMode/setCurrent', 'streetview');
    },
    connectMapClick: function () {
        this.map.setMapCursor('auto');
        topic.publish('mapClickMode/setDefault');
    },
    clearGraphics: function () {
        this.pointGraphics.clear();
        domStyle.set(this.noStreetViewResults, 'display', 'block');
    },
    enableStreetViewClick: function () {
        this.disconnectMapClick();
    },
    disableStreetViewClick: function () {
        this.connectMapClick();
    },
    getStreetView: function (evt, overRide) {
        if (this.mapClickMode === 'streetview' || overRide) {
            var mapPoint = evt.mapPoint;
            if (!mapPoint) {
                return;
            }

            if (this.parentWidget && !this.parentWidget.open) {
                this.parentWidget.toggle();
            }

            // convert the map point's coordinate system into lat/long
            var geometry = null,
                wkid = mapPoint.spatialReference.wkid;
            if (wkid === 102100) {
                wkid = 3857;
            }
            var key = this.proj4Catalog + ':' + wkid;
            if (!proj4.defs[key]) {
                var url = this.proj4CustomURL || this.proj4BaseURL + 'ref/' + this.proj4Catalog.toLowerCase() + '/' + wkid + '/proj4js/';
                require([url], lang.hitch(this, 'getStreetView', evt, true));
                return;
            }
            // only need one projection as we are
            // converting to WGS84 lat/long
            var projPoint = proj4(proj4.defs[key]).inverse([mapPoint.x, mapPoint.y]);
            if (projPoint) {
                geometry = {
                    x: projPoint[0],
                    y: projPoint[1]
                };
            }

            if (geometry) {
                domStyle.set(this.noStreetViewResults, 'display', 'none');
                domStyle.set(this.loadingStreetView, 'display', 'inline-block');
                this.getPanoramaLocation(geometry);
            } else {
                this.setPanoPlace = null;
                this.clearGraphics();
                domStyle.set(this.noStreetViewResults, 'display', 'block');
            }
        }

    },
up vote 2 down vote accepted

The property you should be using is proj4CustomURL not projCustomURL.

The property is misnamed in the JavaScript file. The cmv documentation for the StreetView widget shows the correct syntax.

That contributed documentation is incorrect in identifying where you should make this change. You should add these custom url and any other configurations in the widget's options in viewer.js, insteado f directly in the widget's JavaScript file. That will make future upgrades to newer versions of cmv, much easier.

This configuration is only necessary when your site is hosted using https because spatialreference.org does not support https. In the next release of cmv, we are switching to epsg.io which does support https.

  • Can't believe I didn't notice that, but thanks, that did the trick. – Jesse Hopkins Jul 29 '16 at 13:14

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.