vue-mapbox
Version:
> Combine powers of [Vue.js](https://vuejs.org/) and [Mapbox Gl JS](https://mapbox.com/mapbox-gl-js)
937 lines (936 loc) • 37.3 kB
JavaScript
(window.webpackJsonp = window.webpackJsonp || []).push([
[18],
{
164: 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: "quickstart" } }, [
s(
"a",
{
staticClass: "header-anchor",
attrs: { href: "#quickstart", "aria-hidden": "true" }
},
[t._v("#")]
),
t._v(" Quickstart")
]),
t._v(" "),
s("h2", { attrs: { id: "using-as-es-module" } }, [
s(
"a",
{
staticClass: "header-anchor",
attrs: {
href: "#using-as-es-module",
"aria-hidden": "true"
}
},
[t._v("#")]
),
t._v(" Using as ES module")
]),
t._v(" "),
s("h3", { attrs: { id: "installation" } }, [
s(
"a",
{
staticClass: "header-anchor",
attrs: { href: "#installation", "aria-hidden": "true" }
},
[t._v("#")]
),
t._v(" Installation")
]),
t._v(" "),
s("p", [
t._v(
"You can install vue-mapbox via npm. Take note that you need to install mapbox-gl as peer dependency:"
)
]),
t._v(" "),
s("div", { staticClass: "language-bash extra-class" }, [
s("pre", { pre: !0, attrs: { class: "language-bash" } }, [
s("code", [
s(
"span",
{ pre: !0, attrs: { class: "token function" } },
[t._v("npm")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token function" } },
[t._v("install")]
),
t._v(" --save vue-mapbox mapbox-gl\n")
])
])
]),
s("p", [
t._v("Add mapbox CSS file to "),
s("code", [t._v("<head></head>")]),
t._v(" block of your HTML file (e.g. "),
s("code", [t._v("index.html")]),
t._v(")")
]),
t._v(" "),
s("div", { staticClass: "language-html extra-class" }, [
s("pre", { pre: !0, attrs: { class: "language-html" } }, [
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("link")
]),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("href")]
),
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(
"https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css"
),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("rel")]
),
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("stylesheet"),
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("h2", { attrs: { id: "using-in-browser" } }, [
s(
"a",
{
staticClass: "header-anchor",
attrs: {
href: "#using-in-browser",
"aria-hidden": "true"
}
},
[t._v("#")]
),
t._v(" Using in browser")
]),
t._v(" "),
s("h3", { attrs: { id: "installation-2" } }, [
s(
"a",
{
staticClass: "header-anchor",
attrs: { href: "#installation-2", "aria-hidden": "true" }
},
[t._v("#")]
),
t._v(" Installation")
]),
t._v(" "),
s("p", [
t._v("Add Vue, MapboxGL and Vue-mapbox scripts on your page:")
]),
t._v(" "),
s("div", { staticClass: "language-html extra-class" }, [
s("pre", { pre: !0, attrs: { class: "language-html" } }, [
s("code", [
s(
"span",
{ pre: !0, attrs: { class: "token doctype" } },
[t._v("<!DOCTYPE html>")]
),
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("html")
]),
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("head")
]),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(">")]
)
]),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token comment" } },
[t._v("\x3c!-- ... --\x3e")]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token comment" } },
[t._v("\x3c!-- Mapbox GL CSS --\x3e")]
),
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("link")
]),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("href")]
),
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(
"https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css"
),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("rel")]
),
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("stylesheet"),
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 comment" } },
[t._v("\x3c!-- Vue-mapbox CSS --\x3e")]
),
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("link")
]),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("href")]
),
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(
"https://cdn.jsdelivr.net/npm/vue-mapbox@latest/dist/vue-mapbox.css"
),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("rel")]
),
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("stylesheet"),
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 comment" } },
[t._v("\x3c!-- Mapbox GL JS --\x3e")]
),
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")
]),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("src")]
),
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(
"https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"
),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(">")]
)
]),
s("span", {
pre: !0,
attrs: { class: "token script language-javascript" }
}),
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(
"span",
{ pre: !0, attrs: { class: "token comment" } },
[t._v("\x3c!-- VueJS --\x3e")]
),
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")
]),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("src")]
),
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(
"https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"
),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(">")]
)
]),
s("span", {
pre: !0,
attrs: { class: "token script language-javascript" }
}),
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(
"span",
{ pre: !0, attrs: { class: "token comment" } },
[t._v("\x3c!-- Vue-mapbox --\x3e")]
),
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")
]),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("type")]
),
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("text/javascript"),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("src")]
),
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(
"https://cdn.jsdelivr.net/npm/vue-mapbox@latest/dist/vue-mapbox.min.js"
),
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 script language-javascript" }
}),
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(
"span",
{ pre: !0, attrs: { class: "token comment" } },
[t._v("\x3c!-- ... --\x3e")]
),
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("head")
]),
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("html")
]),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(">")]
)
]),
t._v("\n")
])
])
]),
s("p", [
t._v(
"All components will be placed in global VueMapbox object ("
),
s("code", [t._v("VueMapbox.MglMap")]),
t._v(" etc.)")
]),
t._v(" "),
s("h2", { attrs: { id: "migration-from-version-0-1-x" } }, [
s(
"a",
{
staticClass: "header-anchor",
attrs: {
href: "#migration-from-version-0-1-x",
"aria-hidden": "true"
}
},
[t._v("#")]
),
t._v(" Migration from version 0.1.x")
]),
t._v(" "),
s("p", [
t._v("In version "),
s("code", [t._v("0.2")]),
t._v(" you don't need to register VueMapbox as Vue plugin.")
]),
t._v(" "),
s("p", [t._v("So you don't need this code anymore:")]),
t._v(" "),
s("div", { staticClass: "language-js extra-class" }, [
s("pre", { pre: !0, attrs: { class: "language-js" } }, [
s("code", [
s(
"span",
{ pre: !0, attrs: { class: "token keyword" } },
[t._v("import")]
),
t._v(" VueMapbox "),
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(" Mapbox "),
s(
"span",
{ pre: !0, attrs: { class: "token keyword" } },
[t._v("from")]
),
t._v(" "),
s("span", { pre: !0, attrs: { class: "token string" } }, [
t._v('"mapbox-gl"')
]),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(";")]
),
t._v("\n\nVue"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(".")]
),
s(
"span",
{ pre: !0, attrs: { class: "token function" } },
[t._v("use")]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("(")]
),
t._v("VueMapbox"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(",")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("{")]
),
t._v(" mapboxgl"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(":")]
),
t._v(" Mapbox "),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("}")]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(")")]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(";")]
),
t._v("\n")
])
])
]),
s(
"p",
[
t._v("Now you're ready for mapping. See how to "),
s("router-link", { attrs: { to: "/guide/basemap.html" } }, [
t._v("create a map")
]),
t._v(".")
],
1
)
]
);
},
[],
!1,
null,
null,
null
);
e.options.__file = "README.md";
a.default = e.exports;
}
}
]);