Skip to content

Commit

Permalink
added map
Browse files Browse the repository at this point in the history
  • Loading branch information
r8n5n authored and r8n5n committed Feb 6, 2016
1 parent 8378107 commit dbd19a7
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 37 deletions.
57 changes: 57 additions & 0 deletions web/js/app.js
View file
Original file line number Diff line number Diff line change
@@ -1 +1,58 @@
$(document).foundation();



var map = L.map('map').setView([53.38159, -1.47148], 13);



L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
maxZoom: 18,
zoom: 13,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(map);


map.locate();

function onLocationFound(e) {
var radius = e.accuracy / 2;

L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();

L.circle(e.latlng, radius).addTo(map);

}

map.on('locationfound', onLocationFound);


var popup = L.popup();

function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}

map.on('click', onMapClick);


var postoffices = L.tileLayer.wms('http://52.16.129.211:8080/geoserver/sheffugees/wms',
{
layers: 'shefugees:postoffices',
tiled: true,
format: 'image/png',
transparent: true,
maxZoom: 18,
minZoom: 12,
continuousWorld: true
}).addTo(map);

5 changes: 5 additions & 0 deletions web/scss/_global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,9 @@ and open the template in the editor.
li a{
display: block;
}
}


#map {
height: 400px;
}
91 changes: 54 additions & 37 deletions web/search-postoffice.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
</head>
<body>
<div class="row">
Expand All @@ -17,51 +18,67 @@ <h1>Post Offices near you</h1>


<div class="row">
<div class="small-12 columns">
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">List view</a></li>
<li class="tabs-title"><a href="#panel2">Map view</a></li>
</ul>

<div class="small-12 medium-6 large-6 columns">
<div class="callout secondary">
<img src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=53.372722,-1.4682351&heading=234.28&pitch=0&key=AIzaSyBEoWw039wZsgCN9sBND-oLlQfzFJ6vLwo" class="thumbnail" alt="">
<p>228 Shoreham St, Sheffield, England</p>
<div class="row">
<div class="small-6 columns">
<a href="#" class="button expand">
<img src="//placehold.it/128x128" class="thumbnail" alt="">
<p>Navigate using Street View</p>
</a>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">
<div class="small-12 medium-6 large-6 columns">
<div class="callout secondary">
<img src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=53.372722,-1.4682351&heading=234.28&pitch=0&key=AIzaSyBEoWw039wZsgCN9sBND-oLlQfzFJ6vLwo" class="thumbnail" alt="">
<p>228 Shoreham St, Sheffield, England</p>
<div class="row">
<div class="small-6 columns">
<a href="#" class="button expand">
<img src="//placehold.it/128x128" class="thumbnail" alt="">
<p>Navigate using images</p>
</a>
</div>
<div class="small-6 columns">
<a href="#" class="button expand">
<img src="//placehold.it/128x128" class="thumbnail" alt="">
<p>Navigate on a map</p>
</a>
</div>
</div>
</div>
</div>
<div class="small-6 columns">
<a href="#" class="button expand">
<img src="//placehold.it/128x128" class="thumbnail" alt="">
<p>Navigate on a map</p>
</a>
<div class="small-12 medium-6 large-6 columns">
<div class="callout secondary">
<img src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=53.3787745,-1.470125&heading=19.8&pitch=0&key=AIzaSyBEoWw039wZsgCN9sBND-oLlQfzFJ6vLwo" class="thumbnail" alt="">
<p>43 Charles St, Sheffield, England</p>
<div class="row">
<div class="small-6 columns">
<a href="#" class="button expand">
<img src="//placehold.it/128x128" class="thumbnail" alt="">
<p>Navigate using images</p>
</a>
</div>
<div class="small-6 columns">
<a href="#" class="button expand">
<img src="//placehold.it/128x128" class="thumbnail" alt="">
<p>Navigate on a map</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="small-12 medium-6 large-6 columns">
<div class="callout secondary">
<img src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=53.3787745,-1.470125&heading=19.8&pitch=0&key=AIzaSyBEoWw039wZsgCN9sBND-oLlQfzFJ6vLwo" class="thumbnail" alt="">
<p>43 Charles St, Sheffield, England</p>
<div class="row">
<div class="small-6 columns">
<a href="#" class="button expand">
<img src="//placehold.it/128x128" class="thumbnail" alt="">
<p>Navigate using Street View</p>
</a>
</div>
<div class="small-6 columns">
<a href="#" class="button expand">
<img src="//placehold.it/128x128" class="thumbnail" alt="">
<p>Navigate on a map</p>
</a>
</div>
<div class="tabs-panel" id="panel2">
<div class="map-container">
<div id="map">
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</div>

<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
Expand Down

0 comments on commit dbd19a7

Please sign in to comment.