I tried to work with geosearch-template from
Esri/bootstrap-map-js · GitHub
However I wanted to add
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></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">
<head>
<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="https://community.esri.com//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="geosearch-template.css" rel="stylesheet">
<!-- Bootstrap-map-js -->
<link rel="stylesheet" type="text/css" href="https://community.esri.com//js.arcgis.com/3.13/esri/css/esri.css">
<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;
}
}
*/
</style>
<!-- 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>
<![endif]-->
</head>
<body>
<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>
</button>
<a class="navbar-brand" href="#">Geosearch</a>
</div>
<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>
</ul>
<!--Option 1: Modal-->
<ul class="nav navbar-nav">
<li><a id="geosearchNav" href="#">Geosearch</a></li>
</ul>
<!--Option 2: Insert in nav bar-->
<!-- <form class="navbar-form navbar-right">
<div class="form-group">
<div id="geosearch"></div>
</div>
<button id="btnGeosearch" type="submit" class="btn btn-success">Search</button>
</form> -->
</div><!--/.nav-collapse -->
</div>
</div>
<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>
<div class="modal-body">
<form id="geosearch-form">
<div class="form-group">
<div id="geosearch"></div>
</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>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<!-- 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>
<script src="//js.arcgis.com/3.14compact/"></script>
<!--<script src="//js.arcgis.com/3.13compact"></script>-->
<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
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://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 src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
Solved! Go to Solution.
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
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