Introduction: How to Create and Publish an Interactive Map Using ArcGIS Online

An audience gains understanding of a particular situation or event when they can see the spatial distribution of occurrences on a map. A visual aid can be extremely helpful for getting a message across. Most features are better understood when mapped. A written description of the location of every fire hydrant within a given city is far less effective than seeing each hydrant location on a map.

Geographic Information Science, GIS for short, includes software technologies that make mapping far more accurate and efficient than ever before. Recent growth of the GIS industry has resulted in better options for effective primary and secondary data collection, management, and analysis. These instructions will show the foundational steps for developing and delivering interactive map resources online.

Step 1: Determine the Platforms Required to Build a Map

A. Understand GIS software options.

  • Downloaded software. Multiple programs exist that are useful for conducting GIS work. The most well-known programs include ArcGIS Pro and ArcMap, both products of Esri, a company offering the widest array of GIS capabilities. Other well-known GIS software’s include QGIS, an open-source platform allows download at no cost to the user. These products are useful for their diverse capabilities, offering many tools to sort through and manipulate data. Creation of static print maps are best suited for desktop GIS softwares.
  • Web-hosted software. Web hosted GIS software has become possible over recent years through computing GIS functions in the cloud. Data is uploaded, managed, analyzed, and manipulated all on the internet. This is what's known as the Software-as-a-Service model, or SaaS. Online formats are generally more user-friendly and easier to manage. To run your functions, however, there is a cost for computing power. In many cases you prepay for credits to run your operation. The most well-known platform for doing these functions is ArcGIS online.

B. Create an ArcGIS Online account. For the sake of creating an interactive map, ArcGIS Online offers many capabilities in a user-friendly manner. Online allows you to bring datasets from their original state all the way to publishing on the web, with no need to transfer data between sites.

Step 2: Consider What to Map

A. Gather ideas. Map-making is efficient when you have a goal in mind. Think about the place or phenomena you hope to put on a map. Consider the ways of best presentation.

  • Visualize the map you hope to create. In your mind picture what you want the map to look like when finished. Are you aware of what feature requirements exist for you to get the desired output? Do you have a particular color scheme or symbology you hope to follow?

B. Refine your vision. Computer program map-making allows for a substantial amount of artistic freedom. Instead of ink-to-paper permanence, the GIS practitioner can alter style, adjust vertices, and switch map layers on-and-of while maintaining map functionality.

  • Decide the types of data that will be valuable. To save time in the map making process, have an initial understanding of just what it is you are attempting to make.
  • Develop your plan but stay flexible in the process. While making maps there is a great deal of trial-and-error. Oftentimes a certain desired output evolves in the process upon finding new options. Despite having your end-goal vision, be aware that aspects like symbology, color, label font, and label placement are subject to refinement.

Step 3: Explore Data

A. Determine the organization or government site that would likely have the data that you’re interested in.

  • Search the name of an area of interest with the phrase “GIS Data” added in your web engine. City, state, and federal government websites generally have a data storage platform available for public use. If attempting to map related to a specific municipality or administrative area, simply input the name. Explore the Kittitas County Open Data Portal as an example: https://data-kitcogis.opendata.arcgis.com/
  • Decide on a city or county that you will pull data from. The following steps will require you to download data. If all data is collected from the same geographical space then you are able to see how the features interact with each other. Make sure that the city or county that you are wanting to pull GIS data from has a functioning GIS portal with data thats free for download. If not, consider other cities or counties that could be explored.
  • For additional exploration, input naturalearthdata.com into your URL search engine. This brings you to a GIS data site, an example of open-source data existing on a nongovernmental site. Search through the data options offered to get a sense for mapping possibilities with GIS.

B. Observe format options. Many sites with open-source data have various formats in which that same data finds use. For example, presented options include: “. gdb”, “.geojson”, “.csv”, ‘.shp”, etc.

  • Use Esri’s shapefiles (.shp) for the purposes of this project. A shapefile is a data format that stores spatial vector geometry. Vector data consists of three types of geometry, or categories. These are: point, line, and polygon datasets.

C. Download a point dataset.

  • Choose a point dataset that's of interest to you. Think back to the example of mapping fire hydrants within a city. The collection of spatial locations of these fire hydrants are collected with point data. Each point on the map represents one point on the geographical earth, this is a simplified way of understanding true location. Other examples of point data use could include showing each oak tree within a city, high school within a state, or sports stadium within the country.

D. Download a line dataset.

  • Browse through different options of line features. Line datasets are helpful for displaying features that are continuous in nature. Freeways, streets, trails, and railways are all examples of real-world features that would be displayed with a line dataset within a GIS constructed map.

E. Download a polygon dataset.

  • Observe polygon options. Polygons are shapes that match physical reality, such as forest boundaries or lake area. These could also be administrative boundaries of any scale, be that country, state, county, neighborhood etc. Polygon datasets are also used for city planning maps to have an accurate view of building shape. To get a better understanding of this, open Google Maps and zoom into a city. The display of each house includes a simplified shape to match the dimensions of the house as it is on the landscape.

F. Set up a new folder on your computer. Having all data in a centralized location increases efficiency in the map-making process.

  • Unzip your downloaded data files into your folder. If using a Windows operating system, go to File Explorer if using Windows OS or Finder if using a Mac. Click Downloads. The ZIP files should be at the top of the page. Doubleclick on one of the datasets you downloaded. In the top middle-right click Extract All and select the folder you created. This releases the multiple internal files held in the overarching ZIP file. Within these files is a “.shp”. Generally, in GIS software’s you would upload only the shapefile to use its geometry.

Step 4: Prepare Data for Use

