Skip to content

Commit b6bd447

Browse files
author
Lucas Wojciechowski
committed
Merge remote-tracking branch 'origin/mb-pages'
2 parents f06c3e5 + 39bdbe5 commit b6bd447

File tree

5 files changed

+5741
-0
lines changed

5 files changed

+5741
-0
lines changed

‎docs/_posts/examples/3400-01-01-cluster.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
layout: example
3+
category: example
4+
title: Create and style marker clusters
5+
description: Use Mapbox GL JS' built-in functions to visualize point data as marker clusters.
6+
---
7+
8+
<div id='map'></div>
9+
10+
<script>
11+
var map = new mapboxgl.Map({
12+
container: 'map',
13+
style: 'mapbox://styles/mapbox/dark-v8',
14+
center: [-103.59179687498357, 40.66995747013945],
15+
zoom: 3,
16+
});
17+
18+
map.on('style.load', function(){
19+
20+
// Add a new source from our GeoJSON data and set the
21+
// 'cluster' option to true.
22+
map.addSource("earthquakes", {
23+
type: "geojson",
24+
// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
25+
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
26+
data: "{{site.baseurl}}/assets/earthquakes.geojson",
27+
cluster: true,
28+
clusterMaxZoom: 14, // Max zoom to cluster points on
29+
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
30+
});
31+
32+
// Use the earthquakes source to create five layers:
33+
// One for non-clustered markers, three for each cluster category,
34+
// and one for cluster labels.
35+
map.addLayer({
36+
"id": "non-cluster-markers",
37+
"type": "symbol",
38+
"source": "earthquakes",
39+
"layout": {
40+
"icon-image": "marker-15"
41+
}
42+
});
43+
44+
// Display the earthquake data in three layers, each filtered to a range of
45+
// count values. Each range gets a different fill color.
46+
var layers = [
47+
[150, '#f28cb1'],
48+
[20, '#f1f075'],
49+
[0, '#51bbd6']
50+
];
51+
52+
layers.forEach(function (layer, i) {
53+
map.addLayer({
54+
"id": "cluster-" + i,
55+
"type": "circle",
56+
"source": "earthquakes",
57+
"paint": {
58+
"circle-color": layer[1],
59+
"circle-radius": 18
60+
},
61+
"filter": i == 0 ?
62+
[">=", "point_count", layer[0]] :
63+
["all",
64+
[">=", "point_count", layer[0]],
65+
["<", "point_count", layers[i - 1][0]]]
66+
});
67+
});
68+
69+
// Add a layer for the clusters' count labels
70+
map.addLayer({
71+
"id": "cluster-count",
72+
"type": "symbol",
73+
"source": "earthquakes",
74+
"layout": {
75+
"text-field": "{point_count}",
76+
"text-font": [
77+
"DIN Offc Pro Medium",
78+
"Arial Unicode MS Bold"
79+
],
80+
"text-size": 12
81+
}
82+
});
83+
});
84+
</script>

‎docs/_posts/examples/3400-01-17-disable-scroll-zoom.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
layout: example
3+
category: example
4+
title: Disable scroll zoom
5+
description: Prevents scroll from zooming a map.
6+
---
7+
<div id='map'></div>
8+
<script>
9+
var map = new mapboxgl.Map({
10+
container: 'map', // container id
11+
style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
12+
center: [-122.65, 45.52], // starting position
13+
zoom: 9 // starting zoom
14+
});
15+
16+
// disable map zoom when using scroll
17+
map.scrollZoom.disable();
18+
</script>

