Skip to content

Added prototype for a map, just drop it into a public folder on a web… #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Famicoman wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added prototype for a map, just drop it into a public folder on a web… #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
217 changes: 217 additions & 0 deletions map-prototype/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,217 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>Map / Philly Mesh</title>
Copy link
Member

@benhylau benhylau Mar 31, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@garrying Is there a good way to group these deployment-specific parts in a configuration file?

Copy link

@dcwalk dcwalk Apr 5, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are ways, but I think choosing a good one depends more on whatever like idiom we want to follow. We already work with jekyll, yaml, liquid for our web stuff so maybe continue in that vein?

Based on our current web deployment I could see either being feasible(?):

  1. using jekyll and _config.yml, and having to generate the site before deploy
  2. using grunt with grunt-liquid to have the grunt config handle titles, etc...

<link rel="stylesheet" href="main2.css"/>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="tachyons.min.css"/>
Copy link

@dcwalk dcwalk Apr 5, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a way to refactor some of this style stuff? I think the main2 has normalize and a grid system in it, and tachyons is included seperately.

I think maybe we could gut most of this, go with one framework/toolkit and minimally define css needed on top (and keep normalize?) @garrying this is all you I got nothing else here.

Never worked with tachyons but it looks neat

</head>
<body class="sans-serif bg-white">
<div id="map-div" class="h100">

</div>

<nav>
<a href="/" class="logo">
<!--<img src="/assets/images/logo.png">-->
Philly Mesh
</a>
<!--<div class="mainnav">
<a href="/map">Map</a>
<a href="/blog">Blog</a>
<a href="/faq">FAQ</a>
<a href="/join">Join</a>
<a href="/donate">Donate</a>
</div>-->

<div class="title-container">
</div>
</nav>
<!--<div class="content bg-white">
Copy link
Member

@benhylau benhylau Mar 31, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove dead code?

<p><strong>Map of NYC Mesh nodes</strong></p>

<p>This map shows our node locations. The colored markers are currently active nodes. The larger markers are rooftops. The gray markers are node requests from the “Join” form. We are currently working to turn these into active nodes.</p>

<p>We have over 40 active nodes and we are adding about one or two per week.</p>

<p>Neighborhoods have different organizers. You can email them directly below. If you would like to volunteer for your neighborhood please <a href="mailto:nycmeshmail@gmail.com">email us</a>.</p>

<p><strong>Manhattan</strong></p>

<p>UWS -<a href="mailto:oliver@nycmesh.net">Oliver</a> <br>
Downtown (Tribeca/SoHo/Financial/West Village) -<a href="mailto:bob@nycmesh.net">Bob</a> <br>
Chinatown -<a href="mailto:arthur@nycmesh.net">Arthur</a> <br>
East Village/LES -<a href="mailto:brian@nycmesh.net">Brian</a><br>
Lower East Side -<a href="mailto:james@nycmesh.net">James</a><br>
East Harlem -<a href="mailto:robj@nycmesh.net">Rob J</a></p>

<p><strong>Brooklyn</strong></p>

<p>Fort Greene/Clinton Hill -<a href="mailto:dylan@nycmesh.net">Dylan</a> <br>
East Williamsburg/Bushwick -<a href="mailto:joel@nycmesh.net">Joel</a><br>
Bushwick -<a href="mailto:myf@nycmesh.net">Myf</a></p>

<p><strong>Queens</strong></p>

<p>Sunnyside -<a href="mailto:shawn@nycmesh.net">Shawn</a><br>
Jackson Heights -<a href="mailto:tom@nycmesh.net">Tom</a><br>
Woodside – <a href="mailto:calvin@nycmesh.net">Calvin</a></p>

<p><strong>Bronx</strong></p>

<p>South Bronx -<a href="mailto:rb@nycmesh.net">RB</a></p>


<footer class="footer">
<img src="../../assets/images/isoc-logo.png" align="right" style="width:180px;height:60px;">
This project was made possible in part through a donation from the Internet Society.<br><br>
<br><br>
<a href="/">Home</a>
<div class="mainnav">

<a href="/map">Map</a>
<a href="/blog">Blog</a>
<a href="/faq">FAQ</a>
<a href="/join">Join</a>
<a href="/donate">Donate</a>
<div></div>

</div>

</footer>

</div>-->

<script>
var map;

function initMap() {
var styles = [
{
featureType: "administrative.locality",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "road.highway",
elementType: "all",
stylers: [
// { lightness: 100 },
{ visibility: "off" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "on" }
]
},{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "transit",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});

map = new google.maps.Map(document.getElementById('map-div'), {
//center: {lat: 40.7281809, lng: -73.9595798},
center: {lat: 39.952617, lng: -75.163610},
zoom: 12,
disableDefaultUI: true,
zoomControl: true,
scrollwheel: false
});
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');

map.data.setStyle(function(feature) {
var status = feature.f.status;
var fillColor = (status == 'Installed') ? 'red' : 'gray';
var opacity = (status == 'Installed') ? .9 : .5;
var zIndex = (status == 'Installed') ? 100 : 1;
var scale = 8;
var strokeWeight = 1;
// supernode
if (feature.f.id == 227) {
scale = 10;
strokeWeight = 2;
}

return {
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: fillColor,
fillOpacity: opacity,
strokeOpacity: opacity,
scale: scale,
strokeColor: 'white',
strokeWeight: strokeWeight,
clickable: true,
},
//title: 'Node #'+feature.f.id,
title : feature.f.host,
zIndex: zIndex
}
});

map.data.loadGeoJson('./nodes.json');

var infowindow = new google.maps.InfoWindow();


map.data.addListener('click', function(event) {
var content = "<div class='pv3 tl'>"
content += "<p class='f4 fw7 di pr2 tl'>"+event.feature.f.host+"</p>"
content += "<br>"
if (event.feature.f.status == 'Installed') {
content += "<p class='di green f5 fw4'>Active</p>"
}else {
content += "<p class='di gray f5 fw4'>Potential</p>"
}
content += "<br>"
content += "<p class='di gray f5 fw4'>IPv6: "+event.feature.f.ipv6+"</p>"
content += "<br>"
content += "<p class='di blue f5 fw4'><a href='https://www.fc00.org/#"+event.feature.f.ipv6+"'>View on fc00.org</a></p>"
content += "</div>"

var panoramas = event.feature.f.panoramas
if (panoramas) {
content += "<p class='pv0 mv0 near-black fw4 tl'>View from this location:</p>"
for (var i = 0; i < panoramas.length; i++) {
Copy link

@dcwalk dcwalk Apr 5, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you want this code in the monitoring? This is for loading in panos

var image = "<a href='../panorama/"+panoramas[i]+"'>"
image += "<div class='bg-near-white h5 w6 cover pv0 mt1 mb3' style='background-image: url(\"../panorama/"+panoramas[i]+"\")'></div>"
image += "</a>"

content += image;
}
}
infowindow.setContent(content);
infowindow.setPosition(event.feature.getGeometry().get());
infowindow.setOptions({pixelOffset: new google.maps.Size(-1,0)});
infowindow.open(map);
});

map.addListener("click", function(event) {
infowindow.close();
})


}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNClp7oJsw-eleEoR3-PQKV23tpeW-FpE&libraries=visualization&callback=initMap"
Copy link

@dcwalk dcwalk Apr 5, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd be up for working with a different library like leaflet (http://leafletjs.com/examples/geojson/) for some of this mapping work, we can work with a wider array of basemaps (not just google) if so.

async defer></script>
</body>
</html>
Loading