removed sheetse- added popups + mapbox style
This commit is contained in:
Omar
parent
89a31ae2e2
commit
ef7777ee22
1 changed files with 184 additions and 47 deletions
231
index.html
231
index.html
|
|
@ -1,52 +1,189 @@
|
|||
<!doctype html>
|
||||
<!-- <!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="js/tabletop1.3.4.js"></script>
|
||||
<script type="text/javascript" src="js/sheetsee.js"></script>
|
||||
<link type='text/css' rel='stylesheet' href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css'>
|
||||
<!-- Add a Title -->
|
||||
<title>Map</title>
|
||||
</head>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<title>Display a map</title>
|
||||
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
|
||||
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
|
||||
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
|
||||
<style>
|
||||
html {width: 100%; height: 100%;}
|
||||
body {width: 100%; height: 100%; margin: 0;}
|
||||
/* How about a different background color? */
|
||||
#map {width: 100%; height: 100%; background-color: #F7CE86;}
|
||||
.leaflet-popup-content li {list-style:none;}
|
||||
.leaflet-popup-content {width: 102px;}
|
||||
.leaflet-popup-content img {width: 100px;}
|
||||
a {border: none;}
|
||||
body { margin:0; padding:0; }
|
||||
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||
</style>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="text/javascript">
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// see how what the example spreadsheet looks like:
|
||||
// https://docs.google.com/spreadsheet/lv?key=0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc
|
||||
var URL = "1muHT2a5eXHI11VWSNnwmVCEfMmPm8kzktnDFRPVdzow"
|
||||
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
|
||||
})
|
||||
<div id='map'></div>
|
||||
<script>
|
||||
mapboxgl.accessToken = 'pk.eyJ1IjoibmFqb21hcjY4IiwiYSI6ImNqZjkzZGhhczBkc3gycXFvbHA3d2U1aTcifQ.2g2XefOGLxJrIqi8z2uNGA';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: 'mapbox://styles/najomar68/cjfkqhna10mvf2rnvnn0nhf8o',
|
||||
center: [151.209240, -33.878838],
|
||||
zoom: 13.8
|
||||
});
|
||||
</script>
|
||||
|
||||
function showInfo(data) {
|
||||
// the column headers of the info you want in your popup
|
||||
var optionsJSON = ["placename", "photo-url"]
|
||||
// an html template for your popup
|
||||
var template = "<ul><li><a href='{{photo-url}}' target='_blank'>"
|
||||
+ "<img src='{{photo-url}}'></a></li>"
|
||||
+ "<li><h4>{{placename}}</h4></li></ul>"
|
||||
var geoJSON = Sheetsee.createGeoJSON(data, optionsJSON)
|
||||
var map = Sheetsee.loadMap("map")
|
||||
// Try different map tiles? examples.map-20v6611k
|
||||
// examples.map-y7l23tes
|
||||
// examples.map-h67hf2ic
|
||||
// examples.map-i86nkdio
|
||||
// examples.h186knp8
|
||||
Sheetsee.addTileLayer(map, 'jllord.n7aml2bc')
|
||||
Sheetsee.addMarkerLayer(geoJSON, map, template)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</html> -->
|
||||
<!-- <!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<title>Attach a popup to a marker instance</title>
|
||||
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
|
||||
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
|
||||
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
|
||||
<style>
|
||||
body { margin:0; padding:0; }
|
||||
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<style>
|
||||
|
||||
#marker {
|
||||
background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg');
|
||||
background-size: cover;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mapboxgl-popup {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id='map'></div>
|
||||
|
||||
<script>
|
||||
mapboxgl.accessToken = 'pk.eyJ1IjoibmFqb21hcjY4IiwiYSI6ImNqZjkzZGhhczBkc3gycXFvbHA3d2U1aTcifQ.2g2XefOGLxJrIqi8z2uNGA';
|
||||
|
||||
var monument = [-77.0353, 38.8895];
|
||||
var map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: 'mapbox://styles/mapbox/light-v10',
|
||||
center: monument,
|
||||
zoom: 15
|
||||
});
|
||||
|
||||
// create the popup
|
||||
var popup = new mapboxgl.Popup({ offset: 25 })
|
||||
.setText('Construction on the Washington Monument began in 1848.');
|
||||
|
||||
// create DOM element for the marker
|
||||
var el = document.createElement('div');
|
||||
el.id = 'marker';
|
||||
|
||||
// create the marker
|
||||
new mapboxgl.Marker(el)
|
||||
.setLngLat(monument)
|
||||
.setPopup(popup) // sets a popup on this marker
|
||||
.addTo(map);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html> -->
|
||||
|
||||
<!-- <!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<title>Display a map</title>
|
||||
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
|
||||
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
|
||||
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.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>
|
||||
|
||||
</script>
|
||||
<script>
|
||||
mapboxgl.accessToken = 'pk.eyJ1IjoibmFqb21hcjY4IiwiYSI6ImNqZjkzZGhhczBkc3gycXFvbHA3d2U1aTcifQ.2g2XefOGLxJrIqi8z2uNGA';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: 'mapbox://styles/najomar68/cjw0120761syu1cmzhptjbahc',
|
||||
center: [151.209240, -33.878838],
|
||||
zoom: 13.8
|
||||
});
|
||||
|
||||
map.on('click', function(e) {
|
||||
var features = map.queryRenderedFeatures(e.point, {
|
||||
layers: ['airports-1'] // replace this with the name of the layer
|
||||
});
|
||||
|
||||
if (!features.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var feature = features[0];
|
||||
|
||||
var popup = new mapboxgl.Popup({ offset: [0, -15] })
|
||||
.setLngLat(feature.geometry.coordinates)
|
||||
.setHTML('<h3>' + feature.properties.title + '</h3><p>' + feature.properties.city + '</p>')
|
||||
.setLngLat(feature.geometry.coordinates)
|
||||
.addTo(map);
|
||||
});
|
||||
// Add zoom and rotation controls to the map.
|
||||
map.addControl(new mapboxgl.NavigationControl());
|
||||
</script> -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<title>Display a map</title>
|
||||
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
|
||||
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
|
||||
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.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.eyJ1IjoibmFqb21hcjY4IiwiYSI6ImNqZjkzZGhhczBkc3gycXFvbHA3d2U1aTcifQ.2g2XefOGLxJrIqi8z2uNGA';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: 'mapbox://styles/najomar68/cjw02ixkt1u6i1cp6uw0zbphb',
|
||||
center: [-89.352858, 39.329402],
|
||||
zoom: 2.8
|
||||
});
|
||||
// Add popups
|
||||
map.on('click', function(e) {
|
||||
var features = map.queryRenderedFeatures(e.point, {
|
||||
layers: ['airports-1'] // replace this with the name of the layer
|
||||
});
|
||||
|
||||
if (!features.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var feature = features[0];
|
||||
|
||||
var popup = new mapboxgl.Popup({ offset: [0, -15] })
|
||||
.setLngLat(feature.geometry.coordinates)
|
||||
.setHTML('<h3>' + feature.properties.title + '</h3><p>' + feature.properties.city + '</p>')
|
||||
.setLngLat(feature.geometry.coordinates)
|
||||
.addTo(map);
|
||||
});
|
||||
// Add zoom and rotation controls to the map.
|
||||
map.addControl(new mapboxgl.NavigationControl());
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue