Skip to content

Commit eb2b2f8

Browse files
Jessica WalthewJessica Walthew
Jessica Walthew
authored and
Jessica Walthew
committed
init
1 parent e733ca6 commit eb2b2f8

File tree

3 files changed

+139
-0
lines changed

3 files changed

+139
-0
lines changed

‎leaflet-eg.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Using Watercolor Map Tiles with Open Layers</title>
8+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
9+
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
10+
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
11+
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
12+
<style>
13+
#map {
14+
position: absolute;
15+
top: 0;
16+
left: 0;
17+
height: 100%;
18+
width: 100%;
19+
}
20+
</style>
21+
</head>
22+
23+
<body>
24+
<div id="map"></div>
25+
</body>
26+
<script>
27+
var map = L.map('map').setView([0, 0], 2);
28+
L.tileLayer('https://watercolormaps.collection.cooperhewitt.org/tile/watercolor/{z}/{x}/{y}.jpg', {
29+
maxZoom: 19,
30+
attribution: '© OpenStreetMap'
31+
}).addTo(map);
32+
</script>
33+
34+
</html>

‎maplibre-eg.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Using Watercolor Map Tiles with Open Layers</title>
8+
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css">
9+
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
10+
</head>
11+
<style>
12+
#map {
13+
position: absolute;
14+
top: 0;
15+
left: 0;
16+
height: 100%;
17+
width: 100%;
18+
}
19+
</style>
20+
21+
<body>
22+
<div id="map"></div>
23+
</body>
24+
<script>
25+
const map = new maplibregl.Map({
26+
container: 'map', // container id
27+
style: {
28+
'version': 8,
29+
'sources': {
30+
'watercolor-tiles': {
31+
'type': 'raster',
32+
'tiles': [
33+
'https://watercolormaps.collection.cooperhewitt.org/tile/watercolor/{z}/{x}/{y}.jpg'
34+
],
35+
'tileSize': 256,
36+
'attribution':
37+
'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
38+
}
39+
},
40+
'layers': [
41+
{
42+
'id': 'watercolor-tiles',
43+
'type': 'raster',
44+
'source': 'raster-tiles',
45+
'minzoom': 0,
46+
'maxzoom': 22
47+
}
48+
]
49+
},
50+
center: [-74.5, 40], // starting position
51+
zoom: 2 // starting zoom
52+
});
53+
</script>
54+
55+
</html>

‎ol-eg.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Using Watercolor Map Tiles with Open Layers</title>
8+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">
10+
<style>
11+
#map {
12+
position: absolute;
13+
top: 0;
14+
left: 0;
15+
height: 100%;
16+
width: 100%;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<div id="map"></div>
23+
</body>
24+
<script>
25+
26+
const attributions =
27+
'<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
28+
29+
const watercolor = new ol.source.XYZ({
30+
attributions: attributions,
31+
url: 'https://watercolormaps.collection.cooperhewitt.org/tile/watercolor/{z}/{x}/{y}.jpg',
32+
maxZoom: 20,
33+
crossOrigin: '',
34+
});
35+
36+
const map = new ol.Map({
37+
layers: [
38+
new ol.layer.Tile({
39+
source: watercolor,
40+
}),
41+
],
42+
target: 'map',
43+
view: new ol.View({
44+
center: [0, 0],
45+
zoom: 2,
46+
}),
47+
});
48+
</script>
49+
50+
</html>

0 commit comments

Comments
 (0)