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, }

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Change MapView scale on mobile device in CSS?

JaredPilbeam2

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

&nbsp;&nbsp;&nbsp; <SPAN class="atrule token"><SPAN class="rule token">@media</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="property token">max-width</SPAN><SPAN class="punctuation token">:</SPAN> 480px<SPAN class="punctuation token">)</SPAN></SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="selector token">view MapView</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">scale</SPAN><SPAN class="punctuation token">:</SPAN> 1300000,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Encontre mais publicações marcadas com

Accepted answers

RobertScheitlin__GISP

Jared,

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

All comments

JaredPilbeam2

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.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">/************************************************************
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * Creates a new WebMap instance. A WebMap must reference
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * a PortalItem ID that represents a WebMap saved to
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * arcgis.com or an on-premise portal.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; *
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * To load a WebMap from an on-premise portal, set the portal
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * url with esriConfig.portalUrl.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ************************************************************/</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> webmap <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WebMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"93b7e42b2ca64790aa2315da5eceaff9"</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">/************************************************************
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * Set the WebMap instance to the map property in a MapView.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ************************************************************/</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">:</SPAN> webmap<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

RobertScheitlin__GISP

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

JaredPilbeam2

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.

RobertScheitlin__GISP

Jared,

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

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.