<!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>LA Collisions</title> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"> <style> html, body, map { height: 100%; margin: 0; padding: 0; } #info { background: #fff; box-shadow: 0 0 5px #888; left: 5em; padding: 0.5em; position: absolute; top: 1em; z-index: 40; } </style> <script>var dojoConfig = { parseOnLoad: true }</script> <script src="http://js.arcgis.com/3.7/"></script> <script> var map; require([ "esri/map", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "esri/dijit/InfoWindowLite", "esri/InfoTemplate", "esri/layers/FeatureLayer", "dojo/dom-construct", "esri/dijit/OverviewMap", "esri/dijit/Scalebar", "dojo/parser", "dojo/domReady!" ], function ( Map, InfoWindowLite, InfoTemplate, FeatureLayer, domConstruct, OverviewMap, Scalebar, parser ) { parser.parse(); var map = new Map("map", { basemap: "topo", center: [-118.5, 34], zoom: 11 }); var scalebar = new Scalebar({ map: map, // "dual" displays both miles and kilmometers // "english" is the default, which displays miles // use "metric" for kilometers scalebarUnit: "dual" }); var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root)); infoWindow.startup(); map.setInfoWindow(infoWindow); var template = new InfoTemplate(); template.setTitle("<b>${OMEGA_NAME}</b>"); template.setContent("<b>Collision Count:</b> ${COUNT_}</br> <b>Area (square miles):</b> ${AREA_MI}</br>"); //add a layer to the map var featureLayer = new FeatureLayer("http://arcgis-pjula1gistusc-772545567.us-west-1.elb.amazonaws.com/arcgis/rest/services/LAPD_collisions2/MapServer/0", { mode: FeatureLayer.MODE_ONDEMAND, infoTemplate:template, outFields: ["OMEGA_NAME","REP_DIS", "COUNT_", "AREA_MI", "COLL_RATE"], opacity:.60 }); map.addLayer(featureLayer); }); var overviewMapDijit = new OverviewMap({ map: map, visible: true }); overviewMapDijit.startup(); }); </script> </head> <body> <div id="info"> Click on a reporting district in Los Angeles to get more information. </div> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width: 100%; height: 100%; margin: 0;"> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;"> </body> </html>
Solved! Go to Solution.
hope you find the error in lining them up. Thats the easy answer 😉