Location Widget

[#1]

Hey everybody,

I am trying to get my feet wet with creating custom widgets for the WebApp builder, so please be kind

A while back I had created a location widget for the Javascript API and figured it might be good to do a WebApp builder version.

It is still in development, but I figured it might be a good idea to share it and see what you think.

You can see a live version HERE.

Version 1.3 (3-13-15):

- This version should work with custom basemaps.

- Added Zoom level in settings. Depending on your basemap you might need to change zoom level to 0.01. Read here for details.

Version 1.2:

-Changed the Layout to Tabs (Robert Scheitlin, GISP‌  Thanks)

-Added UTM function

Tim

[DavidBuehler]

Cool!

Not be nit picky, but is there a way to restrict the values of decimal places in the both the decimal degrees section and the degree/minute/seconds?  What I mean by that is if I enter:

If I enter: Lat 44°39'27.377"N Long 90°9'57.507"W in DMS, It would return: Lat 44.657605, Long -90.165974 for the decimal degrees or something similar.

Currently, if I were too enter Lat 44°39'27.377"N Long 90°9'57.507"W it returns: 44.657604722222224, -90.16597416666667.  If I enter decimal degrees of Lat 44.657605, Long -90.165974 the resulting DMS is Lat 44°39'27.377999999987992"N, Long 90°9'57.50640000002022"W.

Ideally, the DMS would be restricted to 3 or 4 decimal places after the seconds like Lat 44°39'27.377"N and the decimal degrees would be limited to 6 decimal places like 44.657605 or something similar. Make sense?

The other thing is can the label reflect the entered coordinate type? Or does it alway have to return the decimal degrees?

If these two things cannot be done or done easily it is no big deal because this is already way cool.  My users that may use this some day will ask me those two questions though, and I just need to know what to tell them. I appreciate what you have done thus far.

[TimWitt2]

Both things can be done, once I have some time I will change that.

[TimWitt2]

David Buehler​,

Try this one: Dropbox - Location.zip

Tim

[DavidBuehler]

Nice. That is exactly what I was thinking. I appreciate what you have done. Are you going to continue with the other coordinate methods? Because if you do, Emergency Services can use the USNG/MGRS, and a quick check of local coordinates would be great.

[TerryGustafson]

Hey Tim,

Thought I would pick your brain on this custom widget..  I'm new to the builder so let me explain what I'm wanting to do and see what your thoughts are.  I would like the user to be able to enter 1. Lat/Long or 2. State Plain Meters Wkid 32100)  or 3. State Plane Feet Wkid (102700) and take them to that location.  I was wondering if it would be possible that when they are taken to that location it would also return the linear reference location from an sde feature class I have loaded.

Thoughts?

[TerryGustafson]

I was thinking I could use the GP service I created to return the values that are shown in the popup rather then an address?

[TimWitt2]

Terry,

I think you could do that, but I haven't worked with GP services yet in javascript. But there is a method: Geoprocessor | API Reference | ArcGIS API for JavaScript

Tim

[TimWitt2]

You could always add another Tab for a 2nd State Plane box. With mine you can only run one.

[TerryGustafson]

Like I said I’m new so going to try and make it work. I did add a new button but have not been able to get either state plane table to return the correct values.

[TerryGustafson]

The title for the tabs is to large how do I format that? Through the css for the widget?

[TimWitt2]

Add the following to the style.css found in the css folder of the widget:

.jimu-tab>.control>.tab {

  font-size: 8px;

}

[TerryGustafson]

That is great.. I used the developer tool to see the results and now I know how to create a custom style.. Thank you very much..

[TimWitt2]

Once you have finished your customization, let me know!

[TerryGustafson]

Will do… I’m just a beginner so my code will probably look like hieroglyphics.. ☺ Thanks again for your help and will mark the response helpful..

[TerryGustafson]

How is the wkid set in the input text box? I set the default for one but the second tab I set up show a greyed out wkid in it..

[TimWitt2]

Can you show me a screenshot?

[TerryGustafson]

So I have the meters set to 32100 and it return the correct value but the feet shows wkid. So I don’t think my st pln feet is returning the correct value.

[TerryGustafson]

I changed the setting html to reflect the new “102700” wkid but it did not change.. Do I need to change something in the setting.js file as well?

[TimWitt2]

Is this for your new tab, or the tab I have created? Did you also change the following value in the config.json? "WKID":"2236",

[TerryGustafson]

Yes this is for my new tab.. I did change the wkid in the config.json file. The wkid that is in the config.json file is the one that shows up and calculates correctly… Do I need to have another wkid in the confgi.json for the new tab?

