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


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.