A. Upload ZIP files to ArcGIS Online.

  • Navigate to the Content section of the ArcGIS online Interface. Click New Item. A window pops up asking where you would like to take data from, click Your Device. This will automatically open Windows File Explorer or Finder. Instead of navigating to our unzipped files, we will click on one of our downloaded ZIP files from the original data portal. Click Next. In the section that says “How would you like to add this Shapefile?”, leave the default box checked, as “Create a hosted feature layer”. Click Next.
  • Choose a title, stored folder, tags, and summary of the dataset. This allows for quick access and ease of identification when you want to use the uploaded data. When fields reach input satisfaction, click Save.
  • Repeat the same process for the other two datasets.

B. Navigate back to the Content page. You should now see all three datasets in “Feature Layer (hosted)” format at the top of your page. Click on one of them. You should see a page that shows your input details on the feature layer.

C. Click “Open in Map Viewer”. Once there, click “Open in Map Viewer Classic”, in the top right corner of the page.

D. Combine your data. In Map Viewer Classic, Click the Add dropdown menu and choose Search for Layers, where your other two data feature layers should be right at the top. Click Add to Map for both layers.

Step 5: Understand Map Construction

A. Set Base Map. Notice that when you initially opened your feature layer, it automatically was overlaid on a reference map. This reference is what's called a Basemap. ArcGIS Desktop and ArcGIS Online both contain very user-friendly methods of choosing basemaps. Whereas other software’s don’t always share this commonality. At the click of a button you can be presented with numerous different options to choose from for creating your map.

  • In the upper-left portion of the page click Basemap and select Light Gray Canvas. All Base maps are useful for their own purposes. One of the benefits of the Light Gray Canvas is its simplicity. It allows the viewer to not become overburdened with presented variables, such as topography or intricate color scheme for landscape features.

B. Open Layer Data Tables. Within your datasets are valuable information that give detail
on specific features. Let's refer to the example of a point dataset revealing all sport stadium locations across the country. Within this type of dataset might be relatively little detail, or there may be a lot of detail.

  • Click Show Data under the layer name in the left side window.
  • Observe column names. Much like a spreadsheet you might see in Excel, GIS data tables include rows and columns. A row represents a single feature, be that point, line, or polygon. Each column has vertical alignment and represents a certain variable. A variable can be anything. For sport stadiums there may be column variables for stadium name, maximum occupancy, year built, zip code, etc. This explains how rows and columns interact to reveal information about real world features or phenomena.

C. Adjust color scheme and symbology. This is where you fulfill the vision that you had for the map in the initial steps of this experiment. In the Contents bar under your layer click “Change Style”.

  • Click the Change Style icon right next to Show Data.
  • Select an attribute in Choose an attribute to show, or keep the default as Show location only. If an attribute is chosen, this will create a color scheme based on values in your columns. If you choose an integer variable, assignment of similar row values occurs, granting the same color based on a computer-generated range. If you choose a text field every value will be shown with a different color because each is unique. If you choose a binary column type (yes or no), such as does this stadium host an NFL team, the output will result in points being assigned to one of two colors.
  • Choose visual appearance under Select a drawing style and click Options. Automatically your map should change color to variable chosen in the previous step. Select Symbols and pick out your desired color scheme. If you want to adjust the visual of the other two datasets, repeat the process of the previous steps.
  • Save your work by clicking Save in the upper middle of the page. After you have completed all steps and you're satisfied with the map visual, it is now time to prepare that map for the internet. This can happen a few different ways, two methods are presented in the following steps.

Step 6: Turn Map Into a Web Application

A. Navigate to Content, select your new Web Map feature. When you saved your project, conversion occurred from a group of feature layers to a Web Map. Click on the Web Map.

  • Observe the Summary and tags you used, make changes if necessary.

B. Select “Create Web App”, under the dropdown results select “Web AppBuilder”.

  • As done in previous steps, select a name, tags, and a summary for your new Web App.

C. Design your Web App. You now are designing your map in the way it will be presented to the public.

  • Pick a theme. An array of different themes will pop-up on the left hand side, browse through the options. Some themes are better than others for presenting certain information. Try each one out and determine which one looks best for the purposes of your project. Produce color and layout adjustments for each theme to your liking also in the left window upon picking a theme.
  • Observe Offered Widgets. Web AppBuilder supplies many Widget options for application to your Web Map. Click the Widget icon and go scan through the different options to see if there are any that would improve the quality of your web map.

D. Save and Publish. It’s now time to get your map onto the internet for public viewership. Click Save, followed by the Launch button.

  • Maneuver back to the Content Page and select your Web Mapping Application. Click Share and change the checkbox from "Owner” to “Everyone (public)”.
  • You now have a functional URL that’s accessed from an internet search.

Step 7: Embed the Map Into Website (alternative Method to Web AppBuilder)

A. Choose a website developing platform

  • Create a website to host your map. For the sake of user-friendliness, we’ll look at this process using the web development site Wix.
  • Choose a design for the website, including title, font, font size, color scheme, etc.

B. Track back to your Web Map opened in ArcGIS Map Viewer Classic. Next to the Save button there is an option called Share, click this. Select Everyone (Public) in the checkbox and navigate down and click where it says “Embed in Website”.

  • Check boxes and see results in the Map Preview. This will be the layout taken to your website.
  • Click Copy when satisfied with results. This is an active HTML code that contains your map and your chosen display options.

C. Navigate to your Wix web page in the Wix editor. Select Add and scroll down the list to Embed. Out of the Embed options select Embed a Widget. This will open an HTML window above which is a hovering button that says Enter Code, click this. Paste your previously copied code under the section that says, “Add your Code here (HTTPS) Only):” and then click Update.

D. Adjust the size of your Map on the web page. Your Map is now ready to publish with your website.