Skip to content
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

enhances and refactors new map component #4940

Merged
merged 9 commits into from
Jun 20, 2019
Merged

enhances and refactors new map component #4940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
901bde5
adds legend tab content to map component, re: #4670
robgaston Jun 19, 2019
a6fa00f
Merge remote-tracking branch 'origin/master' into 4670_geojson_card_c…
robgaston Jun 19, 2019
adec7e6
refactors map component as generic ko component, re: #4670
robgaston Jun 19, 2019
a12ca65
improves layer icon styles, re: #4670
robgaston Jun 19, 2019
9733c8d
refactors map component, re: #4670
robgaston Jun 19, 2019
dae689c
supports passing layers and sources into map component, re: #4670
robgaston Jun 19, 2019
c32d4d0
refactors, adds controls, improves styles re: #4670
robgaston Jun 20, 2019
116e802
Merge remote-tracking branch 'origin/master' into 4670_geojson_card_c…
robgaston Jun 20, 2019
e718618
fixes for map component, re: #4670
robgaston Jun 20, 2019
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
44 changes: 39 additions & 5 deletions arches/app/media/css/arches.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
@import url(../packages/leaflet/dist/leaflet.css);
@import url(../packages/leaflet-draw/dist/leaflet.draw.css);
@import url(../css/tree/tree.css);
@import url(../packages/@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css);
.regular-link {
color: #337ab7;
text-decoration: none;
Expand Down Expand Up @@ -1148,6 +1149,7 @@ ul.tabbed-report-tab-list {
}

.map-card-wrapper {
flex: 1;
height: 100%;
position: relative;
}
Expand Down Expand Up @@ -1216,16 +1218,26 @@ ul.tabbed-report-tab-list {
color: rgb(33, 62, 95);
}

.basemap-listing, .overlay-listing {
.basemap-listing, .overlay-listing, .legend-listing {
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgb(216, 216, 216);
}

.basemap-listing, .overlay-listing .overlay-opacity-control, .overlay-listing .overlay-name {
cursor: pointer;
}

.overlay-listing, .legend-listing {
cursor: grab;
}

.basemap-listing, .overlay-listing {
font-size: 16px;
color: rgb(158, 158, 158);
}

.basemap-listing:before, .overlay-listing .overlay-name:before {
margin-right: 16px;
margin-right: 4px;
font-family: FontAwesome;
}

Expand Down Expand Up @@ -1304,8 +1316,26 @@ ul.tabbed-report-tab-list {
width: 150px;
opacity: 1;
}

.basemap-listing.active-basemap, .basemap-listing:hover, .overlay-listing.active-overlay, .overlay-listing:hover {
.legend-listing .legend-name {
font-size: 16px;
}
.legend-listing .legend-content {
padding: 10px 10px 0;
}
.layer-listing-icon {
display: inline-block;
}
.layer-listing-icon::before {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: solid 1px rgb(216, 216, 216);
border-radius: 100%;
background-color: rgb(247, 247, 247);
}
.basemap-listing.active-basemap, .basemap-listing:hover, .overlay-listing.active-overlay, .overlay-listing:hover, .legend-listing .legend-name {
color: rgb(33, 62, 95);
}
.basemap-listing.active-basemap, .basemap-listing:hover, .overlay-listing:hover {
Expand Down Expand Up @@ -9870,6 +9900,10 @@ a.clear-geojson-button:hover {
visibility: hidden;
}

.map-card-wrapper .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
visibility: visible;
}

.widget-wrapper .mapboxgl-map {
z-index: 10;
margin-bottom: -10px;
Expand Down
151 changes: 3 additions & 148 deletions arches/app/media/js/views/components/cards/map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,156 +1,11 @@
define([
'jquery',
'underscore',
'arches',
'knockout',
'viewmodels/card-component',
'bindings/sortable'
], function($, _, arches, ko, CardComponentViewModel) {
'views/components/map'
], function(ko, CardComponentViewModel) {
return ko.components.register('map-card', {
viewModel: function(params) {
var self = this;
var geojsonSourceFactory = function() {
return {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": []
}
};
};

this.basemaps = [];
this.overlays = ko.observableArray();
this.activeBasemap = ko.observable();
this.activeTab = ko.observable();
this.hideSidePanel = function() {
self.activeTab(undefined);
};

arches.mapLayers.forEach(function(layer) {
if (!layer.isoverlay) {
self.basemaps.push(layer);
if (layer.addtomap) self.activeBasemap(layer);
}
else {
layer.opacity = ko.observable(layer.addtomap ? 100 : 0);
layer.onMap = ko.pureComputed({
read: function() { return layer.opacity() > 0; },
write: function(value) {
layer.opacity(value ? 100 : 0);
}
});
self.overlays.push(layer);
}
});

_.each(arches.mapSources, function(sourceConfig) {
if (sourceConfig.tiles) {
sourceConfig.tiles.forEach(function(url, i) {
if (url.startsWith('/')) {
sourceConfig.tiles[i] = window.location.origin + url;
}
});
}
});

var multiplyStopValues = function(stops, multiplier) {
_.each(stops, function(stop) {
if (Array.isArray(stop[1])) {
multiplyStopValues(stop[1], multiplier);
} else {
stop[1] = stop[1] * multiplier;
}
});
};

var updateOpacity = function(layer, val) {
var opacityVal = Number(val) / 100.0;
layer = JSON.parse(JSON.stringify(layer));
if (layer.paint === undefined) {
layer.paint = {};
}
_.each([
'background',
'fill',
'line',
'text',
'icon',
'raster',
'circle',
'fill-extrusion',
'heatmap'
], function(opacityType) {
var startVal = layer.paint ? layer.paint[opacityType + '-opacity'] : null;

if (startVal) {
if (parseFloat(startVal)) {
layer.paint[opacityType + '-opacity'].base = startVal * opacityVal;
} else {
layer.paint[opacityType + '-opacity'] = JSON.parse(JSON.stringify(startVal));
if (startVal.base) {
layer.paint[opacityType + '-opacity'].base = startVal.base * opacityVal;
}
if (startVal.stops) {
multiplyStopValues(layer.paint[opacityType + '-opacity'].stops, opacityVal);
}
}
} else if (layer.type === opacityType ||
(layer.type === 'symbol' && (opacityType === 'text' || opacityType === 'icon'))) {
layer.paint[opacityType + '-opacity'] = opacityVal;
}
}, self);
return layer;
};

var layers = ko.pureComputed(function() {
var layers = self.activeBasemap().layer_definitions.slice(0);
self.overlays().forEach(function(layer) {
if (layer.onMap()) {
var opacity = layer.opacity();
layer.layer_definitions.forEach(function(layer) {
layers.push(updateOpacity(layer, opacity));
});
}
});
return layers;
}, this);

this.mapOptions = {
style: {
version: 8,
sources: Object.assign({
"resource": geojsonSourceFactory(),
"search-results-hex": geojsonSourceFactory(),
"search-results-hashes": geojsonSourceFactory(),
"search-results-points": geojsonSourceFactory()
}, arches.mapSources),
sprite: arches.mapboxSprites,
glyphs: arches.mapboxGlyphs,
layers: layers(),
center: [arches.mapDefaultX, arches.mapDefaultY],
zoom: arches.mapDefaultZoom
},
bounds: arches.hexBinBounds
};

this.toggleTab = function(tabName) {
if (self.activeTab() === tabName) {
self.activeTab(null);
} else {
self.activeTab(tabName);
}
};

this.setupMap = function(map) {
self.map = map;

layers.subscribe(function(layers) {
var style = map.getStyle();
style.layers = layers;
map.setStyle(style);
});
};
this.map = ko.observable();

CardComponentViewModel.apply(this, [params]);
},
Expand Down
Loading