fa740a42a9
Bootstrap CSS sets the max-width for images to 100%. This makes it so OpenLayers maps don't render (the layer container has 0 width, so all images are given the same). Even if our layer container had a more sensible width (e.g. 100% of the viewport), we would still have issues with tiles that are larger than the viewport. Since the OpenLayers stylesheet may be loaded before or after bootstrap.css, we should use !important when setting the max-width to none for images we control.
32 lines
1.1 KiB
JavaScript
32 lines
1.1 KiB
JavaScript
var map = new OpenLayers.Map({
|
|
div: "map",
|
|
projection: "EPSG:900913",
|
|
layers: [
|
|
new OpenLayers.Layer.XYZ(
|
|
"Imagery",
|
|
[
|
|
"http://oatile1.mqcdn.com/naip/${z}/${x}/${y}.png",
|
|
"http://oatile2.mqcdn.com/naip/${z}/${x}/${y}.png",
|
|
"http://oatile3.mqcdn.com/naip/${z}/${x}/${y}.png",
|
|
"http://oatile4.mqcdn.com/naip/${z}/${x}/${y}.png"
|
|
],
|
|
{
|
|
attribution: "Tiles Courtesy of <a href='http://open.mapquest.co.uk/' target='_blank'>MapQuest</a>. Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency. <img src='http://developer.mapquest.com/content/osm/mq_logo.png' border='0'>",
|
|
transitionEffect: "resize",
|
|
wrapDateLine: true
|
|
}
|
|
)
|
|
],
|
|
controls: [
|
|
new OpenLayers.Control.Navigation({
|
|
dragPanOptions: {
|
|
enableKinetic: true
|
|
}
|
|
}),
|
|
new OpenLayers.Control.Zoom(),
|
|
new OpenLayers.Control.Attribution()
|
|
],
|
|
center: [0, 0],
|
|
zoom: 1
|
|
});
|