ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update mapbox example.

Browse Source 
* use Zoom control instead of ZoomPanel
 * wrap date line
 * attribution control already at the bottom of the map
 * use html entities for the copyright symbol
 * layer has 17 levels, update numZoomLevels
This commit is contained in:
Frederic Junod
2012-03-27 14:34:19 +02:00
committed by Tim Schaub
parent eb2d62dacb
commit f2dd130256
2 changed files with 5 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
examples/mapbox.html
View File

@@ -7,49 +7,6 @@
<title>OpenLayers MapBox Example</title> <title>OpenLayers MapBox Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css"> <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="style.css" type="text/css">
<style>
.olControlAttribution {
bottom: 5px;
font-size: 9px;
}
div.olControlZoomPanel {
top: 10px;
left: 10px;
}
div.olControlZoomPanel .olControlZoomInItemInactive,
div.olControlZoomPanel .olControlZoomOutItemInactive {
background: rgba(0, 0, 0, 0.2);
position: absolute;
}
div.olControlZoomPanel .olControlZoomInItemInactive {
border-radius: 3px 3px 0 0;
}
div.olControlZoomPanel .olControlZoomOutItemInactive {
border-radius: 0 0 3px 3px ;
top: 20px;
}
div.olControlZoomPanel div:hover {
background: rgba(0, 0, 0, 0.5);
}
div.olControlZoomPanel .olControlZoomOutItemInactive:after ,
div.olControlZoomPanel .olControlZoomInItemInactive:after {
font-weight: bold;
content: '+';
font-size: 18px;
padding: 0 2px;
z-index: 2000;
color: #fff;
line-height: 1em;
}
div.olControlZoomPanel .olControlZoomOutItemInactive:after {
content: '–';
line-height: 0.9em;
padding: 0 5px;
}
div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
display: none;
}
</style>
</head> </head>
<body> <body>
<h1 id="title">Basic MapBox OSM Example</h1> <h1 id="title">Basic MapBox OSM Example</h1>

9
examples/mapbox.js
View File

@@ -6,13 +6,14 @@ var streets = new OpenLayers.Layer.XYZ(
"http://c.tiles.mapbox.com/v3/mapbox.mapbox-streets/${z}/${x}/${y}.png", "http://c.tiles.mapbox.com/v3/mapbox.mapbox-streets/${z}/${x}/${y}.png",
"http://d.tiles.mapbox.com/v3/mapbox.mapbox-streets/${z}/${x}/${y}.png" "http://d.tiles.mapbox.com/v3/mapbox.mapbox-streets/${z}/${x}/${y}.png"
], { ], {
attribution: "Tiles © <a href='http://mapbox.com/'>MapBox</a> | " + attribution: "Tiles &copy; <a href='http://mapbox.com/'>MapBox</a> | " +
"Data © <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> " + "Data &copy; <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> " +
"and contributors, CC-BY-SA", "and contributors, CC-BY-SA",
sphericalMercator: true, sphericalMercator: true,
wrapDateLine: true,
transitionEffect: "resize", transitionEffect: "resize",
buffer: 1, buffer: 1,
numZoomLevels: 16 numZoomLevels: 17
} }
); );
@@ -26,7 +27,7 @@ var map = new OpenLayers.Map({
enableKinetic: true enableKinetic: true
} }
}), }),
new OpenLayers.Control.ZoomPanel(), new OpenLayers.Control.Zoom(),
new OpenLayers.Control.Permalink({anchor: true}) new OpenLayers.Control.Permalink({anchor: true})
], ],
center: [0, 0], center: [0, 0],