Marcos Vainer Loeff

Mapping in HTML5 using Esri ArcGis

Blog Post created by Marcos Vainer Loeff Employee on Nov 19, 2013

In one of my previous blog posts, I have shown you how to use the Bing Maps in an HTML5 pages using JavaScript in order to add images to specific locations (defined by the latitude and longitude) to the map. In this blog post, I will teach you how to develop a similar page using Esri ArcGis Mapping.

Create an Esri ArcGis developer account

You don’t need to have an ArcGis account in order to add images to a map (a key is not needed). However, if you are willing to add more advanced features to your page, then you will need to create an ArcGis account. Please follow the procedure below:

  1. Go to the ArcGis for Developers page and click on “Sign in”.
  2. On the following page, you will find a link called “Sign up” to create your account.

The developer account is free as it is published on this page about the available plans.

Creating an Esri ArcGIS Map

Please create another  HTML empty page on the same project of page which shows a map using Bing Maps, if you don’t want to copy the images again to your project.

 

You will have to link your HTML page to a style sheet from Esri ArcGis instead of Bing Maps. A custom style was also defined as it is shown below:

 

 

 <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
    <style>
        #info {
            top: 20px;
            color: #444;
            height: auto;
            font-family: arial;
            right: 20px;
            margin: 5px;
            padding: 10px;
            position: absolute;
            width: 115px;
            z-index: 40;
            border: solid 2px #666;
            border-radius: 4px;
            background-color: #fff;
        }


        html, body, #mapDiv {
            padding: 0;
            margin: 0;
            height: 100%;
        }


        button {
            display: block;
        }
    </style>
    <script src="http://js.arcgis.com/3.7/"></script>

 

In order to add a map to the HTML page, please refer to the code snippet below:

 

 

 

  var map = null;
        require([
                "esri/map",
                "esri/symbols/PictureMarkerSymbol",
                "esri/graphic",
                "esri/geometry/Point",
                "dojo/on",
                "dojo/domReady!"
        ],
        function (
          Map,
          PictureMarkerSymbol,
          Graphic,
          Point,
          on
        ) {
            map = new Map("mapDiv", {
                basemap: "streets",
                center: [long, lat],
                zoom: 12
            });

 

 

 

Add a div which is where the map will be displayed in on the body section:

 

 

 

 

 

<body>
    <div id="mapDiv"></div>
</body>

 

 

A new JavaScript variable called map was declared and instantiated. The map will appear on the div which has an ID called “mapDiv”. The following parameters were chosen:

 

Basemap: Specify a basemap for the map. The following are valid options: "streets" , "satellite" , "hybrid", "topo", "gray", "oceans", "national-geographic", "osm"

 

Center: The location where the map should be centered. Enter the location as an array containing longitude and latitude (for example, [-98, 40]) or as an esri.geometry.Point

 

Zoom: Initial zoom level of the map. If a value is not provided, it will be calculated based on the initial extent of the basemap.

 

You can find more information about those methods on this technical page.

 

The center is defined by two variables lat and long which are defined just before declaring the map.

 

 

 

        lat = 37.75;
        long = -122.28;

 

 

The center chosen is the half way between OSIsoft LLC and the Grand Hyatt on Union Square. Therefore, when the page loads, the map will be already centered in order to show the both locations.

Adding custom images

We will indicate where OSIsoft headquarters is located in San Leandro and where vCampus Live! 2013 will take place this year. Instead of using the default pushpins, we will use custom images instead. You can download the images here. The first question to be answered is how to get the coordinates of some places? There are many tools that can help you but one option is through Google Maps. There is an article from Google which provides clear instructions about how to get the coordinates of a given location.

 

Using Google Maps, I have found out that the latitude of OSIsoft, LLC is 37.723377 and its longitude is 122.162654.  The latitude of the Grand Hyatt in San Franscisco (where vCampus Live! 2013 will take place) is 37.789777 and its longitude is -122.407443. Therefore, we will store this information on the array called places, just below the declaration of the map variable.

 

Note that it was also stored the path, width and height of the image on the array. Those properties are required when adding those images to the map.

 

 

 

 

 

            var places = [
           { lat: 37.723377, long: -122.162654, icon: 'images/OSIsoft_logo_small.jpg', width: 135, height: 50 },
           { lat: 37.789777, long: -122.407443, icon: 'images/vCampus_Live_2013.jpg', width: 170, height: 26 },

            ];

 

 

Finally, the code snippet below will add both images to the ArcGIS Esri Map:

 

 

 

            on(map, "load", function () {
                for (var k=0; k < 2; k++){
                    var point = new Point(places[k].long, places[k].lat);
                    var pictureMarkerSymbol = new PictureMarkerSymbol(places[k].icon, places[k].width, places[k].height);
                    map.graphics.add(new Graphic(point, pictureMarkerSymbol));
                }
            });
        })
 

 

