Navbar and collapsible panel display appear problematic for IE10.
Is IE10 support planned or even feasible? Suggestions would be greatly appreciated.
Thanks for this great project. It's been a real pleasure to work from the provided samples.

Could you provide the code for the Measurement widget?
JS 4.x does not support this widget, but it should work in calcite-maps JS 3.x.
Thank you!

I have issues with fonts loading.

This is console log:

https://fast.fonts.net/dv2/14/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2?d4…c380973f51046de5905a6750d7b&projectId=9431e9a5-7a6d-4b5f-82be-4d935972de5a

https://fast.fonts.net/dv2/3/1e9892c0-6927-4412-9874-1b82801ba47a.woff?d44f…c380973f51046de5905a6750d7b&projectId=9431e9a5-7a6d-4b5f-82be-4d935972de5a

Any suggestion?

I am getting the following error when I try to load Street view widget.

StreetView.js:168 Uncaught TypeError: this.parentWidget.toggle is not a function
at Object.getStreetView (StreetView.js:168)
at Object. (init.js:63)
at Object. (init.js:645)
at Object.c [as onClick] (init.js:119)
at Object._fire (init.js:1279)
at Object._fireClickEvent (init.js:1285)
at init.js:63

Hi,
Is it possible to use these layouts for openlayers? Does it need any changes?and it it need can you please give me some hint about doing so?
thanks very much

Sorry if this is wrong place to mention this but I ran into issue using Dojo Bootstrap (Dropdown.js) and noticed that the version in this repo has a fix:

Line 55
// Fix for not setting dropdown target
if (target.length < 1) {
target = [e.target.parentElement];
}

Should this not be submitted as a pull request to the Dojo Bootstrap project?

I'm trying with jQuery but nothing I try will trigger it.

This is the best I can come up with.

$(document).ready(function() {
$('.dropdown-menu a[data-target="#panelInfo"]').trigger('click');
});

Issue 1: When using the Leaflet sample on mobile, if you select the Search option the search box ends up behind the pull-up menu in both portrait and landscape modes.

Expected Behavior 1: I expected the pull-up menu to close as soon as I chose the search option, and I expected the search box to be on top.

Issue 2: This is minor, but the 'esri' in the attribution text blurb is offset slightly negative in Safari. On Android + Chrome it seemed okay.

Expected Behavior 2: I expected all text of the attribution to be on the same line.

Screenshot below is iPhone 6s and Safari. Same behavior on Android 6 and Chrome.

Hi Allan.
Great work. From my point of view it would make a lot of sense to combine/integrate Calcite with our Web AppBuilder. The builder has improved a lot but still lacks behind when it comes to advanced UI work.

I'm adding a layer on the map but only shows either on MapView or SceneView. Is there a way to display layer on both views?? Thanks!

Clicking on the "Open App" links fails silently, doesn't open the apps.

http://esri.github.io/calcite-maps/samples/index.html

Gruntfile.js in copy:bootstrapfonts references ./node_modules/bootstrap-sass, but there is no dependency for it in package.json, so if one installs dependencies using npm, copy:bootstrapfontstask will do nothing. That task works after adding
"bootstrap-sass": "^3.3.7",
to devDependencies in package.json.

I did not use Bower, so I don't know if bower would install it.

I want to replace the navbar and use buttons for different panels [Widgets]. Is it possible to do that?

Thank you.

I noticed when I drag a corner of the browser to resize the window, the entire app's content stutters. It's not a smooth larger => smaller or smaller => larger view size transition.

Reproduced in Chrome Desktop and Safari 10.

I am using IE Version 11.0.9600.18124.
The map is not showing and no error is logged to the console.

Using the JS 3.x version works fine for me.

Hello

I would like to know if calcite-maps can work with Esri widgets (measure, filter, attribute table, layer list etc).

Sincerely
Ezequias

When clicking to get focus or mousing over the calcite-search-expander with the esri search widget, I'm expecting the expansion to not shrink once the mouse leaves on mouseout. Looking at the source:

https://github.com/Esri/calcite-maps/blob/22aed6043cd7492c03a0271084d8f92e2c61e5cc/lib/sass/support/arcgis-4.x.scss#L290-L315

or
https://github.com/Esri/calcite-maps/blob/22aed6043cd7492c03a0271084d8f92e2c61e5cc/lib/sass/support/arcgis-4.x.scss#L366-L396

I'm not expecting this behavior to occur, but it still is.

After including the jquery version of the build for calcite maps, I am getting this error
panels.collapse is not a function

It is occurring on line 40
panels.collapse("hide");

Please note that there are a number of breaking changes in this release mostly due to the requirements to support custom theming. Now you can theme the entire app with any color just by applying a few classes to nav, dropdown dropdown-menu and panel without having to recompile the Sass.

Please review the CHANGELOG for details.

When the leaflet sample runs it loads the following jpg's. Are they required or can they be removed? I didn't sleuth into where the images were coming from, I just noticed them slowing down the load time:

http://www.esri.com/~/media/Images/Content/data/graphics/arcgis-content/main-basemaps.jpg
http://www.esri.com/~/media/Images/Content/data/graphics/arcgis-content/main-demographics.jpg

