Using jQuery | ArcGIS API for JavaScript 3.46

This sample shows how to use the jQuery JavaScript framework with the ArcGIS JavaScript API. jQuery is a JavaScript library designed to simplify Web development. Since this application uses the jQuery framework instead of Dojo, this sample uses the compact build of the ArcGIS JavaScript API, which does not include things like Dojo widgets.

When building applications with frameworks other than Dojo, you still need to use dojo to connect to map events. In this snippet, we connect to the map's

onLoad

event and then call

.ready()

.The

.ready()

method is automatically called when the DOM is fully loaded.

require(["dojo/on", "esri/map"], function (on, Map) {map = new Map("map", {basemap: "gray",center: [2.352, 48.87],zoom: 12,slider: false});on(map, "load", function (){console.log("Map load event");// Hook up jQuery$(document).ready(jQueryReady);});});

Code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">



<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<meta name="mobile-web-app-capable" content="yes">
<title>Esri Map and jQuery</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.min.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
  html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    font-size: 1em;
    font-family: Roboto, "Helvetica Neue", Verdana, Geneva, Arial, Helvetica, sans-serif;
  }

  #map {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  #jqSlider {
    position: absolute;
    left: 2em; /* 32 pixels */
    top: 15.65em; /* 250 pixels */
    height: 12.5em; /* 200 pixels */
    z-index: 2;
    font-size: 0.75em; /* 12 pixels */
  }

  #ui-sample-description {
    position: absolute;
    top: 1.25em;
    left: 1.25em;
    right: 1.25em;
    z-index: 2;
    background-color: #fff;
    border-radius: 0.3125em;
    border: 0.0625em #AAAAAA solid;
  }

  #ui-sample-feedback {
    bottom: 1.25em;
    left: 1.25em;
    z-index: 2;
    position: absolute;
    text-align: center;
    background-color: #fff;
    border-radius: 0.3125em;
    border: 0.0625em #AAAAAA solid;
  }

  .simpleInfoWindow, .simpleInfoWindow .title {
    border-color: #5C9CFF;
  }

  .simpleInfoWindow .title {
    font-weight: bold;
  }

  .ui-header {
    top: 0;
    left: 0;
    right: 0;
    height: 1.875em;
    color: #FFFFFF;
    background-color: #67656c;
    padding: 0.625em 0 0 0.625em;
    border-radius: 0.3125em 0.3125em 0 0;
    border-bottom-color: #FFFFFF;
    border-bottom-width: 0.3125em;
  }

  .ui-content {
    color: #343434;
    background-color: #fff;
    padding: 0.625em 0.625em;
    border-radius: 0 0 0.3125em 0.3125em;
  }

  .ui-drop-shadow {
    -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  }

  .ui-state-default,
  .ui-widget-content .ui-state-default,
  .ui-widget-header .ui-state-default {
    border: 2px solid #67656c;
  }

  .ui-widget-content {
    border: 2px solid #67656c;
    color: #555555;
  }
</style>

<script src="https://js.arcgis.com/3.46compact/"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script>
  var map;

  require([
      "dojo/dom",
      "dojo/on",
      "esri/Color",
      "esri/config",
      "esri/geometry/webMercatorUtils",
      "esri/graphic",
      "esri/lang",
      "esri/map",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleMarkerSymbol",
      "dojo/domReady!"
    ],
    function (dom, on, Color, esriConfig, webMercatorUtils, Graphic, lang, Map, SimpleFillSymbol, SimpleLineSymbol,
      SimpleMarkerSymbol){

      var zoomSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
          new Color([20, 156, 255]), 1), new Color([141, 185, 219, 0.3]));

      esriConfig.defaults.map.zoomSymbol = zoomSymbol.toJson();

      map = new Map("map", {
        basemap: "gray-vector",
        center: [2.352, 48.87],
        zoom: 11,
        slider: false
      });

      on(map, "load", function (){
        console.log("Map load event");
        // Hook up jQuery
        $(document).ready(jQueryReady);
      });

      on(map, "layer-add", function (){
        console.log("Map layer-add event");
      });

      on(map, "extent-change", showExtent);

      map.infoWindow.resize(150, 100);

      function showExtent(event){
        console.log("Map extent-change", JSON.stringify(event.extent));
        var innerContent;
        var extent = webMercatorUtils.webMercatorToGeographic(event.extent);
        innerContent = "XMin: " + extent.xmin.toFixed(2) + " " +
          "YMin: " + extent.ymin.toFixed(2) + " " +
          "XMax: " + extent.xmax.toFixed(2) + " " +
          "YMax: " + extent.ymax.toFixed(2);

        dom.byId("info").innerHTML = innerContent;
      }

      // jQuery stuff
      function jQueryReady(){
        // Create jQuery Slider
        createSlider();

        var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_X,
          12, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
            new Color([92, 156, 255, 1]), 4));

        var graphic;

        on(map, "click", function (event){
          console.log("Map click event");
          // Add a graphic at the clicked location
          if (graphic) {
            graphic.setGeometry(event.mapPoint);
          }
          else {
            graphic = new Graphic(event.mapPoint, markerSymbol);
            map.graphics.add(graphic);
          }

          formatNumber = function (value, key, data){
            return value.toFixed(2);
          };

          var infoContent = lang.substitute(
            webMercatorUtils.webMercatorToGeographic(event.mapPoint),
            "Latitude (y): ${y:formatNumber} <br> Longitude (x): ${x:formatNumber}");

          map.infoWindow.setTitle("Location:");
          map.infoWindow.setContent(infoContent);
          map.infoWindow.show(event.mapPoint);
        });
      }

      function createSlider(){
        $("#jqSlider").slider({
          min: 0,
          max: map.getLayer(map.layerIds[0]).tileInfo.lods.length - 1,
          value: map.getLevel(),
          orientation: "vertical",
          range: "min",
          change: function (event, ui){
            map.setLevel(ui.value);
          }
        });

        on(map, "zoom-end", function (){
          $("#jqSlider").slider("value", map.getLevel());
        });
      }
    });
</script>
</head>
<body>
  
  <div id="map"></div>
  
  <div id="jqSlider"></div>
  <div id="ui-sample-description" class="ui-drop-shadow">
    <div class="ui-header">Description</div>
    <div class="ui-content">
      This sample demonstrates the use of <a href="http://jquery.com/" target="_blank">jQuery</a> library with
      the ArcGIS API for JavaScript (compact). This sample uses the <a href="http://jqueryui.com/slider/"
      target="_blank">Slider</a> UI widget.
      Click on the map for location info.
    </div>
  </div>
  <div id="ui-sample-feedback" class="ui-drop-shadow">
    <div class="ui-header">Current extent</div>
    <div id="info" class="ui-content"></div>
  </div>
</body>
</html>

	Site wide shortcuts
`?`	Bring up this help dialog
`esc`	Dismiss this help dialog
`gh`	Go to Home
`gg`	Go to Guide
`ga`	Go to API Reference
`gs`	Go to Sample Code
`gt`	Scroll to top of page
`spacebar`	Scroll page down
`shift spacebar`	Scroll page up
`gb`	Scroll to bottom of page

	Sample Code
`/`	Focus search
`es`	Explore in the Sandbox
`s`	Share in online code editor
`vl`	View live example

Explore in the sandbox Open in CodePen View live sample

Description

Code

Keyboard shortcuts

Explore in the sandbox Open in CodePen
View live sample