vue-mapbox
Version:
> Combine powers of [Vue.js](https://vuejs.org/) and [Mapbox Gl JS](https://mapbox.com/mapbox-gl-js)
907 lines (906 loc) • 36.6 kB
JavaScript
(window.webpackJsonp = window.webpackJsonp || []).push([
[6],
{
162: 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("p", [
t._v("If you like long story, check out "),
s(
"a",
{
attrs: {
href: "https://soal.red/reasoning-behind-vue-mapbox/",
target: "_blank",
rel: "noopener noreferrer"
}
},
[t._v("blog post"), s("OutboundLink")],
1
)
]),
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("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("container")]
),
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("map-test"),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v(":center.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("center"),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
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(":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('"')]
)
]
),
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("MglMarker")
]),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v(":coordinates.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("markerCoordinates"),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("color")]
),
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("green"),
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("MglGeojsonLayer")
]),
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("fill"),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v(":sourceId")]
),
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("sourceId"),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v(":layerId")]
),
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("layerId"),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v(":source")]
),
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("geojson"),
s(
"span",
{
pre: !0,
attrs: { class: "token punctuation" }
},
[t._v('"')]
)
]
),
t._v("\n "),
s(
"span",
{ pre: !0, attrs: { class: "token attr-name" } },
[t._v("@click")]
),
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("handleClick"),
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("temaplate")
]),
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 MglMarker"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(",")]
),
t._v("\n MglGeojsonLayer\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'")]
),
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 "),
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("'mapbox://map_style'")]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(",")]
),
t._v("\n geojson"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(":")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("{")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token comment" } },
[t._v("/* … some geojson */")]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v("}")]
),
t._v("\n layerId"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(":")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token string" } },
[t._v("'firstLayer'")]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(",")]
),
t._v("\n sourceId"),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(":")]
),
t._v(" "),
s(
"span",
{ pre: !0, attrs: { class: "token string" } },
[t._v("'firstSource'")]
),
s(
"span",
{ pre: !0, attrs: { class: "token punctuation" } },
[t._v(",")]
),
t._v("\n markerCoordinates"),
s(
"span",
{ pre: !0, attrs: { class: "token operator" } },
[t._v("=")]
),
s(
"span",
{ pre: !0, attrs: { class: "token string" } },
[t._v("'[50, 50]'")]
),
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("}")]
),
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("div", { staticClass: "tip custom-block" }, [
s("p", { staticClass: "custom-block-title" }, [
t._v("Dependencies")
]),
t._v(" "),
s("p", [
s(
"a",
{
attrs: {
href: "https://github.com/vuejs/vue",
target: "_blank",
rel: "noopener noreferrer"
}
},
[t._v("Vue.js 2.5+"), s("OutboundLink")],
1
),
s("br"),
t._v(" "),
s(
"a",
{
attrs: {
href: "https://github.com/mapbox/mapbox-gl-js",
target: "_blank",
rel: "noopener noreferrer"
}
},
[t._v("Mapbox GL JS 0.51+"), s("OutboundLink")],
1
),
s("br"),
t._v(" "),
s(
"a",
{
attrs: {
href: "https://github.com/soal/map-promisified",
target: "_blank",
rel: "noopener noreferrer"
}
},
[t._v("map-promisified"), s("OutboundLink")],
1
)
])
]),
t._v(" "),
s("div", { staticClass: "tip custom-block" }, [
s("p", { staticClass: "custom-block-title" }, [t._v("Size")]),
t._v(" "),
s("p", [t._v("~ 15 kB minified and gzipped")])
]),
t._v(" "),
s("div", { staticClass: "warning custom-block" }, [
s("p", { staticClass: "custom-block-title" }, [
t._v("Browser compatibility")
]),
t._v(" "),
s("p", [s("em", [t._v("Coming soon")])])
])
]
);
},
[],
!1,
null,
null,
null
);
e.options.__file = "README.md";
a.default = e.exports;
}
}
]);