Last month, in Creating an ArcGIS Online Outage Map – Easy as 1, 2, 3, we showed you how easy it was to create a simple outage map by exposing Telvent Responder™ outage data through your ArcGIS Server, and mashing that with some street data into ArcGIS Online. Though these articles are designed to stimulate your own ideas and guide you to creating your own solutions, we wanted to share some tips on taking this idea to the “next level”. A big “Thanks!” to our reading audience for suggesting this new tact.

In Step 3, we illustrated the necessary actions to share your new ArcGIS Online application. To save you a few clicks, we have included it here:

After sharing, you will see the updated status as shown below:

Then, when viewing your map, click on the Share button in the header. You will see the following Share dialog:

When you click on the Embed in Website button, you will be presented with some really neat options along with the HTML code snippet for your public facing website where your customers will go to see the current outage data. This is shown below:

We will now take our code snippet and place it in our fictitious website, called “Awesome-us Energy”. In this example, we will place the generated code (the start of the iframe to the closing small tag) into our outage page as seen here:

Here is the result:

How’s that for easy?!

Now let’s explore some the options available to you in the sharing dialog. It is always handy to show a legend. We will also use the zoom control, so that the user can easily navigate the map – this is especially useful for the general public.

When you choose your options, the code snippet automatically updates itself!

Now copy and paste the new code snippet into your website and Voilà!

Click on the new Legend button:

Experiment with the zoom control (and panning with a left click and drag action):

Want to see more? Click on the “View Larger Map” link at the bottom. A new browser window will open with your map in ArcGIS Online.

And there’s your crash course to using your map in your existing website. As you can see, there are even more options to explore, but we’ll leave that up to you. Please don’t hesitate to send more ideas our way… maybe they’ll even end up in our next article!