vue-mapbox
Version:
> Combine powers of [Vue.js](https://vuejs.org/) and [Mapbox Gl JS](https://mapbox.com/mapbox-gl-js)
883 lines (882 loc) • 36 kB
JavaScript
(window.webpackJsonp = window.webpackJsonp || []).push([
[21],
{
148: 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: "map-controls" } }, [
s(
"a",
{
staticClass: "header-anchor",
attrs: { href: "#map-controls", "aria-hidden": "true" }
},
[t._v("#")]
),
t._v(" Map controls")
]),
t._v(" "),
s("h2", { attrs: { id: "overview" } }, [
s(
"a",
{
staticClass: "header-anchor",
attrs: { href: "#overview", "aria-hidden": "true" }
},
[t._v("#")]
),
t._v(" Overview")
]),
t._v(" "),
s("p", [
t._v(
"Controls is UI elemetns for controlling view of the map, such as scale or bearing.\nYou can check them out in Mapbox GL JS "
),
s(
"a",
{
attrs: {
href:
"https://docs.mapbox.com/mapbox-gl-js/api/#user%20interface",
target: "_blank",
rel: "noopener noreferrer"
}
},
[t._v("documentation"), s("OutboundLink")],
1
),
t._v(
"\nIn Vue-mapbox they exposed as Vue components, so you can control they properties and behavior dynamically by changing props."
)
]),
t._v(" "),
s("p", [s("em", [t._v("All controls")]), 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("div")
]),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("id")]
),
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("#app"),
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("MglMap")
]),
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(":mapStyle.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("mapStyle"),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v(":attributionControl")]
),
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("false"),
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("MglAttributionControl")
]),
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("MglNavigationControl")
]),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("position")]
),
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("top-right"),
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 tag" } }, [
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("<")]
),
t._v("MglGeolocateControl")
]),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("position")]
),
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("top-right"),
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 tag" } }, [
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("<")]
),
t._v("MglNavigationControl")
]),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("position")]
),
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("top-right"),
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 tag" } }, [
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("<")]
),
t._v("MglGeolocateControl")
]),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("position")]
),
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("top-right"),
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 tag" } }, [
s("span", { pre: !0, attrs: { class: "token tag" } }, [
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("<")]
),
t._v("MglScaleControl")
]),
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("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("div")
]),
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("\n MglMap"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(",")]
),
t._v("\n MglAttributionControl"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(",")]
),
t._v("\n MglNavigationControl"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(",")]
),
t._v("\n MglGeolocateControl"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(",")]
),
t._v("\n MglFullscreenControl"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(",")]
),
t._v("\n MglScaleControl\n"),
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\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 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 MglNavigationControl"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(",")]
),
t._v("\n MglGeolocateControl\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('"style_object"')]
),
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("}")]
),
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("See list of controls and they properties in "),
s("router-link", { attrs: { to: "/api/controls.html" } }, [
t._v("API docs")
]),
t._v(".")
],
1
),
t._v(" "),
s("h3", { attrs: { id: "attribution-control" } }, [
s(
"a",
{
staticClass: "header-anchor",
attrs: {
href: "#attribution-control",
"aria-hidden": "true"
}
},
[t._v("#")]
),
t._v(" Attribution control")
]),
t._v(" "),
s("p", [
t._v("Due to Mapbox "),
s(
"a",
{
attrs: {
href:
"https://docs.mapbox.com/help/how-attribution-works/",
target: "_blank",
rel: "noopener noreferrer"
}
},
[t._v("policy"), s("OutboundLink")],
1
),
t._v(
" attribution control\nis enabled by default. You can disable default attributions by setting\n"
),
s("code", [t._v("attributionControl")]),
t._v(" prop of MglMap to "),
s("code", [t._v("false")]),
t._v(
" and set your own attribution\nusing AttributionControl component."
)
])
]
);
},
[],
!1,
null,
null,
null
);
e.options.__file = "controls.md";
a.default = e.exports;
}
}
]);