When using map.centerAndZoom(point); on a polygon's center point, the following error occurs, even if setTimout() is wrapped around it (a normal workaround):

My code is as follows:

I have tried increasing the timeout as well. I saw around online that symbology may affect this, so here is the symbology of the polygon as seen in server:

Renderer:
Simple Renderer:
Symbol:
Style: esriSFSSolid
Color: [0, 0, 0, 0]
Outline:
Style: esriSLSSolid
Color: [76, 230, 0, 255]
Width: 1
Label:
Description:
Transparency: 0
Labeling Info:

I took the full screen template, I created a row and 2 columns (col-md-10 and col-md-2). I put the mapdiv in the size '10' column and left the other (size 2) column empty.

Like this, the initial map draws correctly (full size top to bottom).

As I added body text to the second column the map got progressively shorter. The more lines of text I added to the 2nd column the shorter the map got.

I'm guessing it's something in _setMapDiv() though I haven't worked it out yet.

In bootstrapmap.css: -webkit-filter: invert(80%); (around line 72) works fine in Chrome, but not in IE11. Makes pop-ups show white text on white background in the popup header so you can't see the close buttons and prev-next icons. The buttons work, you just can't see them.

We need a better cross-browser solution for this.

I think I've found a bug. The bug occurs when clicking a graphic to open an infowindow if another infowindow is already open but parts of that already open infowindow is outside the visible map extent.

