Skip to content

Commit 4fe22ac

Browse files
author
Lucas Wojciechowski
committed
Merge remote-tracking branch 'origin/mb-pages'
2 parents 937b41a + 702d6f9 commit 4fe22ac

File tree

5 files changed

+249
-53
lines changed

5 files changed

+249
-53
lines changed

‎docs/_layouts/default.html‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,6 @@
4848
path: /maps
4949
- title: Mapbox Studio
5050
path: /mapbox-studio
51-
- title: Mapbox Studio Classic
52-
path: /mapbox-studio-classic
53-
- title: Mapbox Editor
54-
path: /editor
5551
- title: Map Gallery
5652
path: /gallery
5753
- title: Vector tiles

‎docs/_posts/examples/3400-01-04-color-switcher.html‎

Lines changed: 92 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -5,50 +5,77 @@
55
description: Using setPaintProperty to change a layer's fill color
66
---
77
<style>
8-
#colorSwitcherWater {
9-
margin: 0;
10-
padding: 0;
11-
position: fixed;
12-
top: 0;
13-
right: 0;
14-
width: 70px;
15-
height: 95%;
16-
list-style-type: none;
17-
}
18-
19-
#colorSwitcherBuilding {
20-
margin: 0;
21-
padding: 0;
22-
position: fixed;
23-
top: 0;
24-
left: 0;
25-
width: 70px;
26-
height: 100%;
27-
list-style-type: none;
28-
}
29-
30-
.color-swatch {
31-
height: 20%;
32-
width: 100%;
33-
cursor: pointer;
34-
}
8+
.map-overlay {
9+
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
10+
position: absolute;
11+
width: 200px;
12+
top: 0;
13+
left: 0;
14+
padding: 10px;
15+
}
16+
17+
.map-overlay .map-overlay-inner {
18+
background-color: #fff;
19+
box-shadow:0 1px 2px rgba(0, 0, 0, 0.10);
20+
border-radius: 3px;
21+
padding: 10px;
22+
margin-bottom: 10px;
23+
}
24+
25+
.map-overlay-inner fieldset {
26+
border: none;
27+
padding: 0;
28+
margin: 0 0 10px;
29+
}
30+
31+
.map-overlay-inner fieldset:last-child {
32+
margin: 0;
33+
}
34+
35+
.map-overlay-inner select {
36+
width: 100%;
37+
}
38+
39+
.map-overlay-inner label {
40+
display: block;
41+
font-weight: bold;
42+
margin: 0 0 5px;
43+
}
44+
45+
.map-overlay-inner button {
46+
display: inline-block;
47+
width: 36px;
48+
height: 20px;
49+
border: none;
50+
cursor: pointer;
51+
}
52+
53+
.map-overlay-inner button:focus {
54+
outline: none;
55+
}
56+
57+
.map-overlay-inner button:hover {
58+
box-shadow:inset 0 0 0 3px rgba(0, 0, 0, 0.10);
59+
}
3560
</style>
61+
3662
<div id='map'></div>
37-
<ul id='colorSwitcherWater'>
38-
<li class="color-swatch" onclick="switchColor('#ffffcc', 'water')" style="background-color: #ffffcc"></li>
39-
<li class="color-swatch" onclick="switchColor('#a1dab4', 'water')" style="background-color: #a1dab4"></li>
40-
<li class="color-swatch" onclick="switchColor('#41b6c4', 'water')" style="background-color: #41b6c4"></li>
41-
<li class="color-swatch" onclick="switchColor('#2c7fb8', 'water')" style="background-color: #2c7fb8"></li>
42-
<li class="color-swatch" onclick="switchColor('#253494', 'water')" style="background-color: #253494"></li>
43-
</ul>
44-
45-
<ul id='colorSwitcherBuilding'>
46-
<li class="color-swatch" onclick="switchColor('#fed976', 'building')" style="background-color: #fed976"></li>
47-
<li class="color-swatch" onclick="switchColor('#feb24c', 'building')" style="background-color: #feb24c"></li>
48-
<li class="color-swatch" onclick="switchColor('#fd8d3c', 'building')" style="background-color: #fd8d3c"></li>
49-
<li class="color-swatch" onclick="switchColor('#f03b20', 'building')" style="background-color: #f03b20"></li>
50-
<li class="color-swatch" onclick="switchColor('#bd0026', 'building')" style="background-color: #bd0026"></li>
51-
</ul>
63+
<div class='map-overlay top'>
64+
<div class='map-overlay-inner'>
65+
<fieldset>
66+
<label>Select layer</label>
67+
<select id='layer' name='layer'>
68+
<option value='water'>Water</option>
69+
<option value='building'>Buildings</option>
70+
</select>
71+
</fieldset>
72+
<fieldset>
73+
<label>Choose a color</label>
74+
<div id='swatches'></div>
75+
</fieldset>
76+
</div>
77+
</div>
78+
5279
<script>
5380
var map = new mapboxgl.Map({
5481
container: 'map',
@@ -57,7 +84,27 @@
5784
zoom: 17.4
5885
});
5986

