cmv / cmv-calcite-maps

Using CMV with Esri's Calcite Maps

cmv-calcite-maps

This repo combines CMV with Esri's Calcite Maps. Calcite Maps is "A theme for Bootstrap for designing, styling and creating modern map apps." The Esri repository provides documentation on the Calcite Maps CSS and JavaScript files.

Implementation

There are very few changes needed to use Calcite Maps. The majority of the customizations are within the HTML page. See the example. In addition, you will need to include the new _CalciteMixin.js in app.js. A CSS file cmv-calcite.css is included which helps with the styling of your CMV application.

##Demo The demo in this repo includes many core CMV widgets as well as a custom Styler widget adapted from Calcite Maps. You can use this widget to experiment with the different theme styles and colors.

Widgets

Most of the CMV core widgets work without modification. The notable exceptions are the Esri Editor and Directions widgets which have some styling issues. Custom The Directions widget will

It is expected that many of the contributed CMV widgets and widgets for Esri's Web AppBuilder (Using the method documented in this repo) should work without modification though few have been tested at this point. Widgets that use a full pane like the Attributes Table widget are not currently supported though hopefully will be in the near future.

Mobile

One of the strengths of using Calcite Maps is the responsive design provided by the Bootstrap framework.

License

MIT

cmv-calcite-maps's Issues

the resources from cdn are not accessible

https://cdn.rawgit.com/cmv/cmv-app/develop/viewer/js/viewer/_ControllerBase.js
https://cdn.rawgit.com/cmv/cmv-app/develop/viewer/js/viewer/_ConfigMixin.js
https://cdn.rawgit.com/cmv/cmv-app/develop/viewer/js/viewer/_LayoutMixin.js

Putting these resources on local repository will be better.

Widgets remain gray after they are closed

Hi @tmcgee ,

A few questions here, hope not too many.

1. The buttons in the menu remain active after closing the menu bar. Is this the default setting?

2. I am trying to load a feature layer (a polygon) but it is not showing up in the layers list. Am I doing something wrong here with my code?

        operationalLayers: [{
            type: 'tiled',
            url: 'https://tiles.arcgis.com/tiles/oO7KYsE1NxneFsw3/arcgis/rest/services/ndvi/MapServer',
            title: 'ndvi1',
        },  {
            type: 'tiled',
            url: 'https://tiles.arcgis.com/tiles/oO7KYsE1NxneFsw3/arcgis/rest/services/ndvi/MapServer',
            title: 'ndvi2',
        },{
            type: 'feature',
            url: 'https://services3.arcgis.com/oO7KYsE1NxneFsw3/arcgis/rest/services/polygon/FeatureServer',
            title: 'polygon',
            options: {
                id: 'polygon',
                opacity: 1.0,
                visible: true,
                outFields: ['*'],
                mode: 2
            }
        }]

Thank you,
Michelle.

Click "close" button on panel it does not work.

I create one panel manually in deom.html file. Click "close" button it does not work.
I do not know where to call the close button function.

The demo.html file is as below:

demo.zip

problem with local basemaps

HI Dear
I have a problem with set custom basemap.

i want to set owner basemap from local server and not onlie basemap like osm or other online basemap.
this is my basemaps.js and viewer.js config.
when i set basemap to osm app is start normally but when i set basemap to my local basemap app not load.
thanks

