3.1
Getting started
Built-in Reactivity
Custom Reactivity
Integrations
Third party Vue.js Components
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 MatestackUiVueJs from "matestack-ui-vuejs";
2
3
import Mapbox from "mapbox-gl";
4
import { MglMap } from "vue-mapbox";
5
6
const mglMapComponent = {
7
mixins: [MatestackUiVueJs.componentMixin],
8
template: MatestackUiVueJs.componentHelpers.inlineTemplate,
9
data() {
10
return {
11
mapbox: undefined
12
};
13
},
14
created(){
15
this.mapbox = Mapbox;
16
}
17
}
18
export default mglMapComponent
19
20
// and register in your application js file like:
21
appInstance.component('mgl-map-component', mglMapComponent) // register at appInstance
Copied!
Usage
1
class SomePage < Matestack::Ui::Page
2
3
def response
4
div class: "some-layout" do
5
Components::MglMap.call(custom_map_style_hash: { ... })
6
end
7
end
8
9
end
Copied!
Copy link