60-
function switchColor(myColor, layer) {
61-
map.setPaintProperty(layer, 'fill-color', myColor);
62-
}
87+
var swatches = document.getElementById('swatches');
88+
var layers = document.getElementById('layers');
89+
var colors = [
90+
'#ffffcc',
91+
'#a1dab4',
92+
'#41b6c4',
93+
'#2c7fb8',
94+
'#253494',
95+
'#fed976',
96+
'#feb24c',
97+
'#fd8d3c',
98+
'#f03b20',
99+
'#bd0026'
100+
];
101+
102+
colors.forEach(function(color) {
103+
var swatch = document.createElement('button');
104+
swatch.style.backgroundColor = color;
105+
swatch.addEventListener('click', function() {
106+
map.setPaintProperty(layer.value, 'fill-color', color);
107+
});
108+
swatches.appendChild(swatch);
109+
});
63110
</script>

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
</style>
2929
<div id='map'></div>
3030
<div class='filter-ctrl'>
31-
<input id='filter-input' type='text' name='filter' placeholder='Filter by marker name' />
31+
<input id='filter-input' type='text' name='filter' placeholder='Filter by name' />
3232
</div>
3333

3434
<script>
@@ -104,7 +104,7 @@
104104
var filterInput = document.getElementById('filter-input');
105105
var map = new mapboxgl.Map({
106106
container: 'map',
107-
style: 'mapbox://styles/mapbox/streets-v8',
107+
style: 'mapbox://styles/mapbox/light-v8',
108108
center: [-77.04, 38.907],
109109
zoom: 11.15
110110
});
@@ -128,7 +128,18 @@
128128
"source": "markers",
129129
"layout": {
130130
"icon-image": symbol + "-15",
131-
"icon-allow-overlap": true
131+
"icon-allow-overlap": true,
132+
"text-field": symbol,
133+
"text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
134+
"text-size": 11,
135+
"text-transform": "uppercase",
136+
"text-letter-spacing": 0.05,
137+
"text-offset": [0, 1.5]
138+
},
139+
"paint": {
140+
"text-color": "#202",
141+
"text-halo-color": "#fff",
142+
"text-halo-width": 2
132143
},
133144
"filter": ["==", "marker-symbol", symbol]
134145
});

