{"action":"created","issue":{"url":"https://api.github.com/repos/tr3vorm/cmv-projections-widget/issues/11","labels_url":"https://api.github.com/repos/tr3vorm/cmv-projections-widget/issues/11/labels{/name}","comments_url":"https://api.github.com/repos/tr3vorm/cmv-projections-widget/issues/11/comments","events_url":"https://api.github.com/repos/tr3vorm/cmv-projections-widget/issues/11/events","html_url":"https://github.com/tr3vorm/cmv-projections-widget/issues/11","id":88495133,"number":11,"title":"Possible workaround for State Plane Projections","user":{"login":"kcarrier","id":3790134,"avatar_url":"https://avatars.githubusercontent.com/u/3790134?v=3","gravatar_id":"","url":"https://api.github.com/users/kcarrier","html_url":"https://github.com/kcarrier","followers_url":"https://api.github.com/users/kcarrier/followers","following_url":"https://api.github.com/users/kcarrier/following{/other_user}","gists_url":"https://api.github.com/users/kcarrier/gists{/gist_id}","starred_url":"https://api.github.com/users/kcarrier/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kcarrier/subscriptions","organizations_url":"https://api.github.com/users/kcarrier/orgs","repos_url":"https://api.github.com/users/kcarrier/repos","events_url":"https://api.github.com/users/kcarrier/events{/privacy}","received_events_url":"https://api.github.com/users/kcarrier/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":8,"created_at":"2015-06-15T17:52:18Z","updated_at":"2015-10-20T20:59:00Z","closed_at":null,"body":"https://gist.github.com/kcarrier/6fd85c8ecc9768ecaee6\r\n\r\nThis tooks some work for newbie like me. Basically I found epsg.io did not return the correct results. More specifically because we are in US-FT. The trick, I think, was to get the returned coordinates in WGS84 from the map click which I found this is a utility within the Esri JS API to do this ('esri/geometry/webMercatorUtils').\r\n\r\nOnce I got the coordinates returned in WGS84 from WMAS then things started getting a little easier. @tmcgee mentioned in another post that he though epsg.io better maintained their spatial references, in my case this did not appear to correct, could be a special case I do not know.\r\n\r\nWhat I did was added a call to spatialreference.org by building the url string, capturing the text from the page and adding that to a GET request. Then I took that returned string and passed it into the proj4 function so I could be assured I was passing the correct params.\r\n\r\nI also found if the results are returned in WGS84 you can simplify the call within proj4.\r\n\r\nLet me know if you can test this and your results. "},"comment":{"url":"https://api.github.com/repos/tr3vorm/cmv-projections-widget/issues/comments/149701183","html_url":"https://github.com/tr3vorm/cmv-projections-widget/issues/11#issuecomment-149701183","issue_url":"https://api.github.com/repos/tr3vorm/cmv-projections-widget/issues/11","id":149701183,"user":{"login":"slowe71","id":12254646,"avatar_url":"https://avatars.githubusercontent.com/u/12254646?v=3","gravatar_id":"","url":"https://api.github.com/users/slowe71","html_url":"https://github.com/slowe71","followers_url":"https://api.github.com/users/slowe71/followers","following_url":"https://api.github.com/users/slowe71/following{/other_user}","gists_url":"https://api.github.com/users/slowe71/gists{/gist_id}","starred_url":"https://api.github.com/users/slowe71/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/slowe71/subscriptions","organizations_url":"https://api.github.com/users/slowe71/orgs","repos_url":"https://api.github.com/users/slowe71/repos","events_url":"https://api.github.com/users/slowe71/events{/privacy}","received_events_url":"https://api.github.com/users/slowe71/received_events","type":"User","site_admin":false},"created_at":"2015-10-20T20:58:59Z","updated_at":"2015-10-20T20:58:59Z","body":"Thanks @kcarrier / @tmcgee.  Here is my code.  It's the code that kcarrier posted with the change from  3735 to 2273:\r\n\r\n\r\n\r\ndefine([\r\n    'dojo/_base/declare',\r\n    'dijit/_WidgetBase',\r\n    'dijit/_TemplatedMixin',\r\n    'dijit/_WidgetsInTemplateMixin',\r\n    'dojox/grid/DataGrid',\r\n    'dojo/data/ItemFileWriteStore',\r\n    'dojo/_base/lang',\r\n    'dojo/topic',\r\n    'dojo/aspect',\r\n    'esri/layers/GraphicsLayer',\r\n    'esri/graphic',\r\n    'esri/renderers/SimpleRenderer',\r\n    'esri/symbols/PictureMarkerSymbol',\r\n    'esri/graphicsUtils',\r\n    'esri/geometry/Point',\r\n    'esri/SpatialReference',\r\n    'esri/geometry/Extent',\r\n    'esri/geometry/webMercatorUtils',\r\n    'dijit/registry',\r\n    '//cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.3/proj4.js',\r\n    'dojo/text!./Projection/templates/Projection.html',\r\n    'xstyle/css!./Projection/css/Projection.css'\r\n], function (\r\n    declare,\r\n    _WidgetBase,\r\n    _TemplatedMixin,\r\n    _WidgetsInTemplateMixin,\r\n    DataGrid, ItemFileWriteStore,\r\n    lang, topic, aspect,\r\n    GraphicsLayer, Graphic, SimpleRenderer, PictureMarkerSymbol, graphicsUtils, Point, SpatialReference, Extent, webMercatorUtils, registry,\r\n    proj4,\r\n    template\r\n) {\r\n    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {\r\n        map: null,\r\n        widgetsInTemplate: true,\r\n        templateString: template,\r\n        baseClass: 'gis_ProjectionDijit',\r\n        // proj4BaseURL default: http://spatialreference.org/ (no ssl) or //epsg.io/, or /local/folder/ \r\n        proj4BaseURL: '//epsg.io/',\r\n        //  options are ESRI, EPSG and SR-ORG\r\n        // See http://spatialreference.org/ for more information\r\n        baseProjection: null,\r\n        proj4Catalog: 'EPSG', // case sensitive!\r\n\r\n        postCreate: function () {\r\n            this.inherited(arguments);\r\n\r\n            var map = this.map;\r\n            if (!map) {\r\n                console.log('MapInfo error::a map reference is required');\r\n                this.destroy();\r\n                return;\r\n            }\r\n\r\n            if (!window.proj4) {\r\n                window.proj4 = proj4;\r\n            }\r\n\r\n            this.pointSymbol = new PictureMarkerSymbol(require.toUrl('gis/dijit/Projection/images/crosshair32.png'), 32, 32);\r\n            this.pointGraphics = new GraphicsLayer({\r\n                id: 'test_graphics',\r\n                title: 'Test'\r\n            });\r\n            this.pointRenderer = new SimpleRenderer(this.pointSymbol);\r\n            this.pointRenderer.label = 'test';\r\n            this.pointRenderer.description = 'test';\r\n            this.pointGraphics.setRenderer(this.pointRenderer);\r\n            this.map.addLayer(this.pointGraphics);\r\n\r\n            this._createProjectionGrid();\r\n\r\n            this.own(topic.subscribe('mapClickMode/currentSet', lang.hitch(this, 'setMapClickMode')));\r\n\r\n            if (this.parentWidget && this.parentWidget.toggleable) {\r\n                this.own(aspect.after(this.parentWidget, 'toggle', lang.hitch(this, function () {\r\n                    this.clearProjections();\r\n                })));\r\n            }\r\n\r\n            //initialize when map loaded\r\n            if (map.loaded) {\r\n                this._initialize(map);\r\n            } else {\r\n                map.on('load', lang.hitch(this, '_initialize', map));\r\n            }\r\n        },\r\n\r\n        setMapClickMode: function (mode) {\r\n            this.mapClickMode = mode;\r\n        },\r\n        _createProjectionGrid: function () {\r\n            var data = {\r\n                identifier: 'id',\r\n                items: []\r\n            };\r\n            for (var i = 0; i < this.projectionList.length; i++) {\r\n                data.items.push({ 'id': i, 'name': this.projectionList[i].title, 'x': '', 'y': '' });\r\n            }\r\n            this.projectionStore = new ItemFileWriteStore({ data: data });\r\n\r\n            var layout = [\r\n               { 'name': 'Name', 'field': 'name', 'width': '24%', 'noresize': 'true', styles: 'bold;text-align: left;' },\r\n               { 'name': 'x', 'field': 'x', 'width': '38%', 'noresize': 'true', 'editable': 'true', styles: 'text-align: left;' },\r\n               { 'name': 'y', 'field': 'y', 'width': '38%', 'noresize': 'true', 'editable': 'true', styles: 'text-align: left;' }\r\n            ];\r\n\r\n            this.projectionGrid = new DataGrid({\r\n                cellNavigation: false,\r\n                showHeader: true,\r\n                store: this.projectionStore,\r\n                structure: layout,\r\n                canSort: false,\r\n                singleClickEdit: true,\r\n                autoHeight: true\r\n            }, this.projectionGrid);\r\n\r\n            this.projectionGrid.on('ApplyEdit', lang.hitch(this, '_reProjection'));\r\n            this.projectionGrid.startup();\r\n        },\r\n\r\n        _initialize: function (map) {\r\n            map.on('click', lang.hitch(this, function (evt) {\r\n                if (this.mapClickMode === 'projection') {\r\n                    this._onClick(evt);\r\n                }\r\n            }));\r\n\r\n            var wkid = this.map.spatialReference.wkid;\r\n            if (wkid === 102100) { // ESRI --> EPSG\r\n                wkid = 3857;\r\n            }\r\n            this.baseProjection = this.proj4Catalog + ':' + String(wkid);\r\n            if (this.proj4BaseURL.slice(-1) != '/') {\r\n                this.proj4BaseURL += '/';\r\n            }\r\n\r\n\r\n            //load projection for each srid \r\n            for (var i = 0; i < this.projectionList.length; i++) {\r\n                var url = this.proj4BaseURL + String(this.projectionList[i].srid) + '.js';\r\n                require([url]);\r\n            }\r\n        },\r\n\r\n        _onClick: function (evt) {\r\n            var wgs84Point = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);\r\n            wgs84Point.spatialReference = new SpatialReference(4326);\r\n            this._project(wgs84Point);\r\n        },\r\n\r\n        _project: function (pnt) {\r\n            this._drawMarker(pnt);\r\n            var projectionstring = '';\r\n\r\n            for (var i = 0; i < this.projectionList.length; i++) {\r\n                var key = this.proj4Catalog + ':' + String(this.projectionList[i].srid);\r\n                var srid = String(this.projectionList[i].srid);\r\n                if (srid == '2273') {\r\n                    projectionstring = '+proj=lcc +lat_1=34.83333333333334 +lat_2=32.5 +lat_0=31.83333333333333 +lon_0=-81 +x_0=609600 +y_0=0 +ellps=GRS80 +datum=NAD83 +to_meter=0.3048 +no_defs';\r\n                }\r\n\r\n                if (srid == '4326') {\r\n                    projectionstring = '+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs';\r\n                }\r\n\r\n\r\n                var projPnt = proj4(projectionstring,[pnt.x, pnt.y]);\r\n\r\n                var item = this.projectionGrid.getItem(i);\r\n                if (proj4.defs(key)) {\r\n                    //var precision = proj4.defs(key).units == 'm' ? 2 : 7; // hack: if it ain't metres, it's degrees\r\n                    this.projectionGrid.store.setValue(item, 'x', projPnt[0].toFixed(3));\r\n                    this.projectionGrid.store.setValue(item, 'y', projPnt[1].toFixed(3));\r\n                } else {\r\n                    this.projectionGrid.store.setValue(item, 'x', 'Error');\r\n                    this.projectionGrid.store.setValue(item, 'y', 'Error');\r\n                    //item.customStyles += 'background-color:#FFB93F;'\r\n                }\r\n            }\r\n        },\r\n\r\n        _reProjection: function (rowIndex) {\r\n\r\n            var item = this.projectionGrid.getItem(rowIndex);\r\n            var wgs84str = '';\r\n            var nad83str = '';\r\n            var pnt = null;\r\n            var point = null;\r\n\r\n            if (this.projectionList[rowIndex].srid == '2273') {\r\n                wgs84str = '+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs';\r\n                nad83str = '+proj=lcc +lat_1=34.83333333333334 +lat_2=32.5 +lat_0=31.83333333333333 +lon_0=-81 +x_0=609600 +y_0=0 +ellps=GRS80 +datum=NAD83 +to_meter=0.3048 +no_defs';\r\n                pnt = proj4(nad83str, wgs84str, [item.x, item.y]);\r\n            }\r\n            if (this.projectionList[rowIndex].srid == '4326') {\r\n                wgs84str = '+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs';\r\n                pnt = proj4(wgs84str,[item.x, item.y]);\r\n            }\r\n\r\n            // move marker and project from new position\r\n            point = new Point(pnt[0], pnt[1], new SpatialReference(4326));\r\n            this._project(point);\r\n            this.zoomtoMarker(); // maybe turn this off or option\r\n        },\r\n\r\n        _drawMarker: function (pnt) {\r\n            var graphic;\r\n            this.pointGraphics.clear();\r\n            graphic = new Graphic(pnt);\r\n            this.pointGraphics.add(graphic);\r\n        },\r\n\r\n        toggleMode: function (val) {\r\n            if (val) {\r\n                this.locatePoint();\r\n            } else {\r\n                this.cancelProjection();\r\n            }\r\n        },\r\n\r\n        locatePoint: function () {\r\n            this.map.setMapCursor('crosshair');\r\n            topic.publish('mapClickMode/setCurrent', 'projection');\r\n        },\r\n\r\n        cancelProjection: function () {\r\n            this.map.setMapCursor('auto');\r\n            topic.publish('mapClickMode/setDefault');\r\n        },\r\n\r\n        clearProjections: function () {\r\n            //dojo.byId('toggleme').set('checked', false); // will raise the toggleMode event\r\n\r\n            //this.toggleMode.set('checked', false);\r\n            //dom.byId('toggleme').set('checked', false); // will raise the toggleMode event\r\n\r\n            //for (var i = 0; i < this.projectionList.length; i++) {\r\n            //    var item = this.projectionGrid.getItem(i);\r\n            //    this.projectionGrid.store.setValue(item, 'x', '');\r\n            //    this.projectionGrid.store.setValue(item, 'y', '');\r\n            //}\r\n            //this.pointGraphics.clear();\r\n            registry.byId('toggleme').set('checked', false); // will raise the toggleMode event\r\n\r\n            for (var i = 0; i < this.projectionList.length; i++) {\r\n                var item = this.projectionGrid.getItem(i);\r\n                this.projectionGrid.store.setValue(item, 'x', '');\r\n                this.projectionGrid.store.setValue(item, 'y', '');\r\n            }\r\n            this.pointGraphics.clear();\r\n        },\r\n\r\n        zoomtoMarker: function () {\r\n            var zoomExtent = null;\r\n            if (this.pointGraphics.graphics.length > 0) {\r\n                zoomExtent = this.getPointFeaturesExtent(this.pointGraphics.graphics);\r\n            }\r\n            this.map.setExtent(zoomExtent.expand(1.2));\r\n            // if there is a poinmt in the layer, then go to it. \r\n\r\n            // or read the values entered in current tab, reproject?, and zoom to\r\n        },\r\n\r\n        getPointFeaturesExtent: function (pointFeatures) {\r\n            var extent = graphicsUtils.graphicsExtent(pointFeatures);\r\n            if (extent === null && pointFeatures.length > 0) {\r\n                extent = this.getExtentFromPoint(pointFeatures[0]);\r\n            }\r\n\r\n            return extent;\r\n        },\r\n\r\n        getExtentFromPoint: function (point) {\r\n            var sz = this.pointExtentSize; // hack\r\n            var pt = point.geometry;\r\n            var extent = new Extent({\r\n                'xmin': pt.x - sz,\r\n                'ymin': pt.y - sz,\r\n                'xmax': pt.x + sz,\r\n                'ymax': pt.y + sz,\r\n                'spatialReference': {\r\n                    wkid: this.map.spatialReference.wkid\r\n                }\r\n            });\r\n            return extent;\r\n        }\r\n    });\r\n});\r\n"}}