topic Re: Change MapView scale on mobile device in CSS? in ArcGIS JavaScript Maps SDK Questions

Change MapView scale on mobile device in CSS?

JaredPilbeam2 — Fri, 10 Dec 2021 23:31:03 GMT

I can't seem to find the element to change the scale. Can it be done in the CSS? I've tried this:

    @media (max-width: 480px) {
        view MapView {
            scale: 1300000,
        }‍‍‍‍

Re: Change MapView scale on mobile device in CSS?

RobertScheitlin__GISP — Tue, 13 Nov 2018 22:36:11 GMT

Jared,

You can not do MANY things in css. This will have to be done in JS code.

Re: Change MapView scale on mobile device in CSS?

JaredPilbeam2 — Wed, 14 Nov 2018 14:35:49 GMT

I guess what I was asking was whether it's possible to have two different scales, one for the PC and one for the phone.

Re: Change MapView scale on mobile device in CSS?

RobertScheitlin__GISP — Wed, 14 Nov 2018 14:45:12 GMT

Yes, it is just not something that can be done in css. It has to be done in JS code.

Re: Change MapView scale on mobile device in CSS?

JaredPilbeam2 — Fri, 10 Dec 2021 23:31:06 GMT

Robert,

Thanks for directing me away from the CSS. Whereas before I created a Map instance, I now created a WebMap. And this seems to have answered my question.

       /************************************************************
       * Creates a new WebMap instance. A WebMap must reference
       * a PortalItem ID that represents a WebMap saved to
       * arcgis.com or an on-premise portal.
       *
       * To load a WebMap from an on-premise portal, set the portal
       * url with esriConfig.portalUrl.
       ************************************************************/
        var webmap = new WebMap({
         portalItem: {
             id: "93b7e42b2ca64790aa2315da5eceaff9"
         }
        });
      /************************************************************
       * Set the WebMap instance to the map property in a MapView.
       ************************************************************/
        var view = new MapView({
          map: webmap,
          container: "viewDiv",‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I had a lot of help from these two examples:

Load a basic WebMap | ArcGIS API for JavaScript 4.9

Swap web maps in the same view | ArcGIS API for JavaScript 4.9