[TimWitt2]

That wkid only pertains to my tab.

For the new tab you need to alter the following files:

settings.js(This is where you tell your widget where to get the WKID2 if it is changed or where you get the WKID2 if it isn;t changed, namely from the config.json)

settings.html(this is where you create the Projected WKID2 so that you can adjust the value of your 2nd tab)

config.js (this is where you get the default value from name it WKID2)

widget.html (thats where you added the new tab)

widget.js (thats where you do things with your new tab)

[TerryGustafson]

I’m still struggling with this, can you tell me what the

"AddressURL" Is this used to find the location?

"GridURL": Is this used to return that data string to the popup?

"GeometryURL"

Do in the config.json file?

[TimWitt2]

Those are the default values in the configuration box.

Here is a screenshot: Dropbox - usng.png

[TerryGustafson]

Ok, here is how mine looks.. Still not sure I understand what the Address Locater does versus the Geometry service.

[TimWitt2]

The Address locator is used to find the nearest address to the point.

[TerryGustafson]

I have been tweaking your location widget and I’m looking at the console and I get the following error. Does it mean anything to you?

[CaryJenkins]

Tim awesome widget.  Thanks for you efforts.  Would it be hard to add in Degrees Decimal Minutes?  Our fire guys are getting coordinates from the airplanes in Degrees Decimal Minutes and it would be nice if they could enter that directly into the widget.

[TimWitt2]

Hey Cary,

It can be added, but it will take some time.

This is the format you are looking for? 40º 05.3’

Tim

[TerryGustafson]

Cary,

Can you give me a set of cords you would want to plot?

[CaryJenkins]

Yes that is it. Thanks for taking the time!

>>> Tim Witt 09/02/15 12:37 PM >>>

• a body

