/
Sheet-Mapper-Sample-Code.html
153 lines (120 loc) · 4.05 KB
/
Sheet-Mapper-Sample-Code.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Replace with your title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css" rel="stylesheet" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
<link rel="stylesheet" href="style.css">
</head>
<style>
body {
background: #404040;
margin: 0;
padding: 0;
}
#map {
border-left: 1px solid #fff;
position: absolute;
width: 100%;
top: 0;
bottom: 0;
}
.mapboxgl-popup {
padding-bottom: 5px;
}
.mapboxgl-popup-close-button {
display: none;
}
.mapboxgl-popup-content {
font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
padding: 0;
width: 250px;
}
.mapboxgl-popup-content-wrapper {
padding: 1%;
}
.mapboxgl-popup-content h3 {
background: rgb(61, 59, 59);
text-align: center;
color: #fff;
margin: 0;
display: block;
padding: 15px;
font-weight: 700;
margin-top: -5px;
}
.mapboxgl-popup-content h4 {
margin: 0;
display: block;
padding: 10px 3px 10px 10px;
font-weight: 400;
}
.mapboxgl-container {
cursor: pointer;
}
.mapboxgl-popup-anchor-top>.mapboxgl-popup-content {
margin-top: 3px;
}
.mapboxgl-popup-anchor-top>.mapboxgl-popup-tip {
border-bottom-color: rgb(61, 59, 59);
}
</style>
<body>
<div id="map"></div>
<script>
var transformRequest = (url, resourceType) => {
var isMapboxRequest =
url.slice(8, 22) === "api.mapbox.com" ||
url.slice(10, 26) === "tiles.mapbox.com";
return {
url: isMapboxRequest
? url.replace("?", "?pluginName=sheetMapper&")
: url
};
};
//YOUR TURN: add your Mapbox access token
mapboxgl.accessToken = '<Replace with your access token>';
var map = new mapboxgl.Map({
container: 'map', // container id
style: "<Replace with a Mapbox style url>", //YOUR TURN: choose a style: https://docs.mapbox.com/api/maps/#styles
center: [-122.411464, 37.7852299], // starting position [lng, lat]
zoom: 9, // starting zoom
transformRequest: transformRequest
});
map.on("load", function() {
init();
});
// Initialize Tabletop to access your table
function init() {
Tabletop.init({
// YOUR TURN: change 'key' value to point to your spreadsheet
key: '<Link to your shared spreadsheet goes here!>',
// once Tabletop has loaded the data, it passes it to the 'callback' function, 'addPoints', defined below
callback: addPoints,
simpleSheet: true
});
}
// create a function called addPoints that iterates through your table (row by row) to create markers and popups
function addPoints(data) {
// iterate through your table to set the marker to lat/long values for each row
data.forEach(function(row) {
// create a variable for your popup and populate your popup with information from your table
var popup = new mapboxgl.Popup()
.setHTML(`<h3>` + row.Name + `</h3>` + '<h4>' + '<b>' + 'Address: ' + '</b>' + row.Address + '</h4>' + '<h4>' + '<b>' + 'Phone: ' + '</b>' + row.Phone + '</h4>'); // use the table to populate your popup with text
// create a variable for your markup and add it to the map
var marker = new mapboxgl.Marker({
color: 'purple'
})
.setLngLat([row.Longitude, row.Latitude])
.setPopup(popup)
.addTo(map); // add the marker to the map
});
}
</script>
</body>
</html>