ArcGIS Map Cedar Rapids With Parcels

by JThomas

HTML

<link rel="stylesheet" href="https://js.arcgis.com/3.12/esri/css/esri.css">
<script src="https://js.arcgis.com/3.12/"></script>
<div id="map"></div>
<div id="toolbar">
    <button id="toggle-imagery" class="tool">Toggle Imagery</button>
    <button id="toggle-lines" class="tool">Toggle Parcel Lines</button>
</div>

CSS

html, body, #map {
    height: 100%;
    width: 100%;
}
#map {
    padding: 0;
    margin: 0;
    cursor: pointer;
}
#toolbar {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 15px 0;
    background-color: rgba(255, 255, 255, 0.5);
}
#toolbar > .tool {
    margin: 0 3px;
}
.infowindow .window {
    background-color: #fff;
}

JavaScript

var map;
require([
    "esri/map",
    "esri/layers/ArcGISTiledMapServiceLayer",
    "esri/geometry/Extent",
    "esri/layers/FeatureLayer",
    "esri/dijit/Popup",
    "esri/InfoTemplate",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/Color",
    "esri/renderers/SimpleRenderer",
    "esri/tasks/query",
    "dojo/parser",
    "dojo/dom-construct",
    "dojo/domReady!"], function (Map,
TiledMapServiceLayer,
Extent,
FeatureLayer,
Popup,
InfoTemplate,
SimpleFillSymbol,
SimpleLineSymbol,
Color,
SimpleRenderer,
Query,
parser,
domConstruct) {

    var baseMapUrl = 'http://crgis.cedar-rapids.org/arcgis/rest/services/Maps/Default_BaseMap/MapServer';

    var parcelLineUrl = 'http://crgis.cedar-rapids.org/arcgis/rest/services/Maps/Parcel_Lines_Simple/MapServer';

    var imageryUrl = 'http://crgis.cedar-rapids.org/arcgis/rest/services/Imagery/2014_NAIP_Photo/MapServer';

    var parcelQueryFeatureUrl = 'http://crgis.cedar-rapids.org/arcgis/rest/services/ParcelQuery/MapServer/1';

    parser.parse();

    //Used to create bounds and center Cedar Rapids Map
    //Map coords won't work right without wkid = 102675
    var ext = new Extent({
        xmin: 5370168,
        ymin: 3414621,
        xmax: 5470007,
        ymax: 3496928,
        spatialReference: {
            wkid: 102675
        }
    });

    //Window that will show info when a feature is clicked on the map
    var fill = new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5]));

    var popup = new Popup({
        highlight: true,
        fillSymbol: fill
    }, domConstruct.create("div"));

    popup.startup();

    //Create the map, center it and add the info window to use when a feature selection is made
    map = new Map("map", {
        extent: ext,
        zoom: 0,
        infoWindow: popup
    });

    //The info window will use this template to populate the window when a feature is selected
    var template = new InfoTemplate();
    template.setTitle('GPN:...