Start your Javascript App right!

13005
24
02-29-2016 11:19 AM

Start your Javascript App right!

Hey everybody,

Whenever I create a mapping application from scratch I start out with the same question, what basemap will I use and what extent will I use? This results in looking up each basemaps name and trying to find the right extent.

After that I need to know which modules to load, to make sure my require works.

To make it easier on myself, I created an app in which I can choose my basemap and also look for the right extent. Once I have accomplished this, I can click on "Go to require" and add any module I need to start my app.

Try it out and Get your map!

If there is a specific require that is missing and you think needs to be added quickly, leave a comment.

To Do List:

- Add requires that were added since 3.17.

- Automatically add domReady!

- Add dojo theme choice.

- Include some basic code and html code when adding some dijits (i.e. Homebutton)

Version 4 update:

- I have added a require builder to the tool (Originally created by Derek Swingley) . I fixed a bug in his version and it seems the support stopped at version 3.8. Once you are done with getting your extent and basemap, click on "Go to require". I am using html5 to bring over your map constructor.

Version 17 update:

Added home button div, code and style.

Enjoy!

Tim

Comments
SteveCole
Frequent Contributor

That's pretty slick and useful, so thanks. I remember bookmarking an ESRI "app" which helped with extracting extents but I like this better.

Steve

TimWitt2
MVP Alum

This is what I used to use to get my extent: Create Map

I'm glad my app is helpful.

AdrianWelsh
MVP Honored Contributor

This is great and easy to use! Thanks for sharing this.

TimWitt2
MVP Alum

No problem, always glad when I can help!

TimWitt2
MVP Alum

Steve ColeAdrian WelshJake SkinnerRebecca Strauch, GISPMiriam Brockmann

I have added the option to drag and drop a map service into the map. Let me know if this is helpful or too much.

AdrianWelsh
MVP Honored Contributor

Wow, I like it. I suppose there is not a way to remove the services once they are in there (without refreshing), but that really isn't a big deal.

TimWitt2
MVP Alum

You can drop another service in there and it will automatically remove the previous service.

I can add a button which will remove any service.

RebeccaStrauch__GISP
MVP Emeritus

Tim, nice tool.   I see it doesn't like a non web mercator aux coordinate/reference system drag an drop, for example this service   which is Alaska Albers.  Using non WMA is always a challenge it seems.  How easy would it be (for me) to modify the code? (assuming you don't want to mess with it.)

TimWitt2
MVP Alum

Well at least there is good news because the feature service is added 

I think we need to adjust the automatic zoom.

MiriamBrockmann
Occasional Contributor

Great Job!

RobertScheitlin__GISP
MVP Emeritus

Tim,

   Suggestion, when you use "go to require" you should probably add the Map require and positional argument automatically since you are adding the map code automatically.

TimWitt2
MVP Alum

Robert,

that is a good idea. I just need to figure out how to do that. I also thought domReady! should be automatically added. Since I am working with code that somebody else has created it might take a little bit.

GeorgieCassar
Occasional Contributor

Great Stuff. Will help me indeed.

TimWitt2
MVP Alum

Let me know if you can think of anything else that needs to be added!

RickeyFight
MVP Regular Contributor

Tim this is an amazing resource!

One idea is adding the basic code block that is needed. Such as

    var home = new HomeButton({
        map
: map
     
}, "HomeButton");
      home
.startup();

and the Div

I know that this would not work on all but it could work on some.

TimWitt2
MVP Alum

That's a great idea!

Maybe add a third template that will include base code and div for things like HomeButton, scalebar, searchbar....?

RobertScheitlin__GISP
MVP Emeritus

Tim can you not just add the string to the existing template if some one chooses the HomeButtom dijit?

TimWitt2
MVP Alum

I guess I could add it to the fullhtml template.

TimWitt2
MVP Alum

Rickey Fite​ Just added the HomeButton, try it out!

RobertScheitlin__GISP
MVP Emeritus

Tim,

  This is great work. Now if you can work out the indention/formatting on the fullhtml template.

TimWitt2
MVP Alum

Sadly I am not a wiz when it comes to html/css, it might take a little

TimWitt2
MVP Alum

I cleaned it up, wasn't as hard as I thought.

RickeyFight
MVP Regular Contributor

Tim,

This is great!!

One more suggestion:

On the Modules that have the add in such as the home button make it bold or put a star next to it so that it is obvious what one has a template added.

TimWitt2
MVP Alum

That is something I will add once I am done with everything else, but it is a good idea.

Version history
Last update:
‎02-29-2016 11:19 AM
Updated by:
Contributors