Chris Mendez in Javascript, For Developers, Telematics

Mapping county, city and venue data using ArcGIS + ESRI

This single page web app shows you how to publish a map using ArcGIS for mapping, ESRI for publishable data and a JSON file for custom data. I took it one step further and even drew out vector graphics using the the DOJO graphics engine.

Example

arcgis-esri


The hardest part of this demo was using the Dojo framework. Yes, it's still Javascript but it's radically different from jQuery. If it weren't for ArcGIS, I might not have gone through the effort.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title></title>
        <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/tundra/tundra.css">
        <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
        <style>
            html, body, #mapDiv {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <!-- Javascript -->
        <script src="http://js.arcgis.com/3.6/">
        </script>
        <script type="text/javascript" charset="utf-8">
            //https://developers.arcgis.com/en/javascript/jsapi/graphic-amd.html
            var map;
            var Data = {
                ESRI: {
                    CENSUS: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3",
                    STATES_CITIES_RIVERS: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0/"
                }
            }
            var params = {
                coords: {
                    lng: -118.049,
                    lat: 34
                },
                zoom: 6,
                markerURL: "https://s3.amazonaws.com/com.cartodb.users-assets.production/production/jonmrich/assets/20150203194453red_pin.png",
                state: "California"
            };
            
            var libs = ["dojo/parser", "dojo/on", "dojo/aspect", "dojo/dom", "dojo/io/script", "dojo/_base/array", "dojo/json", "esri/map", "esri/geometry/Point", "esri/symbols/PictureMarkerSymbol", "esri/graphic", "esri/layers/GraphicsLayer", "dojo/domReady!"];
            
            require(libs, function(parser, on, aspect, dom, script, arrayUtil, JSON, Map, Point, PictureMarkerSymbol, Graphic, GraphicsLayer, domConstruct){
            
                map = new Map("mapDiv", {
                    center: [params.coords.lng, params.coords.lat],
                    zoom: params.zoom,
                    //"satellite", "hybrid", "topo", "gray", "ocean", "osm", "national_geographic"
                    basemap: "topo"
                });
                
                
                //On Layers Add Event Handler
                map.on("layers-add-result", onLayerAddResult);
                function onLayerAddResult(res){
                    console.log("onLayerAddResult", res);
                }
                
                //Plot multiple layers on a map
                //https://developers.arcgis.com/en/javascript/jssamples/graphics_multiple_layers.html
                aspect.after(map, "onLoad", queryCounties);
                aspect.after(map, "onLoad", queryCities);
                
                on(map, "load", queryVenues);
                on(map, "load", plotItem);
                
                function plotItem(){
                    //A. CREATE GEO POINT
                    var point = new esri.geometry.Point(params.coords.lng, params.coords.lat);
                    point = esri.geometry.geographicToWebMercator(point);
                    //B. CREATE SYMBOL
                    var symbol = new esri.symbol.PictureMarkerSymbol(params.markerURL, 32, 32);
                    //C. CREATE GRAPHIC, INSERT THE SYMBOL AND POINT
                    var graphic = new esri.Graphic(point, symbol);
                    //D. CREATE LAYER
                    var layer = new esri.layers.GraphicsLayer();
                    //E. ADD GRAPHIC TO LAYER
                    layer.add(graphic);
                    //F. CREATE AN EVENT LISTENER + HANDLER
                    aspect.after(layer, "onclick", onPictureMarkerClick);
                    function onPictureMarkerClick(){
                        console.log("onPictureMarkerClick:");
                    }
                    //G. ADD LAYER TO MAP
                    map.addLayer(layer);
                }
                
                
                /**************************************
                 * Venue Data
                 */
                function queryVenues(){
                    script.get({
                        // The URL to get JSON from Twitter
                        url: "http://main-worldvenues.rhcloud.com/feed",
                        callbackParamName: "callback",
                        handleAs: "json",
                        content: {},
                        load: function(data){
                            var items = JSON.parse(data, true);
                            
                            var symbol = new esri.symbol.SimpleMarkerSymbol();
                            symbol.setColor(new dojo.Color([0, 0, 255, 0.8]));
                            
                            var graphicsLayer = new esri.layers.GraphicsLayer();
                            //Re-order the layers
                            //map.reorderLayer(graphicsLayer, 1);
                            
                            //Add each item to the Graphics Layer
                            dojo.forEach(items.rows, function(item){
                                //console.log( item.value );
                                var item = item.value;
                                var lat = item.latitude;
                                var lng = item.longitude;
                                var point = new esri.geometry.Point(lng, lat);
                                var attr = item;
                                //https://developers.arcgis.com/en/javascript/jsapi/infotemplate.html
                                var infoTemplate = new esri.InfoTemplate("Venue", "${*}");
                                var g = new esri.Graphic(point, symbol, attr, infoTemplate);
                                
                                graphicsLayer.add(g);
                            });
                            //Add Graphics Layer to Map
                            map.addLayer(graphicsLayer);
                        },
                        error: function(err){
                            console.log("Error!", err);
                        }
                    });
                }
                
                /*****************************************
                 * Single Data Point
                 */
                function plotProject(lat, lng){
                    var point = new esri.geometry.Point(lng, lat);
                    
                    var symbol = new esri.symbol.SimpleMarkerSymbol();
                    symbol.setColor(new dojo.Color([0, 0, 255]));
                    
                    var attr = {};
                    var infoTemplate = new esri.InfoTemplate("Special Marker", "${*}");
                    var graphic = new esri.Graphic(point, symbol, attr, infoTemplate);
                    
                    var graphicsLayer = new esri.layers.GraphicsLayer();
                    graphicsLayer.add(graphic);
                    
                    //Add Graphics Layer to Map
                    map.addLayer(graphicsLayer);
                    //map.reorderLayer(graphicsLayer, 2);
                
                    //We're using graphicLayer instead of raw Symbol on a map
                    //map.graphics.add(graphic);
                }
                
                /**************************************
                 * County Data
                 */
                function queryCounties(){
                    var param = params.state;
                    var countyQueryTask = new esri.tasks.QueryTask(Data.ESRI.CENSUS);
                    
                    var countyQuery = new esri.tasks.Query();
                    countyQuery.outFields = ["*"];
                    countyQuery.returnGeometry = true;
                    countyQuery.outSpatialReference = map.spatialReference;
                    countyQuery.where = "STATE_NAME = '" + param + "'";
                    countyQueryTask.execute(countyQuery, addCountyFeatureSetToMap);
                }
                
                function addCountyFeatureSetToMap(featureSet){
                    var symbol = new esri.symbol.SimpleFillSymbol();
                    symbol.setColor(new dojo.Color([100, 100, 100, 0.1]));
                    
                    //Create graphics layer for counties
                    var graphicsLayer = new esri.layers.GraphicsLayer();
                    graphicsLayer.setInfoTemplate(new esri.InfoTemplate("${NAME}", "${*}"));
                    
                    map.addLayer(graphicsLayer);
                    //map.reorderLayer(graphicsLayer, 2);
                    
                    //Add counties to the graphics layer
                    dojo.forEach(featureSet.features, function(feature){
                        graphicsLayer.add(feature.setSymbol(symbol));
                    });
                }
                
                /*****************************************
                 * City Data
                 */
                function queryCities(){
                    var param = params.state;
                    //Query all cities in...
                    var cityQueryTask = new esri.tasks.QueryTask(Data.ESRI.STATES_CITIES_RIVERS);
                    var cityQuery = new esri.tasks.Query();
                    cityQuery.outFields = ["*"];
                    cityQuery.returnGeometry = true;
                    cityQuery.outSpatialReference = map.spatialReference;
                    cityQuery.where = "STATE_NAME = '" + param + "'";
                    cityQueryTask.execute(cityQuery, addCityFeatureSetToMap);
                }
                
                function addCityFeatureSetToMap(featureSet){
                    var symbol = new esri.symbol.SimpleMarkerSymbol();
                    symbol.setColor(new dojo.Color([250, 250, 210, 0.3]));
                    
                    //Create graphics layer for cities
                    var graphicsLayer = new esri.layers.GraphicsLayer();
                    graphicsLayer.setInfoTemplate(new esri.InfoTemplate("${CITY_NAME}", "${*}"));
                    
                    map.addLayer(graphicsLayer);
                    map.reorderLayer(graphicsLayer, 1);
                    
                    //Add cities to the graphics layer
                    dojo.forEach(featureSet.features, function(feature){
                        graphicsLayer.add(feature.setSymbol(symbol));
                    });
                }
                
            });
        </script>
    </head>
    <body class="tundra">
    <div id="mapDiv">
    </div>
    </div>
</body>
</html>

Final Thoughts

If you're trying to work with dynamic data and mapping, I highly suggest you look at Google Maps API with jQuery. Here's an example I made which also displays data from Flickr.