You can see and reproduce the issue in windows example in the demo pages (http://esri.github.io/bootstrap-map-js/demo/dojo/windows.html) by following this procedure:

1. Click the show window button, and press the green go button in the modal.
2. Click one of the purple icons in the map that shows up, to open an infowindow for that graphic.
3. Pan the map so that parts of the infowindow goes above the visible area of the map.
4. Try to click one of the other purple icons.

The observed result from this is that clicking the graphic (in step 4) only updates the content of the already open infowindow. The anchor of the already opened infowindow is not changed, but stays attached to the first graphic that was clicked (step 2).

Are there any workarounds for this behavior?

Not sure if that's intentional or not but in bootstrapmap.css, the map class has:

height: 100%;
min-height: 100px;
max-height: 1000px;

which means the map won't be higher than 1000px even though height 100% has been specified. Removing max-height property makes the map fill the window.

Hello, I wonder if there is a template that includes Twitter boostrap version 3, angularjs and esri JavaScript Api in a recommended scale-able architecture . I am having troubles putting it together. Can you demonstrate a way to do it ?

http://esri.github.io/bootstrap-map-js/bootstrap_v3/dist/css/bootstrap.css now throws a 404

On the map control, if you hover your mouse and move the mouse scroll wheel, the normal behavior is to zoom out/in. This does not seem to be happening.

Replication:

1. http://esri.github.io/bootstrap-map-js/demo/dojo/getstarted.html
2. Click Step 3 then Map tabs
3. Hover mouse over map control, use scroll wheel
4. Expected: map to zoom in/out. Actual: map does not zoom in/out. Note that the +/- buttons correctly zoom the map.

I'm new to web GIS development, so I hope my question makes sense. I will provide a little background to explain my question.

I developed a dijit that encapsulates a map that can geocode, use geolocation, and accept a user-click event in order to assign a lat/lon to an address that may or may not be easily "geocodable" (e.g. International addresses). This dijit can then be dropped in a website that hasn't previously had any mapping component and address entry can be accompanied with a more accurate assigning of "location" (lat/lon). So far the dijit hasn't been set up to be "responsive" in any way.

One internal client is using bootstrap 2.3 and wants the map component to play nicely. I started to look at using this project, but noticed bootstrap 3 was required. Upon digging deeper, it looks like I can switch from using esri/map to bootstrapmap.js in my dijit class and then in the client use Bootstrap 2.3 based html and css to control my custom dijit in a responsive manner with bootstrapmap.js making sure it recenters and behaves nicely. Do you see any pitfalls to this approach? Bootstrapmap.js isn't really dependent on bootstrap (version 2.x or 3.x) by itself, only the template samples have the dependency?

Any insight you could provide would be greatly appreciated!

In my application, I am switching stylesheets at certain points in the workflow to change the look and feel of the application (just adding a bootstrap nav bar).

I switch the main web page style from:

html, body {
height: 100%;
}

to:

html, body{
height: 100%;
padding-top: 35px;
}
.nav {
margin-top: 40px;
}

After this is done, pressing shift + drag to create a bounding box for zoom has a different origin than where the mouse is clicked. If I re-size the browser, it will update and the bounding box origin get updated and works as expected.

Note: I am also switching bootstrap theme CSS files.

on this page: http://esri.github.io/bootstrap-map-js/demo/jquery/webmap.html

with the top widget "Title" collapsed: if you click on the map you get the correct polygon selected.
with the top widget "Title" expanded: if you click on the map you get a polygon below the point clicked or just missed behavior. i think it corresponds to the height of the panel you expanded.

i am on a mac running 10.9.4 and this behavior has been duplicated on: Chrome 36.0.1985.125 and Safari 7.0.5 (9537.77.4).

thanks and great API. i am using it on our project.

paul

It would be nice if esri/arcgis/utils was not required unless it was needed (i.e. unless application calls createWebMap()). I've found for a simple application that uses createMap() and then adds a single feature layer, I can shave off ~30kb of JavaScript by commenting out the code that requires esri/arcgis/utils.

This could be done w/o changing the API by using a nested require block inside createWebMap(). I'm not aware of any drawbacks to that.

Just wanted to get other people's thoughts on this idea.

Hi,
When viewing the demo, you are presented with the choice of going a Dojo + jQuery or Pure Dojo route. Could you provide some details of the pros and cons of either choice and whether their are any limitations imposed by either option?
Thanks!
Simon

It's bad practice as it prevents file from being loaded localy

The url from demo/index.html#L19:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

resolves to

file://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css

and prevents the map from loading properly.

Just a quick note to point out that there is javascript code commented using HTML comments rather than javascript comments in the windows.html file.

how can i put several geolocations on it?

When I use the regular JSAPI I can do this:

      // custom basemaps
    esriConfig.defaults.map.basemaps.basemapKC = {
        baseMapLayers: [
            { url: tiledGenericBaseURL }
        ], title: "King County Basemap"
    };

then when I instantiate the map I can use
map = new esri.Map("map", {
extent: startExtent,
basemap: "basemapKC"
})

when I use the Bootstrap-map-js it appears that there is no 'basemaps' collection on the esriConfig.defaults.map object. What is the best way to add custom basemaps when using Bootstrap-map-js?

After adding content and showing the InfoWindow on the map, resizing of window causes this error:

When in the JQuery Getting started section, step 2 & 3 do not work.

Steps to reproduce:

• Navigate to getting started jquery
• Click on Step 2
• App still on Step 1

Works as expected with Dojo

cc @alaframboise

Since Esri ArcGIS states that they support IE7+ I thought the amazing bootstrap-map-js project would also be compatible with IE 7. Is it compatible or tested for IE 7+?

I'm getting an Invalid Argument error with no further info on IE Developer Tools console window when simulating the page on IE 7/8 document modes. IE 9 onwards works great. All other browsers work great too! :) Only finicky IE refuses to work as always...

Looks like dojo.require is barking somewhere. See this related question: http://stackoverflow.com/q/13074513/114029

If I remove the reference to bootstrapmap.js and the var map = ... declaration, then the code works and I see hey Leniel!; otherwise the code breaks and I see the Invalid argument. The code breaks in the call to BootstrapMap.create.

Can you shed some light?

Here's the minimum code I had to assemble to get to what was causing the error:

<!-- ArcGIS JavaScript API v3.8 -->
<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.8/3.8/init.js"></script>

<script type="text/javascript">

function init()
{
    require([
        "esri/map",
        "/myproject/Scripts/bootstrapmap.js",
        "esri/layers/FeatureLayer"
    ], function(
        Map,
        BootstrapMap,
        FeatureLayer
    )
    {

        // Get a reference to the ArcGIS Map class
        var map = BootstrapMap.create("mapDiv", {
            basemap: "oceans",
            center: [-117.789, 33.543],
            zoom: 12
        });

        alert('hey Leniel!');

    });
}

dojo.addOnLoad(init);

</script>

The issue #10 is not fixed!

Map on the Responsive example doesn't display under IE8 (actual IE8 under XP, not an emulated IE8 in later version of IE). Works fine in IE11, Latest Chrome and FF.

Please fix it or merge suggetion of @tschlarm

Using IE11, JSAPI3.9 and latest BootstrapMap

This is most likely an ESRI jsapi issue, but I have a map using BootstrapMap where the scrollWheelZoom is enabled. It works well until I open and new tab and tear the new tab off from the main IE11 window. Once I do that, the scrollWheelZoom on the map stops working. Seems to work fine in Chrome.

Doing the same thing on a regular webpage (say CNN.com) in IE11, the scrollwheel still works.

Just wondering if anyone else has seen this or if there is a known work around.

Thanks

Is it possible to get an updated documentation for beginners? I downloaded the boostrap-map-js code, and added it to my web server folder. I'm following the steps mentioned here:http://esri.github.io/bootstrap-map-js/demo/jquery/getstarted.html, and nothing is displaying when I open up my index.html file in my browswer. Are there steps missing that I need to know about?

After adding content and showing the InfoWindow on the map, zooming in and out causes this error:

I was playing around with the _setMapDiv function and found this small calculation adjustment to provide a much smoother experience:

          if (w != this._w || wd != this._wd) {  
            var b = document.body.clientHeight;
            var mh = this._mapDiv.clientHeight;
            var ms = this._calcSpace(this._mapDiv);
            var mh1 = mh - ms;
            var d = (this._w == 0) ? b : Math.Min(b, this._w); 
            var room = w - d;
            var mh2 = room + mh1;
            style.set(this._mapDivId, {
              "height": mh2 + "px",
              "width": "100%"
            });
            this._w = w;
            this._wd = wd;

The problem is body content might be very large causing a negative and/or rapidly fluctuating mh2.
I haven't fully tested it, but what I noticed was with the original code would perform poorly when slowly resizing the window and you have more body content bellow this map. My change has solved this for me.

now that github supports hosting pages from the master branch, there's no need to remember to keep gh-pages in sync.

I've been trying to move the "+" and "-" options on the map to another location on the page, based on some requirements I have. When I try and use the sliderPosition option defined in the ArcGIS API, the zoom buttons stretch across the map incorrectly, and the buttons stay in the position at the top left.

To simplify, I went into the demo code I can download, and I added the options I wanted. For example, in the fullmap-template/index.html, I over-wrote the new map constructor:

var map = BootstrapMap.create("mapDiv", {
              basemap: "national-geographic",
              center: [-122.45, 37.77],
              zoom: 12,
              scrollWheelZoom: false,
              sliderPosition: "bottom-left"
});

When I render the page on my local server, it looks like this:

I've been trying to figure out if there is a limitation to this, but I can't seem to find a lot of documentation on the extra options. For reference, here is the ArcGIS API:

https://developers.arcgis.com/javascript/jsapi/map.html

It's me again.... ;)

The issue I'm having is this: http://stackoverflow.com/q/22495378/114029

Can you shed some light on this?

Is map.enableScrollWheelZoom() supported?

https://github.com/Esri/bootstrap-map-js/blob/master/src/js/bootstrapmap.js#L67

why is this being disabled? I see the function name has "touch" in it.. is it for mobile devices? i did a quick test on my iPad and it looks like navigation is intact with that line commented out.

I see that there are some updates supporting the recent v3.10 release of the API I did a quick run-through with this update but I notice that the arrow/triangle at the bottom of my infoWindow (the 'beak') is all messed up with an obvious CSS problem.

On a related note, I notice that all the samples are still using v3.9.

1. http://esri.github.io/bootstrap-map-js/demo/jquery/getstarted.html
2. Click Step 3 then Map tabs
3. Map control does not show up.

Map on the Responsive example doesn't display under IE8 (actual IE8 under XP, not an emulated IE8 in later version of IE). Works fine in IE11, Latest Chrome and FF.

how to import js.arcgis lib with requirejs?

I see you use esri/dijit/Popup everywhere.

It would be nice if there was a sample showing how to use dijit/TooltipDialog.

I'm getting an inspection error on this line in index.html:
<!--[if lt IE 9]> <script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

Wonder if this is still supported and updated?
Did a quick test and seems it acts weird with arcgis js 3.15 and up.
Any planning to update this?

I tried this code:

 featureLayer.on("dbl-click", function(evt)
{
    dojo.stopEvent(evt);

   alert('test');
   console.log('double clicked');
});

Works great on desktop...

On mobile Chrome, when I double tap the feature/point it doesn't work, that is, the map is being zoomed.

Is there an equivalent dbl-click like dbl-touch when on mobile?

Hello,

I want to use large slider that shows zoom levels, not the small one that only has +/- buttons.

When I create a map using BootstrapMap.create like below, I still get a small slider. How can I get a large slider?

var map = BootstrapMap.create("mapDiv",{
  sliderStyle: "large",
  extent:extent,
  logo:false,
  scrollWheelZoom: true
}); 

If I create a map using esri/map with the same options (map parameters), large slider does show up. Thank you for your hep.

Yeon

We are using the Boostrap map full map template with an ArcGIS.com map that has secured services that prompt for a login.

I've been able to style the esriSignInDialog window and get it to work in various browsers and devices, but there are still issues with the dialog on iOS (Both 6 and 7)/Safari devices. The on screen keyboard seems to change the navbar at the top and the sign in dialog jumps all around.

Our current workaround is to have the user use Chrome on iOS. Any suggestions or support on the IdentityManager and sign in dialog?

I wanted to have a bootstrap-map-js NuGet package for easy integration with Visual Studio projects.

I created it here: https://www.nuget.org/packages/bootstrap-map-js/

User cannot scroll InfoTemplate content on touch devices (Android, iOS)
Example: http://test1.maps.kytc.ky.gov/ugh/templates/fullmap-template/

For including in other projects or as part of other generators, it would be extremely beneficial to have this project included as a registered Bower package.

The page https://esri.github.io/bootstrap-map-js/src/js/bootstrapmap.js is not available. It shows the error 404 site not found. Why?