Hi ,
First of all , Im new to this , so I might post this into the wrong place, feel free to delete/move or what ever there needs to be done (altrought I would apreciate if someone would tell me what I did wrong and how to fix it).
That aside, I find the Set location option limited, at least for my needs.
Im trying to use it as a way to find the location of an organisation.
Problem is that the start-up location cant be found with the search option.
(I dont know anything about the location data base so there might be a place where I can add the location I need, or a way to search coordonates).
Thank you for your time.

Consider implementing a UI loading template or overlay pattern.

This will help manage user perception up to the point where map tiles finish loading. Most folks won't be able to implement top-of-the-line performance and caching measures.

During some rough performance testing at 3G speeds the esri-leaflet demo was taking ~4.5 seconds before all tiles finished loading. The dojo-starter was showing ~4.5 seconds before the first tile loads and in most cases over 10 seconds until the final tile loaded.

Hy @alaframboise ,

1. I am trying to integrate the LayerList widget in the arcgis-3.x.html but it's not working as expected.
   Could you provide some support? My .html is available on JS Bin.

2. Could you provide the Measurement widget in your arcgis-3.x.html?
   I am struggling with this one as well.

Thank you for your support,
Tim.

I would appreciate if calcite-maps would be available though bower.

Cheers!

I used example 3.x, but I changed to ArcGIS JS 3.17 and I found issues with dojo-bootstrap [collapse.js, Support.js].

Console errors:

Support.js: 178 Uncaught TypeError: Cannot set property 'display' of undefined
Collapse.js: 148 Uncaught TypeError: Cannot read property 'call' of undefined

Any suggestion?

Thank you.

Hi! Big fan of the open source work to make it easier to theme modern maps. I'd love to use the Calcite theme but require ARCGIS JS 3.2 in order to load my own WMS layers. (I think that is the correct reading of the JS API documentation regarding WMS...) However I think I'm unable to use most of the widgets and other classes referenced by the Builder and in the Example in the README as 3.2 lacks those classes?

E.g. "esri/widgets/Search" doesn't exist at https://developers.arcgis.com/javascript/3/jsapi/. Any clarification and advice would be awesome and greatly appreciated!

Seems like setting the default view should be easy.. but I cant figure it out.

setting app.activeView = app.mapView; or app.activeView = app.sceneView; doesn't work for me on any of the examples.

How do you change the default view between mapview and sceneview?

Awesome app, thanks so much for creating and sharing this.

I'm struggling with how to open the app in Map View.

Taking the sandbox example, changing line 299 to app.activeView = app.mapView; has no effect - the app still opens in Scene View.

