Third party Vue.js components [WIP]
Using a third party Vue.js component based on an example integrating https://soal.github.io/vue-mapbox/
Untested!

Ruby Component

1
class Components::MglMap < Matestack::Ui::VueJsComponent
2
3
vue_name "mgl-map-component"
4
5
optional :custom_map_style_hash
6
7
def response
8
plain tag.mglmap(":accessToken": "access_token", "mapStyle": "map_style")
9
end
10
11
private
12
13
def access_token
14
get_global_access_token_from_env
15
#...
16
end
17
18
def map_style
19
some_global_map_style_hash.merge!(context.custom_map_style_hash)
20
#...
21
end
22
end
Copied!

Vue.js Component

1
import Vue from "vue/dist/vue.esm";
2
import MatestackUiCore from "matestack-ui-core";
3
4
import Mapbox from "mapbox-gl";
5
import { MglMap } from "vue-mapbox";
6
7
Vue.component('mgl-map-component', {
8
mixins: [MatestackUiCore.componentMixin],
9
data() {
10
return {
11
mapbox: undefined
12
};
13
},
14
created(){
15
this.mapbox = Mapbox;
16
}
17
});
Copied!

Usage

1
class SomePage < Matestack::Ui::Page
2
3
def response
4
div class: "some-layout" do
5
Components::MglMap.(custom_map_style_hash: { ... })
6
end
7
end
8
9
end
Copied!
Last modified 6mo ago