{font-family: Helvetica, Arial, sans-serif;-webkit-text-size-adjust:

100%;}/* Webkit */h1, h2, h3, h4, h5, h6, p, hr {-webkit-margin-before:

0;-webkit-margin-after: 0;-webkit-margin-start: 0;-webkit-margin-end:

0;}.button td {background-image: -moz-linear-gradient(top, #75B7E3 0%,

#5498D6 50%, #408BD0 51%, #387AC8 100%) !important;background-image:

-webkit-gradient(linear, left top, left bottom, color-stop(0%,#75B7E3),

color-stop(50%,#5498D6), color-stop(51%,#408BD0),

color-stop(100%,#387AC8)) !important;-webkit-box-shadow: inset 0 1px 0

#74b9de, 0 1px 3px rgba(0,0,0,.3) !important;-moz-box-shadow: inset 0

1px 0 #74b9de, 0 1px 3px rgba(0,0,0,.3) !important;}GeoNet Location

WidgetHey Cary,

It can be added, but it will take some time.

This is the format you are looking for? 40º 05.3’

Tim

Reply to this email to respond to Tim Witt's comment.

Following Location Widget in these streams: Inbox

This email was sent by GeoNet because you

are a registered user.

You may unsubscribe instantly from GeoNet, or

adjust email frequency in your email preferences

[CaryJenkins]

Sure.............. 41* 34.355 -111* 27.870

>>> Terry Gustafson 09/02/15 12:42 PM >>>

• a body {font-family: Helvetica, Arial, sans-serif;-webkit-text-size-adjust: 100%;}/* Webkit */h1, h2, h3, h4, h5, h6, p, hr {-webkit-margin-before: 0;-webkit-margin-after: 0;-webkit-margin-start: 0;-webkit-margin-end: 0;}.button td {background-image: -moz-linear-gradient(top, #75B7E3 0%, #5498D6 50%, #408BD0 51%, #387AC8 100%) !important;background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#75B7E3), color-stop(50%,#5498D6), color-stop(51%,#408BD0), color-stop(100%,#387AC8)) !important;-webkit-box-shadow: inset 0 1px 0 #74b9de, 0 1px 3px rgba(0,0,0,.3) !important;-moz-box-shadow: inset 0 1px 0 #74b9de, 0 1px 3px rgba(0,0,0,.3) !important;}GeoNet Location Widgetnew comment by Terry Gustafson View all comments on this document

Cary,

Can you give me a set of cords you would want to plot?

Reply to this email to respond to Terry Gustafson's comment. Following Location Widget in these streams: Inbox This email was sent by GeoNet because you are a registered user.

You may unsubscribe instantly from GeoNet, or adjust email frequency in your email preferences

[TerryGustafson]

Is this the correct location?

[TimWitt2]

Here is your version: Dropbox - Location2.zip

Just so you know this was created for WebApp Builder V1.1, if you have this version please test the widget and let me know if it works!

Eventually I will update my widget to go with the new WebApp builder!

[TorstenSchramm]

Thank you Tim. Perfect work

Torsten

[TimWitt2]

Torsten Schramm​ Danke

[CourtneyBarbee]

Thanks for this widget, I'm not an expert but I have been tweaking a few things in the code and it has worked great so far. There is one thing I am trying to change that I simply cannot find so I was hoping to get some help or advice. I know it is a very small thing and I thought it would be a simple one to find in the css file perhaps. On the UTM tab, there is a 'wkid List' link that I would like to try to get rid of. Ideally I'd like to get rid of the textbox next to it so the wkid isn't changeable here but that may be over my head. But in order to get rid of the wkid link... I can't find the link url anywhere to get rid of it. Am I overlooking it or could someone point me in the right direction? I appreciate any help very much!

[TimWitt2]

Hey Courtney,

You can remove this by manipulating the Widget.html and remove the following lines:

	WKID: <input id="wkidDiv" data-dojo-type="dijit/form/TextBox" value="" placeHolder="wkid" data-dojo-attach-point="wkidDiv" data-dojo-props="intermediateChanges:true" style="width: 5em;"></input>
	<a href="http://resources.arcgis.com/en/help/arcgis-rest-api/index.html#/Projected_coordinate_systems/02r3000..." target="_blank">wkid List</a>
	<br></br>

In the Widget.js remove the following line:

mapFrame.wkidDiv.value = Number(this.config.WKID);

Then add this line instead:

var wkidConfig = Number(this.config.WKID);

Lastly, do a search and replace Number(mapFrame.wkidDiv.value) with wkidConfig

Hope this helps!

Tim

[CourtneyBarbee]

Thank you for taking the time to help! This is exactly what I was looking for. I appreciate it.

[TimWitt2]

No problem, let me know if you have any other questions.

[asinha_ppc]

Hi Tim,

Fantastic tool, thank you !

The issue that I have, and it just seemed to have appeared yesterday, is that I keep getting an ESRI logon prompt when I'm trying to use the tool. (Take a look at the pic).  The tool still works, clicking on "cancel"  takes you to the right coordinate  both ways.  But why is this appearing all of a sudden ?  It was fine since July or August ...

[TimWitt2]

Hey Nebojsa,

Thanks for bringing this up. It seems that ESRI has secured the service I used to get the USNG/MGRS which can be found here: http://serverapps101.esri.com/arcgis/rest/services/MGRS/GeocodeServer

I'll have to see if I can find a different service.

Tim

[TimWitt2]

Nebojsa Sudar​ in the widget configuration use this link for the grid url: Locator/MGRS (GeocodeServer)

[asinha_ppc]

Hi Tim,

Thank you for the prompt reply !   I'll be busy for the next few hours, won't have a chance to go on the Server.  Will let you know as soon as I've made the changes ...

[asinha_ppc]

Hi Tim,

I finally got around to it  - and yes, the new service you provided me does not have the login prompt.  Thank you very much !!

[skcchan]

Tim Witt, I noticed that there seems to be a difference in the location found between this widget and Esri's search widget when inputting lat and long:

The widget's been modified for functionality but the search method in the code is unchanged.  Any idea on the discrepancy?  Both should be projected in WGS84 but the difference is about 50 m.

[TimWitt2]

Stephen,

I wonder if it has to do with the reverse geocoding that will be done to find the nearest address, which moves the point. Can you try and do a test in an area where there are no addresses near, like a forest area?

Tim

[skcchan]

Thanks for the response Tim.  I ran a check in the middle of a lake and the points do match in that case:

If I want to change the code, what do you recommend as an option instead of geocoding to locate a point?

[TimWitt2]

Earlier in the comments I posted this version that has the modification to not "snap" to an address Dropbox - Location.zip

Maybe you can modify my current version to include those changes?

[Zulfiqar_AliSoomro2]

Thanks for the amazing Location widget. I tried to make it work with web app builder 1.3, the latest one but the widget is not showing up at all.

Could you please help me work it for the latest 1.3 web app builder or provide any instructions how to do it?

[TimWitt2]

Once you have downloaded my widget, go to WebAppBuilderForArcGIS\client\stemapp\widgets and copy it in there. Once you build a new app, it should be available when adding a widget.