New to Kendo UI for jQuery? Download free 30-day trial

Include Esri(ArcGIS) Map in the Application

The example below demonstrates how to include an Esri(ArcGIS) map when working with the Hybrid UI Application of Kendo UI.

    <style id="jsbin-css"></style>
    <link rel="stylesheet" href="" />
    <script src=""></script>
    <div data-role="view" data-stretch="true" data-init="onInit">
      <header data-role="header">
        <div data-role="navbar">
          <span data-role="view-title">Esri Map Example</span>

      <div id="map">

      <footer data-role="footer">
        <div data-role="tabstrip">
          <a data-icon="home">Home</a>
          <a data-icon="info">Info</a>
      var app = new;

      //initialize the map
      function onInit(){
        var map;

        require(["esri/map", "dojo/domReady!"], function(Map) {
          map = new Map("map", {
            basemap: "topo",
            center: [-122.45,37.75], // long, lat
            zoom: 7,
            sliderStyle: "small"

See Also

Articles on the Application and other Hybrid UI components in Kendo UI:

For more runnable examples on the Hybrid UI Application of Kendo UI, browse its How To documentation folder.

In this article