AnsweredAssumed Answered

template error with jquery ui

Question asked by abujkhanfrb on Oct 18, 2015
Latest reply on Oct 18, 2015 by abujkhanfrb

I tried to work with geosearch-template from

Esri/bootstrap-map-js · GitHub


However I wanted to add

<script src="//"></script> after the jquery script reference

and I get the error like this(shows in firebug in firefox).


Error: multipleDefine

d()/3.14compact/ (line 5)

Ja()/3.14compact/ (line 27)

Xa/<()/3.14compact/ (line 28)

a()/3.14compact/ (line 5)

Xa()/3.14compact/ (line 28)

pa/g()/3.14compact/ (line 25)




The reason I wanted to add the jquery-ui reference, so that I can use some function from jquery-ui (like dialog()).....




Here is my complete page code:


<!DOCTYPE html>

<html lang="en">


    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="description" content="">

    <meta name="author" content="">

    <link rel="shortcut icon" href="../images/favicon.png">


    <title>Geosearch Template for Bootstrap</title>


    <!-- Bootstrap core CSS -->

    <link href="//" rel="stylesheet">


    <!-- Custom styles for this template -->

    <link href="geosearch-template.css" rel="stylesheet">



    <!-- Bootstrap-map-js -->

    <link rel="stylesheet" type="text/css" href="//">  

    <link rel="stylesheet" type="text/css" href="../../src/css/bootstrapmap.css">  

    <style type="text/css">

      #mapDiv {

        min-height: 100%;

        max-height: 100%;



      .simpleGeocoder {

        margin-right: 5px;



      /* Option 2: Geosearch in nav;

      .simpleGeocoder .esriGeocoderContainer {

        width: 180px;


      .simpleGeocoder .esriGeocoder input {

        width: 118px;


      @media (max-width: 767px) {

        .navbar-form .form-group {

          float: left;


        .simpleGeocoder {

          margin-right: 7px;







    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!--[if lt IE 9]>

      <script src="../bootstrap_v3/docs-assets/js/html5shiv.js"></script>

      <script src="../bootstrap_v3/docs-assets/js/respond.min.js"></script>






    <div class="navbar navbar-inverse navbar-fixed-top">

      <div class="container">

        <div class="navbar-header">

          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>


          <a class="navbar-brand" href="#">Geosearch</a>


        <div class="collapse navbar-collapse">

          <ul class="nav navbar-nav">

            <li class="active"><a href="#">Home</a></li>

            <li><a href="#about">About</a></li>

            <li><a href="#contact">Contact</a></li>


          <!--Option 1: Modal-->

          <ul class="nav navbar-nav">

            <li><a id="geosearchNav" href="#">Geosearch</a></li>


          <!--Option 2: Insert in nav bar-->

          <!-- <form class="navbar-form navbar-right">

            <div class="form-group">

              <div id="geosearch"></div>


            <button id="btnGeosearch" type="submit" class="btn btn-success">Search</button>

          </form> -->

        </div><!--/.nav-collapse -->



    <div id="modaldialog">Hery I am here</div>

    <div class="modal fade" id="geosearchModal" style="display: none;" aria-hidden="true">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

                  <h4 class="modal-title">Geosearch</h4>


                <div class="modal-body">

                  <form id="geosearch-form">

                    <div class="form-group">

                      <div id="geosearch"></div>


                    <button id="btnGeosearch" type="button" class="btn btn-success" data-dismiss="modal"> Go </button>

                    <button id="btnClear" type="submit" class="btn btn-default" data-dismiss="modal">Clear</button>



            </div><!-- /.modal-content -->

        </div><!-- /.modal-dialog -->



    <!-- Bootstrap-map-js -->

    <div id="mapDiv"></div>


      <script type="text/javascript">

        var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));

        var dojoConfig = {

            //The location.pathname.replace() logic below may look confusing but all its doing is

            // enabling us to load the api from a CDN and load local modules from the correct location.

            packages: [{

                name: "application",

                location: package_path + '../../../src/js'




      <script src="//"></script>

    <!--<script src="//"></script>-->














          function (Map, Scalebar, Geocoder, InfoTemplate, Graphic, Multipoint, PictureMarkerSymbol, Popup, dom, on, BootstrapMap) {

            "use strict";


            // Get a reference to the ArcGIS Map class

            var map = BootstrapMap.create("mapDiv", {

              basemap: "streets",

              center:[-122.45, 37.77],

              zoom: 12,

              scrollWheelZoom: false


            var scalebar = new Scalebar({

              map: map,

              scalebarUnit: "dual"



            // Create widget

            var geocoder = new Geocoder({

              value: 'starbucks',

              maxLocations: 10,

              autoComplete: true,

              arcgisGeocoder: true,

              map: map



            geocoder.on("select", geocodeSelect);

            geocoder.on("findResults", geocodeResults);

            geocoder.on("clear", clearFindGraphics);


            // Geosearch functions

            on(dom.byId("btnGeosearch"),"click", geosearch);

            on(dom.byId("btnClear"),"click", clearFindGraphics);


            map.on("load", function () {

              map.infoWindow.offsetY = 25;

              map.infoWindow.set("highlight", false);



            function geosearch() {

              var def = geocoder.find();






            function geocodeSelect(item) {

              var g = (item.graphic ? item.graphic : item.result.feature);





            function geocodeResults(places) {

              places = places.results;

              if (places.length > 0) {


                var symbol = sym;

                // Create and add graphics with pop-ups

                for (var i = 0; i < places.length; i++) {

                  addPlaceGraphic(places[i], symbol);



              } else {

                alert("Sorry, address or place not found.");




            function addPlaceGraphic(item,symbol)  {

              var place = {};

              var attributes,infoTemplate,pt,graphic;

              pt = item.feature.geometry;

              place.address =;

              place.score = item.feature.attributes.Score;

              // Graphic components

              attributes = { address:place.address, score:place.score, lat:pt.getLatitude().toFixed(2), lon:pt.getLongitude().toFixed(2) };  

              infoTemplate = new InfoTemplate("${address}","Latitude: ${lat}<br/>Longitude: ${lon}<br/>Score: ${score}");

              graphic = new Graphic(pt,symbol,attributes,infoTemplate);

              // Add to map




            function zoomToPlaces(places) {

              var multiPoint = new Multipoint(map.spatialReference);

              for (var i = 0; i < places.length; i++) {







            function clearFindGraphics() {





            function createPictureSymbol(url, xOffset, yOffset, xWidth, yHeight) {

              return new PictureMarkerSymbol(


                  "angle": 0,

                  "xoffset": xOffset, "yoffset": yOffset, "type": "esriPMS",

                  "url": url, 

                  "contentType": "image/png",

                  "width":xWidth, "height": yHeight




            var sym = createPictureSymbol("../images/blue-pin.png", 0, 12, 13, 24);


            // Show modal dialog, hide nav


              // Close menu

              $('.nav a').on('click', function(){



              // Geosearch nav menu is selected





              //  // Bootstrap work-around









    <!-- Bootstrap core JavaScript

    ================================================== -->

    <!-- Placed at the end of the document so the pages load faster -->

    <script src=""></script>

      <script src="//"></script>

    <script src="//"></script>