00:04In this demonstration, I will illustrate how you can convert static images in your web sites...

00:09...into fully functional, interactive mapping applications.

00:13For that, we will use the new site as well as ArcGIS Server services.

00:21With them, we will compose web maps that will finally embed into your web site.

00:31You are probably already familiar with the ArcGIS Services Directory.

00:35It lists all the GIS services running on your server.

00:39I am going to navigate to my Petroleum map service.

00:43As you know, you can preview this service right from the Services Directory.

00:48In ArcGIS Server 10, we added yet another option to preview your services.

00:53Click on the Map.

00:56In this application, you can now very easily offer web maps.

01:02You can see that your map service has been overlaid on top of a basemap.

01:06This basemap is coming from ArcGIS Online, but you can actually change it.

01:11If you go to details, you'll see that you can also control all the properties of your web map...

01:15...such as which layers, by default, are going to be turned on or off; and you can also...

01:21...manipulate things like the transparency of the services within your web map.

01:26Of course, you can add additional layers of information...

01:29...from ArcGIS Online, the web, or your own GIS server.

01:33I'm going to navigate to my own ArcGIS server and add one extra service -- very well.

01:44I'm going to define the initial extent of my map...

01:49...and that's about it; we have just composed a nice-looking web map.

01:53At this point, I can save it.

01:56This web map will be stored in my profile.

02:04Now that my web map has been saved, I could open it in different clients like...

02:08...ArcGIS Desktop, ArcGIS Explorer Online and so on.

02:12And today, what we want to do is embed this web map into an existing site.

02:17So I can use this little piece of HTML code to achieve that.

02:23Let's go to our site; just to illustrate the process, I'm going to use planning in Firefox...

02:29...which allows me to inspect the different HTML limits of a web site.

02:36So you can see that I can click on this element, and actually in this bottom part of...

02:40...the screen, I can edit, dynamically, the HTML content; as I type over here...

02:46...the HTML content changes and is reflected in my web site.

02:52As I had said, I wanted to replace this static image with an interactive map.

02:55So I am going to click on it and edit this HTML content.

03:00Now, I will basically paste the HTML code that I took from the application.

03:07And that's it -- here you go.

03:09If you want to adjust the size, you can always come here and edit the content.

03:13In this case, to make the map a little bit wider.

03:18This shows how you can easily edit the HTML content of a site and embed a web map.

03:24This web map was authored in and is displaying your own...

03:28...ArcGIS Server services -- everything with very little knowledge of HTML.

Copyright 2016 Esri
Auto Scroll (on)Enable or disable the automatic scrolling of the transcript text when the video is playing. You can save this option if you login

Embedding Web Maps

In this video, ArcGIS Server product manager Ismael Chivite shows how to use to create an interactive map that you can easily embed as a component within a web page.

  • Recorded: Aug 13th, 2010
  • Runtime: 03:39
  • Views: 1055
  • Published: Aug 30th, 2011
  • Night Mode (Off)Automatically dim the web site while the video is playing. A few seconds after you start watching the video and stop moving your mouse, your screen will dim. You can auto save this option if you login.
  • HTML5 Video (Off) Play videos using HTML5 Video instead of flash. A modern web browser is required to view videos using HTML5.
Download VideoDownload this video to your computer.
<Embed>Customize the colors and use the HTML code to include this video on your own website
Start From:
Player Color:

Right-click on these links to download and save this video.


Be the first to post a comment
To post a comment, you'll need to login.
If you don't have an Esri Global Login ID, please register here.