The code at line 392 (// Toggle map and scene) does correctly change the mode - is there an event which needs to fire before app.activeView = app.mapView will work?

Or is there another way to open the app in Map View?

Hey folks, just a heads up that some serious changes are coming so that this framework is fully compatible with the final release of the ArcGIS JS API 4.x.

What's new?

• Build System - fully customizable Sass build system integrated with Calcite-Bootstrap and Bootstrap
• Install - npm and bower
• Styler - interactively style apps

It would be super useful if:

1. the Theme and Layout settings in the Settings widget could be exported as CSS for use in another app.

2. all the settings could be saved locally and the read automatically on app restart.

Can the ESRI Leaflet demo HTML file be updated to pass W3C validation?

Whenever I paste the file into the validator, I get the following errors:

1. Error: Element div is missing one or more of the following attributes: role.
   From line 75, column 4; to line 75, column 76
   se -->↩ <div id="mainNav" class="collapse navbar-collapse" aria-expanded="false">↩ <
   Attributes for element div:
   Global attributes
2. Error: Attribute aria-lablledby not allowed on element ul at this point.
   From line 82, column 7; to line 82, column 63
   /a>↩ <ul class="dropdown-menu" aria-lablledby="optionsToggle">↩
   Attributes for element ul:
   Global attributes
3. Error: No space between attributes.
   At line 90, column 32
   ="settingsMenu"class="" role="
4. Error: The aria-controls attribute must point to an element in the same document.
   From line 58, column 5; to line 58, column 149
   der">↩ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNav" aria-expanded="false" aria-controls="navbar">↩
5. Error: The aria-labelledby attribute must point to an element in the same document.
   From line 100, column 2; to line 100, column 101
   dow -->↩↩ <div class="modal fade" id="modalSplash" tabindex="-1" role="dialog" aria-labelledby="splashlModal">↩

coming soon!

Really great, modern approach. Are there any plans to roll this into AGOL/Portal, specifically the map viewer?

The styler app doesn't work (Chrome 52).

Mixed Content: The page at 'https://esri.github.io/calcite-maps/samples/styler/styler.html' was loaded over HTTPS, but requested an insecure stylesheet 'http://js.arcgis.com/4.0/esri/css/main.css'. This request has been blocked; the content must be served over HTTPS.

Mixed Content: The page at 'https://esri.github.io/calcite-maps/samples/styler/styler.html' was loaded over HTTPS, but requested an insecure script 'http://js.arcgis.com/4.0/'. This request has been blocked; the content must be served over HTTPS.

Should be a simple fix.

Coming soon...

When you get a chance, an explanation for each class would be quite helpful.

In the demo HTML files, there are <!-- HTML comments --> within the <script> tags, when they should be // JavaScript comments.

This:

        $(document).ready(function(){
                    // Do something
        });<!-- jQuery -->

...should be this:

        $(document).ready(function(){
                    // Do something
        }); // <!-- jQuery -->

Examples:

• https://github.com/Esri/calcite-maps/blob/master/demos/arcgis-dojo-starter-3.x.html#L219
• https://github.com/Esri/calcite-maps/blob/master/demos/arcgis-jquery.html#L699

When using a calcite-maps app on my ipad, which device-width is 768px, the app behaves like on a mobile device (e.g. the panels are full screen). When i took a look on the calcite-maps.css-file, it seems, that switching to mobile behaviour happens, when the device-width is equal oder smaller than 768px

efor example:

@media ( min-width :769px) {
.visible-mobile-only {
display: none !important
}
}

In the calcite-maps.js on the other hand, there is a variable "isMobile", which is set to "true", if device-width is smaller than 768px.
It seems to me, that it is not exactly clear, what happens, when the device-with is exactly 768px. The treatment in css and javascript seems to be incosistent. In my opinion, in this case the app should use the non mobile behaviour, because i think it is for example not necessary that the panels open full screen on a tablet.

Hello,

Problem:
Map.infoWindow is not responsive.

I want to add responsive like calcite panels, I mean calcite panels are showing really good on different devices and orientation devices, Can I add the same functionality to map.infoWindow (Pop-up)?

Thank you.

Recommend using SEMVER and adding a CHANGELOG.md that formatted like http://keepachangelog.com/ (which is pretty standard).

This project would also be a great candidate for GitHub releases, which would make finding and downloading a particular version really easy.

I made an accordion of 4 panels and each time i switch to a panel, only this panel title is shown, others are masked

Hi Allan,

I am using popups and the Measurement widget in Calcite Maps 3.20.
This combination seems not to be working because every time you click to create a measurement the popup appears and covers your region of interest.

I guess the solution is to dock the popups but that is only available in Calcite Maps 4.x.
The Popup widget with dockEnabled:true is not available in JavaScript 3.x.

Still, your panels in Calcite Maps 3.20 are docked and also beautiful responsive.

Is there a way to make the popups behave like the panels in Calcite Maps 3.20 ?

Thank you,
Tim

I know there is a true fullscreen plugin for leaflet. Would be great to have this as a built in option instead of just hiding the navbar.

I originally opened an issue in the cmv-calcite repo regarding the popup menu in their layer control widget https://github.com/cmv/cmv-calcite-maps/issues/5 but have discovered that it is an issue with Calcite even on the Esri sample page.
To see, go to Esri sample https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=graphics_contextmenu , change the two stylesheet links:
<link rel="stylesheet" href= "https://js.arcgis.com/3.20/esri/themes/calcite/dijit/calcite.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/themes/calcite/esri/esri.css">

and the body class tag:
<body class="calcite" style="font-size: 0.75em;">

What happens is the first context menu that opens is not in focus, and thus clicking outside the popup menu does nothing. If you open a second menu by clicking a different graphic, then it gets focus and works as expected, or if you click in the first popup it will also get focus. In the cmv app, the behavior is similar when clicking on the menu icon in the layer control widget. It is worse in that app, in that the user could get frustrated since the popup menu will stay open until it gets focus, even if the widget is closed. Hopefully this is a relatively easy fix. Debugging it takes me into esri's menu.js, which is minified.

I didn't check all of them, but here's a listing of what I saw that is broken:

• Main link at top o' page: http://esri.github.io/calcite-maps/extras/index.html
• What's Included section > "Visit the samples..."
• Getting Started section > 1. "User the styler..."
• Example section > "View it live"

Hy @alaframboise ,

I applied the Calcite Maps theme on a ESRI tutorial for dojox charts.
The only structural change I did to the tutorial was to deactivate the infoWindow and use the popup:

        // Use the info window instead of the popup.
        // var infoWindow = new InfoWindow(null, domConstruct.create("div"));
        // infoWindow.startup();

        map = new Map("map", {
          basemap: "streets",
          center: [-113.405, 43.521],
         // infoWindow: infoWindow,
          zoom: 6
        });

       // map.infoWindow.resize(275, 275);

But the popup returns an error, it doesn't seem to be using it's full height:

Is this a compatibility issue with Calcite Maps?
Can it be fixed?

My goal is to learn to integrate dojox charts in Calcite Maps.

Thank you,
Tim.

Not an issue per se, but would love some guidance on how I might be able to incorporate an attribute table into this design framework. Using BorderContainers doesn't really seem to work - the map just takes up the entire page...

snooping around i was confused to see built code for v0.0.2 checked into master without a corresponding release

https://github.com/Esri/calcite-maps/tree/master/dist/js/jquery