Open your web page and you should see where OSIsoft, LLC is located as well as where vCampus Live! 2013 is taking place this year!

 

 

 

 

 

2806.sc1.jpg

 

 

 

 

 

If "satellite" is chosen for the basemap, the Esri ArcGIS Map will become:

 

 

 

 

 

8030.sc2.jpg

 

 

 

 

 

There are some very interesting samples of Esri ArcGIS Maps using JavaScript. I recommend taking a look at this page, and you will be surprised with how many resources are available for you concerning mapping.

 

No matter if you are developing in Java, Silverlight, WPF, Android or iOS, you can find information about how to use Esri ArcGis Maps on those platforms by clicking here.

 

I hope you find this blog post about Mapping in HTML5 using Esri ArcGIS  interesting and for those who has subscribed to the Programming Hackathon, you should know that some Esri ArcGIS developers will be there to help you develop your killer application! Stay tuned!

Appendix : Source code

Please refer to the code snippet below for the complete solution.

 

 

 

 

 

 

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Esri ArcGis Mapping Sample</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
    <style>
        #info {
            top: 20px;
            color: #444;
            height: auto;
            font-family: arial;
            right: 20px;
            margin: 5px;
            padding: 10px;
            position: absolute;
            width: 115px;
            z-index: 40;
            border: solid 2px #666;
            border-radius: 4px;
            background-color: #fff;
        }
 
        html, body, #mapDiv {
            padding: 0;
            margin: 0;
            height: 100%;
        }
 
        button {
            display: block;
        }
    </style>
    <script src="http://js.arcgis.com/3.7/"></script>
    <script>
        // Override these for testing purposes
        lat = 37.75;
        long = -122.28;
        var map = null;
        require([
                "esri/map",
                "esri/symbols/PictureMarkerSymbol",
                "esri/graphic",
                "esri/geometry/Point",
                "dojo/on",
                "dojo/domReady!"
        ],
        function (
          Map,
          PictureMarkerSymbol,
          Graphic,
          Point,
          on
        ) {
            map = new Map("mapDiv", {
                basemap: "streets",
                center: [long, lat],
                zoom: 12
            });

            var places = [
           { lat: 37.723377, long: -122.162654, icon: 'images/OSIsoft_logo_small.jpg', width: 135, height: 50 },
           { lat: 37.789777, long: -122.407443, icon: 'images/vCampus_Live_2013.jpg', width: 170, height: 26 },

            ];
            on(map, "load", function () {
                for (var k=0; k < 2; k++){
                    var point = new Point(places[k].long, places[k].lat);
                    var pictureMarkerSymbol = new PictureMarkerSymbol(places[k].icon, places[k].width, places[k].height);
                    map.graphics.add(new Graphic(point, pictureMarkerSymbol));
                }
            });
        })

    </script>
</head>
<body>
    <div id="mapDiv"></div>
</body>
</html>

Outcomes