‎docs/_posts/examples/3400-01-24-drag-a-point.html‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
---
2+
layout: example
3+
category: example
4+
title: "Create a draggable point"
5+
description: "Drag the point to a new location on a map and populates its coordinates in a display."
6+
---
7+
8+
<style>
9+
.coordinates {
10+
background: rgba(0,0,0,0.5);
11+
color: #fff;
12+
position: absolute;
13+
bottom: 10px;
14+
left: 10px;
15+
padding:5px 10px;
16+
margin: 0;
17+
font-size: 11px;
18+
line-height: 18px;
19+
border-radius: 3px;
20+
display: none;
21+
}
22+
</style>
23+
24+
<div id='map'></div>
25+
<pre id='coordinates' class='coordinates'></pre>
26+
27+
<script>
28+
// Holds mousedown state for events. if this
29+
// flag is active, we move the point on `mousemove`.
30+
var isDragging;
31+
32+
// Is the cursor over a point? if this
33+
// flag is active, we listen for a mousedown event.
34+
var isCursorOverPoint;
35+
36+
var coordinates = document.getElementById('coordinates');
37+
var map = new mapboxgl.Map({
38+
container: 'map',
39+
style: 'mapbox://styles/mapbox/streets-v8',
40+
center: [0, 0],
41+
zoom: 2
42+
});
43+
44+
var canvas = map.getCanvasContainer();
45+
46+
var geojson = {
47+
"type": "FeatureCollection",
48+
"features": [{
49+
"type": "Feature",
50+
"geometry": {
51+
"type": "Point",
52+
"coordinates": [0, 0]
53+
}
54+
}]
55+
};
56+
57+
function mouseDown(e) {
58+
if (!isCursorOverPoint) return;
59+
60+
isDragging = true;
61+
62+
// Set a cursor indicator
63+
canvas.style.cursor = 'grab';
64+
65+
// Mouse events
66+
map.on('mousemove', onMove);
67+
map.on('mouseup', onUp);
68+
}
69+
70+
function onMove(e) {
71+
if (!isDragging) return;
72+
var coords = e.lngLat;
73+
74+
// Set a UI indicator for dragging.
75+
canvas.style.cursor = 'grabbing';
76+
77+
// Update the Point feature in `geojson` coordinates
78+
// and call setData to the source layer `point` on it.
79+
geojson.features[0].geometry.coordinates = [coords.lng, coords.lat];
80+
map.getSource('point').setData(geojson);
81+
}
82+
83+
function onUp(e) {
84+
if (!isDragging) return;
85+
var coords = e.lngLat;
86+
87+
// Print the coordinates of where the point had
88+
// finished being dragged to on the map.
89+
coordinates.style.display = 'block';
90+
coordinates.innerHTML = 'Longitude: ' + coords.lng + '<br />Latitude: ' + coords.lat;
91+
canvas.style.cursor = '';
92+
isDragging = false;
93+
}
94+
95+
map.on('load', function() {
96+
97+
// Add a single point to the map
98+
map.addSource('point', {
99+
"type": "geojson",
100+
"data": geojson
101+
});
102+
103+
map.addLayer({
104+
"id": "point",
105+
"interactive": true,
106+
"type": "circle",
107+
"source": "point",
108+
"paint": {
109+
"circle-radius": 10,
110+
"circle-color": "#3887be"
111+
}
112+
});
113+
114+
// If a feature is found on map movement,
115+
// set a flag to permit a mousedown events.
116+
map.on('mousemove', function(e) {
117+
map.featuresAt(e.point, {
118+
radius: 10,
119+
includeGeometry: true,
120+
layer: 'point'
121+
}, function(err, features) {
122+
// Change point and cursor style as a UI indicator
123+
// and set a flag to enable other mouse events.
124+
if (!err && features.length) {
125+
map.setPaintProperty ('point', 'circle-color', '#3bb2d0');
126+
canvas.style.cursor = 'move';
127+
isCursorOverPoint = true;
128+
map.dragPan.disable();
129+
} else {
130+
map.setPaintProperty ('point', 'circle-color', '#3887be');
131+
canvas.style.cursor = '';
132+
isCursorOverPoint = false;
133+
map.dragPan.enable();
134+
}
135+
});
136+
});
137+
138+
// Set `true` to dispatch the event before other functions call it. This
139+
// is necessary for disabling the default map dragging behaviour.
140+
map.on('mousedown', mouseDown, true);
141+
});
142+
</script>

‎js/ui/control/attribution.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ module.exports = Attribution;
1313
* @param {string} [options.position='bottom-right'] A string indicating the control's position on the map. Options are `top-right`, `top-left`, `bottom-right`, `bottom-left`
1414
* @example
1515
* var map = new mapboxgl.Map({attributionControl: false})
16-
* .addControl(new mapboxgl.Navigation({position: 'top-left'}));
16+
* .addControl(new mapboxgl.Attribution({position: 'top-left'}));
1717
*/
1818
function Attribution(options) {
1919
util.setOptions(this, options);

0 commit comments

Comments
 (0)