template error with jquery ui

abukhan · ‎10-18-2015

I tried to work with geosearch-template from

Esri/bootstrap-map-js · GitHub

However I wanted to add

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)

r.injectUrl/f<()

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>

<head>

<title>Geosearch Template for Bootstrap</title>

#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;

}

*/

</style>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</button>

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

</div>

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

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

</ul>

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

</ul>

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

</div>

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

</form> -->

</div>

</div>

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

</div>

</div>

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

</form>

</div>

</div>

</div>

</div>

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>

require(["esri/map",

"esri/dijit/Scalebar",

"esri/dijit/Geocoder",

"esri/InfoTemplate",

"esri/graphic",

"esri/geometry/Multipoint",

"esri/symbols/PictureMarkerSymbol",

"esri/dijit/Popup",

"dojo/dom",

"dojo/on",

"application/bootstrapmap",

"dojo/domReady!"],

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

},"geosearch");

geocoder.startup();

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();

def.then(function(res){

geocodeResults(res);

});

}

function geocodeSelect(item) {

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

g.setSymbol(sym);

addPlaceGraphic(item.result,g.symbol);

}

function geocodeResults(places) {

places = places.results;

if (places.length > 0) {

clearFindGraphics();

var symbol = sym;

// Create and add graphics with pop-ups

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

addPlaceGraphic(places, symbol);

}

zoomToPlaces(places);

} 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 = item.name;

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

map.graphics.add(graphic);

}

function zoomToPlaces(places) {

var multiPoint = new Multipoint(map.spatialReference);

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

//multiPoint.addPoint(places.location);

multiPoint.addPoint(places.feature.geometry);

}

map.setExtent(multiPoint.getExtent().expand(2.0));

}

function clearFindGraphics() {

map.infoWindow.hide();

map.graphics.clear();

}

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

$(document).ready(function(){

// Close menu

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

$(".navbar-toggle").click();

});

// Geosearch nav menu is selected

$("#geosearchNav").click(function(e){

$("#geosearchModal").modal("show");

// // Bootstrap work-around

$("body").css("margin-right","0px");

$(".navbar").css("margin-right","0px");

});

</script>

<!-- Bootstrap core JavaScript

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

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

</body>

</html>

abukhan · ‎10-18-2015

I found the answers.. Need to add the script tag for esri javascript after the script tag for the jquery-ui...and then it works

View solution in original post

abukhan · ‎10-18-2015

I found the answers.. Need to add the script tag for esri javascript after the script tag for the jquery-ui...and then it works