Skip to content

Commit b4bd4ed

Browse files
author
Lucas Wojciechowski
committed
Merge remote-tracking branch 'origin/mb-pages'
2 parents c377a5e + 31bb7b9 commit b4bd4ed

11 files changed

+243
-13
lines changed

‎docs/_posts/examples/3400-01-04-hover-styles.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
map.on("mousemove", function(e) {
6262
map.featuresAt(e.point, {
6363
radius: 5,
64-
layers: ["states-fill"]
64+
layer: ["state-fills"]
6565
}, function (err, features) {
6666
if (!err && features.length) {
6767
map.setFilter("route-hover", ["==", "name", features[0].properties.name]);

‎docs/_posts/examples/3400-01-06-polygon-popup-on-click.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
layout: example
3+
category: example
4+
title: Show polygon information on click
5+
description: When a user clicks a polygon, show a popup containing more information.
6+
---
7+
<style>
8+
.mapboxgl-popup {
9+
max-width: 400px;
10+
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
11+
}
12+
13+
.marker-title {
14+
font-weight: 700;
15+
}
16+
</style>
17+
<div id='map'></div>
18+
<script>
19+
var map = new mapboxgl.Map({
20+
container: 'map',
21+
style: 'mapbox://styles/mapbox/streets-v8',
22+
center: [-100.04, 38.907],
23+
zoom: 3
24+
});
25+
26+
map.on('style.load', function () {
27+
// Add marker data as a new GeoJSON source.
28+
map.addSource('states', {
29+
'type': 'geojson',
30+
'data': 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces_shp.geojson'
31+
});
32+
33+
// Add a layer showing the markers.
34+
map.addLayer({
35+
'id': 'states-layer',
36+
'interactive': true,
37+
'type': 'fill',
38+
'source': 'states',
39+
'paint': {
40+
'fill-color': 'rgba(200, 100, 240, 0.4)',
41+
'fill-outline-color': 'rgba(200, 100, 240, 1)'
42+
}
43+
});
44+
});
45+
46+
var popup = new mapboxgl.Popup();
47+
48+
// When a click event occurs near a marker icon, open a popup at the location of
49+
// the feature, with description HTML from its properties.
50+
map.on('click', function (e) {
51+
map.featuresAt(e.point, {
52+
radius: 1,
53+
includeGeometry: true,
54+
layer: 'states-layer'
55+
}, function (err, features) {
56+
57+
if (err || !features.length) {
58+
popup.remove();
59+
return;
60+
}
61+
62+
var feature = features[0];
63+
64+
popup.setLngLat(map.unproject(e.point))
65+
.setHTML(feature.properties.name)
66+
.addTo(map);
67+
});
68+
});
69+
70+
// Use the same approach as above to indicate that the symbols are clickable
71+
// by changing the cursor style to 'pointer'.
72+
map.on('mousemove', function (e) {
73+
map.featuresAt(e.point, {
74+
radius: 1,
75+
layer: 'states-layer'
76+
}, function (err, features) {
77+
map.getCanvas().style.cursor = (!err && features.length) ? 'pointer' : '';
78+
});
79+
});
80+
</script>

‎docs/_posts/examples/3400-01-06-popup-on-click.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@
156156

157157
var feature = features[0];
158158

159-
// Popuplate the popup and set its coordinates
159+
// Populate the popup and set its coordinates
160160
// based on the feature found.
161161
popup.setLngLat(feature.geometry.coordinates)
162162
.setHTML(feature.properties.description)

‎docs/_posts/examples/3400-01-06-popup-on-hover.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@
160160

161161
var feature = features[0];
162162

163-
// Popuplate the popup and set its coordinates
163+
// Populate the popup and set its coordinates
164164
// based on the feature found.
165165
popup.setLngLat(feature.geometry.coordinates)
166166
.setHTML(feature.properties.description)

‎docs/_posts/examples/3400-01-12-mapbox-gl-geocoder.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
- plugins
88
- mapbox-geocoding
99
---
10-
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v0.1.0/mapbox-gl-geocoder.js'></script>
11-
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v0.1.0/mapbox-gl-geocoder.css' type='text/css' />
10+
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v1.0.0/mapbox-gl-geocoder.js'></script>
11+
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v1.0.0/mapbox-gl-geocoder.css' type='text/css' />
1212
<div id='map'></div>
1313

1414
<script>

‎docs/_posts/examples/3400-01-13-filter-markers.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: example
33
category: example
4-
title: Filter markers
4+
title: Filter markers by toggling a list
55
description: Filter a set of markers based on a property value in the data.
66
---
77
<style>

‎docs/_posts/examples/3400-01-14-filter-markers-by-input.html‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
---
2+
layout: example
3+
category: example
4+
title: Filter markers by text input
5+
description: Filter markers by icon name by typing in a text input.
6+
---
7+
<style>
8+
.filter-ctrl {
9+
position: absolute;
10+
top: 10px;
11+
right: 10px;
12+
z-index: 1;
13+
width: 180px;
14+
}
15+
16+
.filter-ctrl input[type=text] {
17+
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
18+
width: 100%;
19+
border: 0;
20+
background-color: #fff;
21+
height: 40px;
22+
margin: 0;
23+
color: rgba(0,0,0,.5);
24+
padding: 10px;
25+
box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
26+
border-radius: 3px;
27+
}
28+
</style>
29+
<div id='map'></div>
30+
<div class='filter-ctrl'>
31+
<input id='filter-input' type='text' name='filter' placeholder='Filter by marker name' />
32+
</div>
33+
34+
<script>
35+
var markers = {
36+
"type": "FeatureCollection",
37+
"features": [{
38+
"type": "Feature",
39+
"properties": {
40+
"marker-symbol": "theatre"
41+
},
42+
"geometry": {
43+
"type": "Point",
44+
"coordinates": [-77.038659, 38.931567]
45+
}
46+
}, {
47+
"type": "Feature",
48+
"properties": {
49+
"marker-symbol": "theatre"
50+
},
51+
"geometry": {
52+
"type": "Point",
53+
"coordinates": [-77.003168, 38.894651]
54+
}
55+
}, {
56+
"type": "Feature",
57+
"properties": {
58+
"marker-symbol": "bar"
59+
},
60+
"geometry": {
61+
"type": "Point",
62+
"coordinates": [-77.090372, 38.881189]
63+
}
64+
}, {
65+
"type": "Feature",
66+
"properties": {
67+
"marker-symbol": "bicycle"
68+
},
69+
"geometry": {
70+
"type": "Point",
71+
"coordinates": [-77.052477, 38.943951]
72+
}
73+
}, {
74+
"type": "Feature",
75+
"properties": {
76+
"marker-symbol": "music"
77+
},
78+
"geometry": {
79+
"type": "Point",
80+
"coordinates": [-77.031706, 38.914581]
81+
}
82+
}, {
83+
"type": "Feature",
84+
"properties": {
85+
"marker-symbol": "music"
86+
},
87+
"geometry": {
88+
"type": "Point",
89+
"coordinates": [-77.020945, 38.878241]
90+
}
91+
}, {
92+
"type": "Feature",
93+
"properties": {
94+
"marker-symbol": "music"
95+
},
96+
"geometry": {
97+
"type": "Point",
98+
"coordinates": [-77.007481, 38.876516]
99+
}
100+
}]
101+
};
102+
103+
var layerIDs = []; // Will contain a list used to filter against.
104+
var filterInput = document.getElementById('filter-input');
105+
var map = new mapboxgl.Map({
106+
container: 'map',
107+
style: 'mapbox://styles/mapbox/streets-v8',
108+
center: [-77.04, 38.907],
109+
zoom: 11.15
110+
});
111+
112+
map.on('load', function() {
113+
// Add marker data as a new GeoJSON source.
114+
map.addSource('markers', {
115+
"type": "geojson",
116+
"data": markers
117+
});
118+
119+
markers.features.forEach(function(feature) {
120+
var symbol = feature.properties['marker-symbol'];
121+
var layerID = 'poi-' + symbol;
122+
123+
// Add a layer for this symbol type if it hasn't been added already.
124+
if (!map.getLayer(layerID)) {
125+
map.addLayer({
126+
"id": layerID,
127+
"type": "symbol",
128+
"source": "markers",
129+
"layout": {
130+
"icon-image": symbol + "-15",
131+
"icon-allow-overlap": true
132+
},
133+
"filter": ["==", "marker-symbol", symbol]
134+
});
135+
136+
layerIDs.push(layerID);
137+
}
138+
});
139+
140+
filterInput.addEventListener('keyup', function(e) {
141+
// If the input value matches a layerID set
142+
// it's visibility to 'visible' or else hide it.
143+
var value = e.target.value.trim().toLowerCase();
144+
layerIDs.forEach(function(layerID) {
145+
map.setLayoutProperty(layerID, 'visibility',
146+
layerID.indexOf(value) > -1 ? 'visible' : 'none');
147+
});
148+
});
149+
});
150+
</script>

docs/_posts/examples/3400-01-14-attribution-position.html renamed to docs/_posts/examples/3400-01-15-attribution-position.html

File renamed without changes.

‎docs/_posts/examples/3400-01-16-point-from-geocoder-result.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
- plugins
88
- mapbox-geocoding
99
---
10-
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v0.1.0/mapbox-gl-geocoder.js'></script>
11-
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v0.1.0/mapbox-gl-geocoder.css' type='text/css' />
10+
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v1.0.0/mapbox-gl-geocoder.js'></script>
11+
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v1.0.0/mapbox-gl-geocoder.css' type='text/css' />
1212
<style>
1313
#geocoder-container {
1414
position: absolute;
@@ -62,7 +62,7 @@
6262

6363
// Listen for the `geocoder.input` event that is triggered when a user
6464
// makes a selection and add a marker that matches the result.
65-
geocoder.on('geocoder.input', function(ev) {
65+
geocoder.on('result', function(ev) {
6666
map.getSource('single-point').setData(ev.result.geometry);
6767
});
6868
});

‎docs/_posts/examples/3400-01-22-measure.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292
map.featuresAt(e.point, {
9393
radius: 5,
9494
includeGeometry: true,
95-
layer: 'points'
95+
layer: 'measure-points'
9696
}, function (err, features) {
9797
if (err) return;
9898

@@ -148,7 +148,7 @@
148148
map.on('mousemove', function (e) {
149149
map.featuresAt(e.point, {
150150
radius: 5,
151-
layer: 'points'
151+
layer: 'measure-points'
152152
}, function (err, features) {
153153
// UI indicator for clicking/hovering a point on the map
154154
map.getCanvas().style.cursor = (!err && features.length) ? 'pointer' : 'crosshair';

0 commit comments

Comments
 (0)