Skip to content

[ZEPPELIN-1220] Add geographical map as visualization option #1210

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

Closed
mwpenny wants to merge 22 commits into from
Closed

[ZEPPELIN-1220] Add geographical map as visualization option #1210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
cf6578e
Add map UI button and pivot fields
Jul 12, 2016
45858e1
Add Esri ArcGIS map rendering support to paragraphs
Jul 12, 2016
78285ab
Add pin rendering to map based on user pivot selection for data
Jul 14, 2016
26bda50
Fix CSS hiding pins
Jul 14, 2016
984e2b1
Only update pins after map is loaded, and try to detect latitude and …
Jul 14, 2016
2360947
Add tests
Jul 20, 2016
effcff3
Add basemap selection, and some minor cleanup/renaming
Jul 22, 2016
efdb889
Add angular-esri-map to license document
Aug 2, 2016
75e3d49
Update index.html and karma.conf.js to include angular-esri-map JS
Aug 2, 2016
00054e9
Disable mouse wheel zooming, and start map zoomed out
Aug 2, 2016
fbdd41c
Make map pivot fields the same height and hide basemap selection when…
Aug 2, 2016
ec7f155
Update map height when paragraph is resized
Aug 2, 2016
fc59b7d
Use proper coordinates for map popup
Aug 3, 2016
c976515
Remove text from merge conflict
Aug 3, 2016
07d6ddb
Fix scatter size field height in pivot (accidentally changed)
Aug 9, 2016
3c12445
Refactoring
Aug 10, 2016
a47a86c
Add padding to bottom-docked map popups
Aug 10, 2016
14f8a1f
Fit map popup to map
Aug 10, 2016
5a056c8
Lazy load map CSS
Aug 11, 2016
9f72f6f
Display error instead of map when there is no internet connection
Aug 11, 2016
c30b1b7
Decrease top margin for bottom-docked map popups
Aug 11, 2016
f21ae26
Re-use variable (as intended)
Aug 11, 2016
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
1 change: 1 addition & 0 deletions zeppelin-distribution/src/bin_license/LICENSE
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ The following components are provided under Apache License.
(Apache 2.0) Utility classes for Jetty (org.mortbay.jetty:jetty-util:6.1.26 - http://javadox.com/org.mortbay.jetty/jetty/6.1.26/overview-tree.html)
(Apache 2.0) Servlet API (org.mortbay.jetty:servlet-api:2.5-20081211 - https://en.wikipedia.org/wiki/Jetty_(web_server))
(Apache 2.0) Google HTTP Client Library for Java (com.google.http-client:google-http-client-jackson2:1.21.0 - https://github.com/google/google-http-java-client/tree/dev/google-http-client-jackson2)
(Apache 2.0) angular-esri-map (https://github.com/Esri/angular-esri-map)

========================================================================
MIT licenses
Expand Down
3 changes: 2 additions & 1 deletion zeppelin-web/bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@
"bootstrap3-dialog": "bootstrap-dialog#~1.34.7",
"handsontable": "~0.24.2",
"moment-duration-format": "^1.3.0",
"select2": "^4.0.3"
"select2": "^4.0.3",
"angular-esri-map": "~2.0.0"
},
"devDependencies": {
"angular-mocks": "1.5.0"
Expand Down
3 changes: 2 additions & 1 deletion zeppelin-web/src/app/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@
'xeditable',
'ngToast',
'focus-if',
'ngResource'
'ngResource',
'esri.map'
])
.filter('breakFilter', function() {
return function(text) {
Expand Down
5 changes: 5 additions & 0 deletions zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,11 @@
ng-class="{'active': isGraphMode('scatterChart')}"
ng-click="setGraphMode('scatterChart', true)"><i class="cf cf-scatter-chart"></i>
</button>
<button type="button" class="btn btn-default btn-sm"
ng-if="paragraph.result.type == 'TABLE'"
ng-class="{'active': isGraphMode('map')}"
ng-click="setGraphMode('map', true)"><i class="fa fa-map-marker"></i>
</button>

<button type="button"
ng-if="paragraph.result.type != 'TABLE'"
Expand Down
8 changes: 8 additions & 0 deletions zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,12 @@
id="p{{paragraph.id}}_scatterChart">
<svg></svg>
</div>

<div ng-if="getGraphMode()=='map'" id="p{{paragraph.id}}_map"
ng-switch="paragraph.config.graph.map.isOnline">
<div ng-switch-when="true"></div>
<span class="map-offline-text" ng-switch-default>
<span>Maps require internet connectivity.</span>
</span>
</div>
</div>
15 changes: 15 additions & 0 deletions zeppelin-web/src/app/notebook/paragraph/paragraph-graphOptions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,19 @@
show line chart with focus
</label>
</div>
<div ng-if="isGraphMode('map')">
<label>Basemap</label>
<span class="dropdown">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" style="min-width: 0px;" data-toggle="dropdown">
<span ng-bind="paragraph.config.graph.map.baseMapType"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="min-width: 70px;">
<li ng-repeat="opt in baseMapOption">
<a ng-click="setMapBaseMap(opt)">{{opt}}</a>
</li>
</ul>
</span>
<br/>
</div>
</div>
50 changes: 49 additions & 1 deletion zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
</ul>
</div>

<div class="row" ng-if="getGraphMode()!='scatterChart'">
<div class="row" ng-if="getGraphMode()!='scatterChart' && getGraphMode()!='map'">
<div class="col-md-4">
<span class="columns lightBold">
Keys
Expand Down Expand Up @@ -165,4 +165,52 @@
</span>
</div>
</div>

<div class="row" ng-if="getGraphMode()=='map'">
<div class="col-md-4">
<span class="columns lightBold">
Latitude
<ul data-drop="true"
ng-model="paragraph.config.graph.map.lat"
jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
class="list-unstyled">
<li ng-if="paragraph.config.graph.map.lat">
<div class="btn btn-primary btn-xs">
{{paragraph.config.graph.map.lat.name}} <span class="fa fa-close" ng-click="removeMapOptionLat($index)"></span>
</div>
</li>
</ul>
</span>
</div>
<div class="col-md-4">
<span class="columns lightBold">
Longitude
<ul data-drop="true"
ng-model="paragraph.config.graph.map.lng"
jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
class="list-unstyled">
<li ng-if="paragraph.config.graph.map.lng">
<div class="btn btn-primary btn-xs">
{{paragraph.config.graph.map.lng.name}} <span class="fa fa-close" ng-click="removeMapOptionLng($index)"></span>
</div>
</li>
</ul>
</span>
</div>
<div class="col-md-4">
<span class="columns lightBold">
Pin contents
<ul data-drop="true"
ng-model="paragraph.config.graph.map.pinCols"
jqyoui-droppable="{multiple:true, onDrop:'onGraphOptionChange()'}"
class="list-unstyled">
<li ng-repeat="col in paragraph.config.graph.map.pinCols">
<div class="btn btn-primary btn-xs">
{{col.name}} <span class="fa fa-close" ng-click="removeMapOptionPinInfo($index)"></span>
</div>
</li>
</ul>
</span>
</div>
</div>
</div>
Loading