vue-mapbox
Version:
> Combine powers of [Vue.js](https://vuejs.org/) and [Mapbox Gl JS](https://mapbox.com/mapbox-gl-js)
795 lines (794 loc) • 32 kB
JavaScript
(window.webpackJsonp = window.webpackJsonp || []).push([
[24],
{
145: function(t, a, s) {
"use strict";
s.r(a);
var n = s(17),
e = Object(n.a)(
{},
function() {
var t = this,
a = t.$createElement,
s = t._self._c || a;
return s(
"ContentSlotsDistributor",
{ attrs: { "slot-key": t.$parent.slotKey } },
[
s("h1", { attrs: { id: "plugin-components" } }, [
s(
"a",
{
staticClass: "header-anchor",
attrs: {
href: "#plugin-components",
"aria-hidden": "true"
}
},
[t._v("#")]
),
t._v(" Plugin components")
]),
t._v(" "),
s("p", [
t._v(
"VueMapbox implements wrapper for core Mapbox Gl JS library API."
),
s("br"),
t._v("\nAny other functions, like "),
s(
"a",
{
attrs: {
href: "https://docs.mapbox.com/mapbox-gl-js/plugins/",
target: "_blank",
rel: "noopener noreferrer"
}
},
[t._v("Mapbox Gl JS plugins"), s("OutboundLink")],
1
),
t._v(
" is out of scope.\nHowever, they can be implemented as plugin components."
)
]),
t._v(" "),
s("h2", { attrs: { id: "using-plugin-components" } }, [
s(
"a",
{
staticClass: "header-anchor",
attrs: {
href: "#using-plugin-components",
"aria-hidden": "true"
}
},
[t._v("#")]
),
t._v(" Using plugin components")
]),
t._v(" "),
s("p", [
t._v(
"Using plugin components is easy. Just put component inside "
),
s("code", [t._v("MglMap")]),
t._v(
" components tree and pass necessary props to it.\nBelow is example for using "
),
s(
"a",
{
attrs: {
href: "https://github.com/soal/vue-mapbox-geocoder",
target: "_blank",
rel: "noopener noreferrer"
}
},
[t._v("VueMapbox Geocoder"), s("OutboundLink")],
1
),
t._v(".")
]),
t._v(" "),
s("div", { staticClass: "language-vue extra-class" }, [
s("pre", { pre: !0, attrs: { class: "language-vue" } }, [
s("code", [
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("<")]
),
t._v("template")
]),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(">")]
)
]),
t._v("\n "),
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("<")]
),
t._v("MglMap")
]),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v(":accessToken")]
),
s(
"span",
{ pre: !0, attrs: { class: "token attr-value" } },
[
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v("=")]
),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
),
t._v("accessToken"),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v(":map")]
),
s(
"span",
{
pre: !0,
attrs: { class: "token style-attr language-css" }
},
[
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[
s(
"span",
{
pre: !0,
attrs: { class: "token attr-name" }
},
[t._v("Style")]
)
]
),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('="')]
),
s(
"span",
{ pre: !0, attrs: { class: "token attr-value" } },
[t._v("mapStyle")]
),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(">")]
)
]),
t._v("\n "),
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("<")]
),
t._v("MglGeocoderControl")
]),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v(":accessToken")]
),
s(
"span",
{ pre: !0, attrs: { class: "token attr-value" } },
[
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v("=")]
),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
),
t._v("accessToken"),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v(":input.sync")]
),
s(
"span",
{ pre: !0, attrs: { class: "token attr-value" } },
[
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v("=")]
),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
),
t._v("defaultInput"),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("@results")]
),
s(
"span",
{ pre: !0, attrs: { class: "token attr-value" } },
[
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v("=")]
),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
),
t._v("handleSearch"),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("/>")]
)
]),
t._v("\n "),
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("</")]
),
t._v("MglMap")
]),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(">")]
)
]),
t._v("\n"),
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("</")]
),
t._v("template")
]),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(">")]
)
]),
t._v("\n\n"),
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("<")]
),
t._v("script")
]),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(">")]
)
]),
s(
"span",
{
pre: !0,
attrs: { class: "token script language-javascript" }
},
[
t._v("\n"),
s(
"span",
{ pre: !0, attrs: { class: "token keyword" } },
[t._v("import")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("{")]
),
t._v(" MglMap "),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("}")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token keyword" } },
[t._v("from")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token string" } },
[t._v('"vue-mapbox"')]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(";")]
),
t._v("\n"),
s(
"span",
{ pre: !0, attrs: { class: "token keyword" } },
[t._v("import")]
),
t._v(" MglGeocoderControl "),
s(
"span",
{ pre: !0, attrs: { class: "token keyword" } },
[t._v("from")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token string" } },
[t._v('"vue-mapbox-geocoder"')]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(";")]
),
t._v("\n\n"),
s(
"span",
{ pre: !0, attrs: { class: "token keyword" } },
[t._v("export")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token keyword" } },
[t._v("default")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("{")]
),
t._v("\n name"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(":")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token string" } },
[t._v('"App"')]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(",")]
),
t._v("\n\n components"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(":")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("{")]
),
t._v("\n MglMap"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(",")]
),
t._v("\n MglGeocoderControl\n "),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("}")]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(",")]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token function" } },
[t._v("data")]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("(")]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(")")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("{")]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token keyword" } },
[t._v("return")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("{")]
),
t._v("\n accessToken"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(":")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token string" } },
[t._v('"some_token"')]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(",")]
),
t._v("\n mapStyle"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(":")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token string" } },
[t._v('"some_style"')]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(",")]
),
t._v("\n defaultInput"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(":")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token string" } },
[t._v('"Bodhgaya"')]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("}")]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(";")]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("}")]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(",")]
),
t._v("\n methods"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(":")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("{")]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token function" } },
[t._v("handleSearch")]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("(")]
),
t._v("event"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(")")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("{")]
),
t._v("\n console"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(".")]
),
s(
"span",
{ pre: !0, attrs: { class: "token function" } },
[t._v("log")]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("(")]
),
t._v("event"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(")")]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(";")]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("}")]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("}")]
),
t._v("\n"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("}")]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(";")]
),
t._v("\n")
]
),
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("</")]
),
t._v("script")
]),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(">")]
)
]),
t._v("\n")
])
])
]),
s(
"p",
[
t._v(
"If you didn't find plugin your need, it's easy to implement plugin component yourself.\nVueMapbox solves map loading task and give some useful helpers.\nCheck out development "
),
s(
"router-link",
{
attrs: {
to:
"/plugin_components/plugin_components_development.html"
}
},
[t._v("documantation")]
),
t._v(".")
],
1
),
t._v(" "),
s("h2", { attrs: { id: "available-plugin-components" } }, [
s(
"a",
{
staticClass: "header-anchor",
attrs: {
href: "#available-plugin-components",
"aria-hidden": "true"
}
},
[t._v("#")]
),
t._v(" Available plugin components")
]),
t._v(" "),
s("ul", [
s("li", [
s(
"a",
{
attrs: {
href: "https://github.com/soal/vue-mapbox-geocoder",
target: "_blank",
rel: "noopener noreferrer"
}
},
[t._v("VueMapbox Geocoder"), s("OutboundLink")],
1
)
])
])
]
);
},
[],
!1,
null,
null,
null
);
e.options.__file = "README.md";
a.default = e.exports;
}
}
]);