Skip to content

Commit 821e20e

Browse files
keikreutlerkeikreutler
committed
Created first stage of the mockup map
1 parent d8fde75 commit 821e20e

File tree

7 files changed

+140
-32
lines changed

7 files changed

+140
-32
lines changed

‎docpad.coffee

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ docpadConfig = {
4040
# Styles
4141
styles: [
4242
"//fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic&subset=latin,latin-ext"
43+
"//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic&subset=latin,latin-ext"
4344
"//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
4445
"/styles/twitter-bootstrap.css"
4546
"//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css"

‎src/layouts/map.html.eco

-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@
4545
<!-- Scripts -->
4646
<%- @getBlock('scripts').add(@site.scripts).toHTML() %>
4747
<script defer="defer" type="text/javascript" src="/scripts/map.js"></script>
48-
<script defer="defer" type="text/javascript" src="/scripts/app.js"></script>
4948
<!-- Piwik -->
5049
<script type="text/javascript">
5150
var _paq = _paq || [];

‎src/render/embed.html.eco

+18-19
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,23 @@ layout: map
33
tags: ['ssedas','embed','map']
44
---
55

6-
<div id="map-embed">
6+
<div id="map-filters">
7+
<img src="/images/susy_logo.png">
8+
<h3>Organisations</h3>
9+
<ul class="list-group">
10+
<li id="f1" class="list-group-item">Food and Agriculture</li>
11+
<li id="f2" class="list-group-item">Fair Trade</li>
12+
<li id="f3" class="list-group-item">Reduce, reuse, repair, recycle</li>
13+
<li id="f4" class="list-group-item">Housing and habitat</li>
14+
<li id="f5" class="list-group-item">Infrastructure</li>
15+
<li id="f5-sub" class="list-group-item">Bicycle initiatives</li>
16+
<li id="f5-sub" class="list-group-item">Energy</li>
17+
<li id="f6" class="list-group-item">Social inclusion</li>
18+
<li id="f7" class="list-group-item">Commoning</li>
19+
<li id="f8" class="list-group-item">Education and Training</li>
20+
<li id="f9" class="list-group-item">MORE FILTERS</li>
21+
</ul>
722
</div>
823

9-
10-
<!-- Backbone template for popups -->
11-
12-
<div id="profiles"></div>
13-
14-
<!-- Create isotope items -->
15-
<script id="profileTemplate" type="text/template">
16-
<div class="col-sm-4">
17-
<div class="caption">
18-
<h6>
19-
<a data-target="#<%- project.link %>" data-toggle="modal">
20-
<%- project.name %>
21-
</a>
22-
</h6>
23-
</div>
24-
</div>
25-
</div>
26-
</script>
24+
<div id="map-embed">
25+
</div>

‎src/render/scripts/map.js

+8-10
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,30 @@ var map = L.map('map-embed', {
55
scrollWheelZoom: false
66
});
77

8+
var theme_colors = ["#fcec74", "#f7df05", "#f2bd0b", "#fff030", "#95D5D2", "#1F3050"];
9+
810
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
911

1012
var geojsonLayer = new L.layerGroup();
1113

1214
$.getJSON("//data.transformap.co/raw/5d6b9d3d32097fd68322008744001eec", function(data) {
1315
L.geoJson(data, {
1416
pointToLayer: function(feature, latlng) {
15-
var marker = L.marker(latlng);
17+
var marker = L.circleMarker(latlng, {
18+
color: theme_colors[(Math.floor(Math.random() * 6) + 1)],
19+
opacity: 1,
20+
fillOpacity: 1,
21+
});
1622
return marker;
1723
},
1824
onEachFeature: createLayers
1925
});
2026
});
2127

2228
function createLayers(feature, featureLayer) {
23-
featureLayer.bindPopup('<strong>' + feature.properties.name + '</strong><p>' + feature.properties.concept + '</p><a href="' + feature.properties.url + '"">' + feature.properties.url + '</a>' );
29+
featureLayer.bindPopup('<a href="' + feature.properties.url + '"">' + feature.properties.name + '</a><p>' + feature.properties.concept + '</p>' );
2430
geojsonLayer.addLayer(featureLayer);
2531
}
2632

2733
geojsonLayer.addTo(map);
2834

29-
var router = new (Backbone.Router.extend())
30-
31-
var Profile = Backbone.Model.extend();
32-
33-
var ProfileList = Backbone.Collection.extend({
34-
model: Profile,
35-
url: '//data.transformap.co/raw/5d6b9d3d32097fd68322008744001eec'
36-
});

‎src/render/styles/style.css.less

+113-2
Original file line numberDiff line numberDiff line change
@@ -206,12 +206,123 @@ Map Styles
206206
width: 100vw;
207207
/*.leaflet-top .leaflet-control {
208208
margin-top: 60px; /* To account for navbar height and padding */
209-
//}
209+
p {
210+
font-family: 'Open Sans', sans-serif;
211+
}
212+
}
213+
214+
@yellow-one: #fcec74;
215+
@yellow-two: #f7df05;
216+
@yellow-three: #f2bd0b;
217+
@yellow-four: #fff030;
218+
@blue: #95D5D2;
219+
@light-blue: #1F3050;
220+
221+
#map-filters {
222+
height: 100vh;
223+
width: 20%;
224+
display: inline;
225+
float: left;
226+
padding: 50px 0;
227+
img {
228+
max-width: 100px;
229+
display: block;
230+
margin: auto;
231+
}
232+
.list-group {
233+
color: #000;
234+
font-size: 12px !important;
235+
font-weight: 700;
236+
padding-top: 25px;
237+
}
238+
.list-group-item {
239+
border-top: 1px solid #eee;
240+
border-bottom: 0px;
241+
border-left: 0px;
242+
border-right: 0px;
243+
border-radius: 0;
244+
}
245+
#f1 {
246+
&:hover, &:active {
247+
background: @yellow-two;
248+
}
249+
}
250+
#f2 {
251+
&:hover, &:active {
252+
background: @yellow-two;
253+
}
254+
}
255+
#f3 {
256+
&:hover {
257+
background: @yellow-three;
258+
}
259+
}
260+
#f4 {
261+
&:hover {
262+
background: @yellow-four;
263+
}
264+
}
265+
#f5 {
266+
background: @blue;
267+
border: 0;
268+
&:hover {
269+
background: @blue;
270+
}
271+
}
272+
#f5-sub {
273+
background: #eee;
274+
border-top: 0;
275+
padding: 5px;
276+
padding-left: 15px;
277+
}
278+
#f9 {
279+
background: @light-blue;
280+
width: 100%;
281+
font-weight: 500;
282+
color: #fff;
283+
position: absolute;
284+
bottom: 0;
285+
padding: 5px;
286+
padding-left: 15px;
287+
}
288+
}
289+
290+
#map-filters-2 {
291+
height: 100%;
292+
width: 20px;
293+
display: inline;
294+
}
295+
296+
.vertical-text {
297+
transform: rotate(90deg);
298+
transform-origin: left top 0;
210299
}
211300

212301
#map-embed {
213302
height: 100%;
214-
width: 100%;
303+
width: 80%;
304+
margin-left: 20%;
305+
display: inline block;
306+
.leaflet-popup {
307+
font-family: 'Open Sans', sans-serif;
308+
min-width: 150px;
309+
p {
310+
font-size: 12px;
311+
text-align: left;
312+
}
313+
}
314+
.leaflet-popup-content-wrapper {
315+
border-radius: 0;
316+
padding: 3px;
317+
min-width: 250px;
318+
}
319+
.leaflet-popup-content {
320+
a {
321+
font-weight: 500;
322+
color: #000;
323+
}
324+
margin: 5px;
325+
}
215326
}
216327

217328
/*****************

‎src/static/images/mockup.png

298 KB
Loading

‎src/static/images/susy_logo.png

4.1 KB
Loading

0 commit comments

Comments
 (0)