4

I am adding a map to a website built in asp.net and Javascript. When I add the esri.Map using a tiled map service layer base map, the map overlaps the map div and what I assume are tiles show up out of order and with spaces between them. Picture a large checkerboard with transparent squares alternating with map squares and Antarctica in the map square to the right of North America and Greenland at the bottom. There also appears to be some metadata text appearing in the div in a transparent square.

There is another overlapping div that is turned off and the map div is turned on in response to a button click to display the map.

A dynamic map service layer displays properly, but it behaves a bit oddly on zoom, extending to take up the whole page during the zoom, then snapping to the div when the zoom is complete.

The map div is being set in css to relative position, and I've tried also giving it a set size in pixels, with no change in behavior. Originally the div was not given any position or size attributes, but the behavior was the same. I get the same result in Opera, Chrome, and Firefox. Nothing shows up in Explorer, but I think that may be a security setting issue.

I'll try to attach code and screenshot of the map. Below is the javascript code adding the map. I'll just note that I've tried various extents and spatial references, including copying and pasting from standard "add a map" tutorials, so this is just what's there now. They all look the same. I've also added the basemap with addLayer by url with the same results. Javascript function to add map:

function MapIt(msg) {

//display map box
$("div.selection-criteria").hide();
$("div.map").show();

map = new esri.Map("map", {
    extent: new esri.geometry.Extent({ xmin: 38.705772, ymin: -84.820221, xmax: 39.610317, ymax: -83.683907, spatialReference:{wkid:4326} }),
    zoom: 3,
    basemap: "streets"
});

}

ASP code for the content and divs, with the fieldsets for the div that gets hidden when the map is show obfuscated:

<asp:Content ID="Content1" ContentPlaceHolderID="contentMain" runat="server">
<div class="selection-criteria">

<fieldset class="somefields">
</fieldset>

<fieldset class="someotherfields">
</fieldset>

<input type="button" id="btnMap" class="map-button" value="Map it!" />

</div>

<div class="map" id="map">


</div>

CSS div styles:

div#map{position:relative; width:800px; height:400px;}

![map]: https://i.stack.imgur.com/7G467.jpg

2
  • 3
    Which API version you are using ( 3.2 or 3.3 ?) & I think you are missing esri.css reference. Check the js fiddle (jsfiddle.net/JduVM/2)
    – Sunil
    Mar 1, 2013 at 9:12
  • 3.3. And you are correct. I was missing the esri.css somehow. Man, do I feel dumb.
    – karl
    Mar 7, 2013 at 21:00

1 Answer 1

3

With versions 3.2 and later of the ArcGIS JavaScript API, you are required to add their css file in order for the map to show up properly. Leaving it out would result in the checkerboard effect you noticed. For example, if you were using v.3.2, here's the link to the css you would put in your header.

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />

As for later versions up to 3.5 so far, I think all you have to change is the version number in the link.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.