Skip to content

Commit

Permalink
Merge pull request #837 from mapseed/new-layer-panel
Browse files Browse the repository at this point in the history
Add full-height layer panel overlay to NYRP flavor
  • Loading branch information
goldpbear authored Nov 8, 2017
2 parents d092c56 + 21c6d6a commit 5ffec72
Showing 6 changed files with 727 additions and 52 deletions.
138 changes: 86 additions & 52 deletions src/flavors/nyrp/config.yml
Original file line number Diff line number Diff line change
@@ -53,14 +53,15 @@ map:
url: https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png
attribution: <a href="/page/terms">Terms and conditions</a> &copy; OpenStreetMap contributors, CC-BY-SA. <a href="//mapbox.com/about/maps" target="_blank">Mapbox</a>. Geocoding Courtesy of <a href="//www.mapquest.com/" target="_blank">MapQuest</a> <img src="//developer.mapquest.com/content/osm/mq_logo.png">.'

- id: terrain
type: basemap
url: //stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png
maxZoom: 16

- id: satellite
url: //api.tiles.mapbox.com/v4/smartercleanup.pe3o4gdn/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic21hcnRlcmNsZWFudXAiLCJhIjoiTnFhUWc2cyJ9.CqPJH-9yspIMudowQJx2Uw
attribution: '&copy; OpenStreetMap contributors, CC-BY-SA. <a href="//mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>. Geocoding Courtesy of <a href="//www.mapquest.com/" target="_blank">MapQuest</a> <img src="//developer.mapquest.com/content/osm/mq_logo.png">.'

- id: dark
url: //api.mapbox.com/styles/v1/smartercleanup/cis9wdf5h003w2xt6atlz48yh/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic21hcnRlcmNsZWFudXAiLCJhIjoiTnFhUWc2cyJ9.CqPJH-9yspIMudowQJx2Uw
attribution: 'Hello World'

- id: nyrp
url: https://dev-api.heyduwamish.org/api/v2/smartercleanup/datasets/nyrp
type: place
@@ -71,6 +72,51 @@ map:
type: place
slug: featured

# TODO: add real layer
- id: transit
type: wms
url: https://geoserver.mapseed.org/geoserver/kc_sewers/wms?
version: 1.3.0
format: image/png
transparent: true
layers: sewer

# TODO: add real layer
- id: biking
type: wms
url: https://geoserver.mapseed.org/geoserver/kc_sewers/wms?
version: 1.3.0
format: image/png
transparent: true
layers: sewer

# TODO: add real layer
- id: community
type: wms
url: https://geoserver.mapseed.org/geoserver/kc_sewers/wms?
version: 1.3.0
format: image/png
transparent: true
layers: sewer

# TODO: add real layer
- id: heat-waves
type: wms
url: https://geoserver.mapseed.org/geoserver/kc_sewers/wms?
version: 1.3.0
format: image/png
transparent: true
layers: sewer

# TODO: add real layer
- id: flood-zones
type: wms
url: https://geoserver.mapseed.org/geoserver/kc_sewers/wms?
version: 1.3.0
format: image/png
transparent: true
layers: sewer

# The values map the place type to map icons (defined below).
place_types:
observation:
@@ -210,67 +256,55 @@ place_types:
iconSize: [30, 30]
iconAnchor: [15, 15]


# Sidebar and activity stream should be enabled and disabled together!
# note: sidebar is aka 'MasterLegend'
# TODO: Couple the sidebar and activity stream because the activity stream is a component of the sidebar
sidebar:
enabled: true
legend_enabled: true
slug: filter-type
# Layers are defined in the "map config" section
# A panel's icon is a icon's name taken from here:
# https://fortawesome.github.io/Font-Awesome/icons/
panels:
- id: gis-layers
icon: list
view: GISLegendView
title: _(Map Layers:)
basemaps:
- id: osm
title: _(OpenStreetMap)
icon: map-o
title: _(Default)
visibleDefault: true
- id: satellite
title: _(Satellite View)
icon: map
title: _(Satellite)
visibleDefault: false
- id: dark
title: _(Dark)
- id: terrain
icon: globe
title: _(Terrain)
visibleDefault: false
groupings:
- id: grp-community
title: _(Community Data)
visibleDefault: true
- id: map-detail
title: _(Map detail)
layers:
- id: transit
icon: train
title: _(Transit)
visibleDefault: false
- id: biking
icon: bicycle
title: _(Biking)
visibleDefault: false
- id: nyrp
title: _(Community Reports)
visibleDefault: true
- id: nyrpfeatured
title: _(Featured Places)
visibleDefault: true

- id: ticker
view: ActivityView
icon: comments-o
activity: true
title: _(Activity Stream:)

- id: reports_legend
title: _(Citizen Reports:)
view: LegendView
icon: info-circle
items:
- title: _(Observations)
image: /static/css/images/markers/marker-observation.png
url: /filter/observation
- title: _(Ideas)
image: /static/css/images/markers/marker-idea.png
url: /filter/idea
- title: _(Questions)
image: /static/css/images/markers/marker-question.png
url: /filter/question
- title: _(Complaints)
image: /static/css/images/markers/marker-complaint.png
url: /filter/complaint
icon: map-marker
title: _(Comments)
visibleDefault: false
- id: community
icon: users
title: _(Community)
visibleDefault: false
- id: climate-risks
title: _(Map detail)
layers:
- id: heat-waves
icon: thermometer-full
title: _(Heat Waves)
visibleDefault: false
- id: flood-zones
icon: shower
title: _(Flood Zones)
visibleDefault: false


