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

Jump to bottom

Contributions Page Map #720

Merged
merged 9 commits into from
Sep 23, 2020
Merged

Contributions Page Map #720

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
fe37d21
Initial work on maps
Sep 22, 2020
80ff625
first working setup
Sep 22, 2020
246eef2
Merge remote-tracking branch 'origin' into feature/mapbox
phylum Sep 22, 2020
e8e71dd
Add button for map and add map to Contributions page
danielmmack Sep 22, 2020
15974d4
Remove unneeded css
danielmmack Sep 22, 2020
ed18532
Adding the missing styles
maricris-sn Sep 23, 2020
af6277d
Updating map to render sample marker
maricris-sn Sep 23, 2020
7c95ca6
Add FIXME for access-token variable
phylum Sep 23, 2020
7dc0e62
Merge branch 'feature/mapbox' of github.com:rubyforgood/mutual-aid in…
phylum Sep 23, 2020
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
10 changes: 10 additions & 0 deletions app/javascript/pages/browse/BrowserSelector.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,16 @@
<button :disabled="showingList" @click="showList" id="show-list" class="button is-small">
List view
</button>
<button :disabled="showingMap" @click="showMap" id="show-map" class="button is-small">
Map view
</button>
</div>
</template>

<script>
import ListBrowser from './ListBrowser'
import TileBrowser from './TileBrowser'
import MapBrowser from './MapBrowser'
export default {
props: {
Expand All @@ -24,6 +28,9 @@ export default {
showingList() {
return this.browser === ListBrowser
},
showingMap() {
return this.browser === MapBrowser
}
},
methods: {
showTiles() {
Expand All @@ -32,6 +39,9 @@ export default {
showList() {
this.$emit('clicked', ListBrowser)
},
showMap() {
this.$emit('clicked', MapBrowser)
}
}
}
</script>
69 changes: 69 additions & 0 deletions app/javascript/pages/browse/MapBrowser.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<template>
<section class="MapBrowser">
<mapbox
access-token="pk.eyJ1IjoibXV0dWFsLWFpZC1hcHAiLCJhIjoiY2tmZTBvd3UwMDBhbTJ4cDlic2JmMWZoaiJ9.rWscBjdl1SMT5N0yekIJYg"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll probably want to pull this in via an environment variable.

That'll require reading that on the server and making it available to the front end, which we don't currently have an example of (well, we have examples of getting page data into vue, but i suspect we'll want a slightly different scheme for globals such as this).

I'm ok with punting on that for now. Would you mind leaving a FIXME comment in there so we come back to it (one day!).

:map-options="{
style: 'mapbox://styles/mapbox/streets-v11',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't have a strong preference for one style over another. For reference, i found this list:
https://docs.mapbox.com/api/maps/#mapbox-styles
Of those, i'd be good with streets, light, satellite-streets.
Curious if others have preferences. Also easy to change, so happy to go with your suggestion.

center: [-96, 37.8],
zoom: 4,
}"
:geolocate-control="{
show: true,
position: 'top-left',
}"
@map-load="loaded"
@map-zoomend="zoomend"
@map-click:points="clicked"
@geolocate-error="geolocateError"
@geolocate-geolocate="geolocate"
/>
</section>
</template>

<script>
import Mapbox from 'mapbox-gl-vue'
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, thanks for finding a vue wrapper!


export default {
components: { Mapbox },
methods: {
loaded(map) {
map.addLayer({
id: 'points',
type: 'symbol',
source: {
type: 'geojson',
},
layout: {
'icon-image': '{icon}-15',
'text-field': '{title}',
'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
'text-offset': [0, 0.6],
'text-anchor': 'top',
},
})
},
zoomend(map, e) {
console.log('Map zoomed')
},
clicked(map, e) {
const title = e.features[0].properties.title
console.log(title)
},
geolocateError(control, positionError) {
console.log(positionError)
},
geolocate(control, position) {
console.log(
`User position: ${position.coords.latitude}, ${position.coords.longitude}`
)
},
},
}
</script>

<style>
#map {
width: 100%;
height: 500px;
}
</style>
Comment on lines +101 to +106
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a great location for these styles. I don't see the #map element in the markup here, i assume that brought in by the mapbox element?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, it's referenced from the mapbox module

1 change: 1 addition & 0 deletions app/views/layouts/_head.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<%= csp_meta_tag %>

<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are obviously tradeoffs in both directions, but there's also the option of packaging this up with webpack:
https://docs.mapbox.com/mapbox-gl-js/api/ and https://docs.mapbox.com/mapbox-gl-js/api/#mapbox-css.

I'm good with using the cdn for now.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can circle back to this. we first tried adding it via webpack but we encountered problems.


<%= stylesheet_pack_tag 'application' %>
<%= javascript_pack_tag 'application' %>
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"bulma": "^0.8.2",
"css-loader": "^3.5.2",
"file-loader": "^6.0.0",
"mapbox-gl-vue": "^2.0.4",
"null-loader": "^4.0.0",
"sass-loader": "8.0.2",
"style-loader": "^1.1.4",
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5605,6 +5605,11 @@ map-visit@^1.0.0:
dependencies:
object-visit "^1.0.0"

mapbox-gl-vue@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/mapbox-gl-vue/-/mapbox-gl-vue-2.0.4.tgz#225fc85fd13fdd8ccc6f40048d2c29424bcf9f39"
integrity sha512-vJKoZh4tlvZnGxgJfWNjSjeKmzIKl2AFWXfRsEIt7Itb1efAGsMc9BzTb6C/nalel+z3cDVIpIo/Q8AmDPqC7w==

md5.js@^1.3.4:
version "1.3.5"
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
Expand Down