-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
50 lines (44 loc) · 1.65 KB
/
index.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
<!DOCTYPE html>
<head>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css" rel="stylesheet" /> <style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = "pk.eyJ1IjoiamVzc2lzZW5hIiwiYSI6ImNqOG9xc2t3bTA2dW8zMm5uejhsYnhmODMifQ.jSGSwMVB7LFtOZxPIMyShg";
/* Map: This represents the map on the page. */
var map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/jessisena/cjfmnya2b14vr2rlp1nabm2i9",
zoom:12.5,
center: [-122.93870,46.13895]
});
map.on("load", function () {
/* Image: An image is loaded and added to the map. */
map.loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/We_Can_Do_It%21.jpg/185px-We_Can_Do_It%21.jpg", function(error, image) {
if (error) throw error;
map.addImage("custom-marker", image);
/* Style layer: A style layer ties together the source and image and specifies how they are displayed on the map. */
map.addLayer({
id: "markers",
type: "symbol",
/* Source: A data source specifies the geographic coordinate where the image marker gets placed. */
source: {
type: "geojson",
data: {
type: "FeatureCollection",
features:[{"type":"Feature","geometry":{"type":"Point","coordinates":["-122.955556","46.142778"]}}]}
},
layout: {
"icon-image": "custom-marker",
"icon-size": 0.90
}
});
});
});
</script>
</body>
</html>