viewer.js
define([
'esri/units',
'esri/layers/ImageParameters',
'dojo/topic'
], function (units, ImageParameters) {

// helper function returning ImageParameters for dynamic layers
// example:
// imageParameters: buildImageParameters({
//     layerIds: [0],
//     layerOption: 'show'
// })
function buildImageParameters (config) {
    config = config || {};
    var ip = new ImageParameters();
    //image parameters for dynamic services, set to png32 for higher quality exports
    ip.format = 'png32';
    for (var key in config) {
        if (config.hasOwnProperty(key)) {
            ip[key] = config[key];
        }
    }
    return ip;
}

return {
    // used for debugging your app
    isDebug: true,

    //default mapClick mode, mapClickMode lets widgets know what mode the map is in to avoid multipult map click actions from taking place (ie identify while drawing).
    defaultMapClickMode: 'identify',
    // map options, passed to map constructor. see: https://developers.arcgis.com/javascript/jsapi/map-amd.html#map1
    mapOptions: {
        basemap: new Basemap({
            id: 'basemap1',
            layers: [new BasemapLayer({
                url: 'http://localhost:6080/arcgis/rest/services/BaseMap/BaseMaps/MapServer'
            })]
        }),
        center: [30.8, 38.7],
        zoom: 12,
        sliderStyle: 'small'
    },

basemaps.js
define([
'esri/dijit/Basemap',
'esri/dijit/BasemapLayer',
'dojo/i18n!./nls/main'
], function (Basemap, BasemapLayer, i18n) {

return {
    map: true, // needs a reference to the map
    mode: 'custom', // mut be either 'agol' or 'custom'

    /* optional starting basemap
    / otherwise uses the basemap from the map
    / must match one of the keys in basemaps object below
    */
    mapStartBasemap: 'BaseMap1',

    /* optional array of  basemaps to show in menu.
    / otherwise uses keys in basemaps object below
    / values in array must match keys in basemaps object
    */
    basemapsToShow: ['osm','BaseMap1'],

    // define all valid basemaps here.
    basemaps: {

        osm: {},
        BaseMap1: {
            title: 'arial',
            basemap: new Basemap({
                id: 'basemap1',
                layers: [new BasemapLayer({
                    url: 'http://localhost:6080/arcgis/rest/services/BaseMap/BaseMaps/MapServer'
                })]
            })
        }

    }
};

});

Open Widget on right-click

Hi,

I am trying to open a custom widget that i am developing on right-click event on map but struggling to do so. Even google street view widget is not getting opened in this calcite version of CMV.

Can anyone help....!

Menu in Layer Control Widget freezes open, won't close

When first opening the Layer Control widget, and clicking on the menu, the menu will not close when user clicks outside of menu. It seems that focus is required on one of the menu items in order for it to close when clicking outside of the menu, so if you right click in the menu after it is open, that will trigger focus on one of the items, then it will close as expected. Also, if the user closes the widget than reopens, it seems to also start working as expected, i.e. focus seems to happen automatically on the first item when user clicks on any layer's menu, and will close when the user clicks outside the menu. This happens on the Demo also, in Chrome and Firefox. I wonder if it is a Calcite issue, as this does not seem to be an issue on the standard viewer.
I've tried to search out issues with dojo menu and the only one I could find had to do with focus in the 'dijit/menu' that was a bug that was fixed a few years ago. Hopefully this won't be too hard to fix. The UI for the viewer in calcite maps is fantastic. Great job on this!

Demo contents are not shown and Editor widget is not displayed well.

Hi Dear Tim McGee.
Thank you for publishing this project.
I have some questions. Can you help me?
1.Demo contents are not shown.
2. Editor widget is not displayed well.

3. Is it possible to implement such a project is the Ace Admin dashboard template?

Streetview widget is not working

Appreciating your efforts, the Streetview widget is not working even if i have used a working Google API key.

Thank you so much for your help.

Best Regards,
Dawit

Cannot read property id of null

hi @tmcgee , I followed the instructions but did not work and I got this error:

init.js:113 TypeError: Cannot read property 'id' of null
    at Object.a.get (init.js:200)
    at Object.constructor (init.js:553)
    at new <anonymous> (init.js:161)
    at Object.createMap (_MapMixin.js:59)
    at Object.initMapAsync (_MapMixin.js:40)
    at init.js:63
    at n (init.js:107)
    at d.then.a.then (init.js:110)
    at Object.startup (_MapMixin.js:33)
    at Object.<anonymous> (_ControllerBase.js:58) "TypeError: Cannot read property 'id' of null

dijit/form/DateTextBox not working with calcite

I am trying to use dijit/form/DateTextBox in Calcite but it is just rendering a simple textbox rather than a date selector.

in HTML

Custom basemap not working

First thanks for the great app!
My problem is I could implement custom basemap in viewer.js of cmv but could not do the same in cmvcalcite. Both in local and disconnected environment.
In calcite i also have the fast font problem .
I would appreciate any help.

How we can open multiple widgets?

Right now, only one widget can open at a time. For example when we open Layers widget, and then if client on legend widget icon then legend widget simple replace the layers widget.
Please guide me.