‎docs/_posts/examples/3400-01-18-playback-locations.html‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
---
2+
layout: example
3+
category: example
4+
title: Play map locations as a slideshow
5+
description: 'Autoplay the locations of boroughs in New York City'
6+
tags:
7+
- animation
8+
---
9+
<style>
10+
.map-overlay-container {
11+
position: absolute;
12+
width: 25%;
13+
top: 0;
14+
left: 0;
15+
padding: 10px;
16+
z-index: 1;
17+
}
18+
19+
.map-overlay {
20+
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
21+
background-color: #fff;
22+
border-radius: 3px;
23+
padding: 10px;
24+
box-shadow:0 1px 2px rgba(0,0,0,0.20);
25+
}
26+
27+
.map-overlay h2,
28+
.map-overlay p {
29+
margin: 0 0 10px;
30+
}
31+
</style>
32+
33+
<div id='map'></div>
34+
35+
<div class='map-overlay-container'>
36+
<div class='map-overlay'>
37+
<h2 id='location-title'></h2>
38+
<p id='location-description'></p>
39+
<small>Text credit: <a target='_blank' href='http://www.nycgo.com/neighborhoods'>nycgo.com</a></small>
40+
</div>
41+
</div>
42+
43+
<script>
44+
var map = new mapboxgl.Map({
45+
container: 'map',
46+
style: 'mapbox://styles/mapbox/emerald-v8',
47+
center: [-74.0315, 40.6989],
48+
maxZoom: 16,
49+
minZoom: 9,
50+
zoom: 9.68
51+
});
52+
53+
var title = document.getElementById('location-title');
54+
var description = document.getElementById('location-description');
55+
56+
var locations = [{
57+
"id": "2",
58+
"title": "The Bronx",
59+
"description": "This is where hip-hop was born, where the Yankees became a dynasty and where you can find New York City's leading zoo and botanical garden.",
60+
"camera": {
61+
center: [-73.8709, 40.8255],
62+
zoom: 12.21,
63+
pitch: 50
64+
}
65+
}, {
66+
"id": "3",
67+
"title": "Brooklyn",
68+
"description": "No matter how hip it looks on TV, NYC's most populous borough is best experienced in person. Read on to find out about live music, Prospect Park, Nets basketball and more.",
69+
"camera": {
70+
center: [-73.9499, 40.6260],
71+
bearing: -8.9,
72+
zoom: 11.68
73+
}
74+
}, {
75+
"id": "1",
76+
"title": "Manhattan",
77+
"description": "Even if you think you know Manhattan—its world-class museums, fine dining and unforgettable views—the borough always has something new and exciting in store.",
78+
"camera": {
79+
center: [-74.0070, 40.7437],
80+
bearing: 25.3,
81+
zoom: 11.5
82+
}
83+
}, {
84+
"id": "4",
85+
"title": "Queens",
86+
"description": "Taste food from around the globe, watch Mets baseball and US Open tennis, see cutting-edge art and more in one of the world's most diverse places.",
87+
"camera": {
88+
center: [-73.8432, 40.6923],
89+
bearing: 36,
90+
zoom: 11.37
91+
}
92+
}, {
93+
"id": "5",
94+
"title": "Staten Island",
95+
"description": "Take a free ferry ride to an island getaway filled with historic architecture, stunning views, gardens and many family-friendly attractions.",
96+
"camera": {
97+
center: [-74.1991, 40.5441],
98+
bearing: 28.4,
99+
zoom: 11.64
100+
}
101+
}, {
102+
"title": "Boroughs of new york",
103+
"description": "New York City is made up of five boroughs: the Bronx, Brooklyn, Manhattan, Queens and Staten Island. Each one has enough attractions—and enough personality—to be a city all its own.",
104+
"camera": {
105+
center: [-74.0315, 40.6989],
106+
zoom: 9.68,
107+
bearing: 0,
108+
pitch: 0
109+
}
110+
}];
111+
112+
function highlightBorough(code) {
113+
// Only show the polygon feature that cooresponds to `borocode` in the data
114+
map.setFilter('highlight', ["==", "borocode", code]);
115+
}
116+
117+
function playback(index) {
118+
title.textContent = locations[index].title;
119+
description.textContent = locations[index].description;
120+
121+
highlightBorough(locations[index].id ? locations[index].id : '');
122+
123+
// Animate the map position based on camera properties
124+
map.flyTo(locations[index].camera);
125+
126+
map.once('moveend', function() {
127+
// Duration the slide is on screen after interaction
128+
window.setTimeout(function() {
129+
// Increment index
130+
index = (index + 1 === locations.length) ? 0 : index + 1;
131+
playback(index);
132+
}, 3000); // After callback, show the location for 3 seconds.
133+
});
134+
}
135+
136+
// Display the last title/description first
137+
title.textContent = locations[locations.length - 1].title;
138+
description.textContent = locations[locations.length - 1].description;
139+
140+
map.on('load', function() {
141+
142+
// Polygon fill for each borough of new york city.
143+
// Used to highlight when its borough is active.
144+
map.addSource("boroughs", {
145+
"type": "vector",
146+
"url": "mapbox://mapbox.8ibmsn6u"
147+
});
148+
149+
map.addLayer({
150+
"id": "highlight",
151+
"type": "fill",
152+
"source": "boroughs",
153+
"source-layer": "original",
154+
"paint": {
155+
"fill-color": "#fd6b50",
156+
"fill-opacity": 0.25
157+
},
158+
"filter": ["==", "borocode", ""]
159+
}, 'neighborhood_small_label'); // Place polygon under the neighborhood labels.
160+
161+
// Start the playback animation for each borough
162+
playback(0);
163+
});
164+
</script>

0 commit comments

Comments
 (0)