activity:
# Optional. Activity is supported by default. Set to false to disable.
77 changes: 77 additions & 0 deletions src/flavors/nyrp/jstemplates/sidebar.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<div id="sidebar-panel" class="sidebar-panel--hidden">

<div class="sidebar-panel__close-panel"></div>

<ul class="layer-type-list unstyled-list">
<li class="layer-type-grouping">
<div class="layer-type-grouping-title">{{#_}}Map type{{/_}}</div>
<ul class="layer-type-grouping-list unstyled-list">
{{#each sidebarConfig.basemaps}}
<li class="layer-type-li">
<div class="layer-type-title">
<i class="layer-panel-icon fa fa-{{ icon }}"></i>
<input id="map-{{ id }}" data-layerid="{{ id }}"
{{#if visibleDefault}}
checked="checked"
{{/if}}
class="map-legend-basemap-radio is-visuallyhidden" type="radio" name="basemap"></input>
<label for="map-{{ id }}">{{ title }}</label>
{{#if info}}
<span class="info-icon"
data-info-content="{{info}}"
data-info-title="{{title}}">
</span>
{{else}}
<span class="info-icon-placeholder"></span>
{{/if}}
<span class="status-icon"></span>
</div>
</li>
{{/each}}
</ul>
</li>
<hr />
{{#each sidebarConfig.groupings}}
<li class="layer-type-grouping">
<div class="layer-type-grouping-title">
<input id="{{ id }}" class="map-legend-grouping-checkbox is-visuallyhidden"
type="checkbox"
{{#if visibleDefault}}
checked="checked"
{{/if}}
></input>
<label for="{{ id }}">{{ title }}</label>
</div>
<ul class="layer-type-grouping-list unstyled-list">
{{# layers}}
<li class="layer-type-li">
<div class="layer-type-title">
<i class="layer-panel-icon fa fa-{{ icon }}"></i>
<input id="map-{{ id }}" data-layerid="{{ id }}"
{{#if visibleDefault}}
checked="checked"
{{/if}}
{{#if constituentLayers}}
data-constituent-layers="{{#each constituentLayers}}{{this}} {{/each}}"
{{/if}}
class="map-legend-checkbox is-visuallyhidden" type="checkbox"></input>
<label for="map-{{ id }}">{{ title }}</label>
{{#if info}}
<span class="info-icon"
data-layerid="{{id}}"
data-info-content="{{info}}"
data-info-title="{{title}}">
</span>
{{else}}
<span class="info-icon-placeholder"></span>
{{/if}}
<span class="status-icon"></span>
</div>
</li>
{{/layers}}
</ul>
</li>
<hr />
{{/each}}
</ul>
</div>
88 changes: 88 additions & 0 deletions src/flavors/nyrp/static/css/custom.css
Original file line number Diff line number Diff line change
@@ -4,6 +4,94 @@
* NOTE: "With great power comes great responsibility."
*/

#sidebar-panel {
position: absolute;
opacity: 0.9;
left: 0;
top: 0;
background-color: #FFFFFF;
height: 100%;
width: 250px;
max-width: 250px;
z-index: 5000;
overflow: scroll;
-webkit-box-shadow: 2px 0px 1px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: 2px 0px 1px 0px rgba(50, 50, 50, 0.3);
box-shadow: 2px 0px 1px 0px rgba(50, 50, 50, 0.3);
}

.sidebar-panel--hidden {
display: none;
}

.sidebar-panel--visible {
display: block;
}

#sidebar-panel hr {
margin-top: 0;
margin-bottom: 0;
}

.sidebar-panel__close-panel:after {
font-family: FontAwesome;
content: "\f00d";
float: right;
padding-top: 10px;
padding-right: 10px;
}

.sidebar-panel__close-panel:hover {
cursor: pointer;
color: #888888;
}

.layer-panel-icon {
float: left;
padding-right: 8px;
width: 1.2em;
text-align: center;
}

.layer-type-grouping {
margin-left: 20px;
}

.layer-type-grouping-title {
margin-bottom: 10px;
margin-top: 10px;
}

.layer-type-li {
height: 2.0em;
}

.layer-type-title label {
margin: 0;
border-bottom: 2px solid transparent;
}

.layer-type-title input:checked ~ label {
background-color: transparent;
border-bottom: 2px solid rgba(0,0,255,1);
}

.layer-type-title input:hover ~ label {
background-color: transparent;
border-bottom: 2px solid rgba(0,0,255,0.5);
}

.show-layer-panel:before {
font-family: FontAwesome;
content: "\f03a";
font-size: 1.4em;
}

@media only screen and (min-width: 60em) {
#main-btns-container.main-btns-container--offset-left {
left: 260px;
}
}

/* =Header
-------------------------------------------------------------- */
Loading

0 comments on commit 5ffec72

Please sign in to comment.