UNPKG

vue-mapbox

Version:

> Combine powers of [Vue.js](https://vuejs.org/) and [Mapbox Gl JS](https://mapbox.com/mapbox-gl-js)

1,193 lines 96.6 kB
(window.webpackJsonp = window.webpackJsonp || []).push([ [20], { 149: function(t, a, s) { "use strict"; s.r(a); var n = s(17), p = 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: "composition" } }, [ s( "a", { staticClass: "header-anchor", attrs: { href: "#composition", "aria-hidden": "true" } }, [t._v("#")] ), t._v(" Composition") ]), t._v(" "), s("p", [ t._v( "You can use Mapbox GL feature as Vue component and compose it as a child of GlMap. During creation all components waits until map properly initialized." ) ]), t._v(" "), s("p", [t._v("For example, adding map controls:")]), 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 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('"')] ) ] ), 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("mgl-map") ]), 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(" MglMap"), s( "span", { pre: !0, attrs: { class: "token punctuation" } }, [t._v(",")] ), t._v(" MglNavigationControl"), s( "span", { pre: !0, attrs: { class: "token punctuation" } }, [t._v(",")] ), t._v(" MglGeolocateControl "), 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("Adding a popup:")]), 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(" "), 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(":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('"')] ) ] ), 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("MglPopup") ]), t._v(" "), s( "span", { pre: !0, attrs: { class: "token attr-name" } }, [t._v(":coordinates")] ), 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("popupCoordinates"), 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("span") ]), s( "span", { pre: !0, attrs: { class: "token punctuation" } }, [t._v(">")] ) ]), t._v("Hello world!"), 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("span") ]), 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("MglPopup") ]), 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 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 MglPopup\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"), s( "span", { pre: !0, attrs: { class: "token punctuation" } }, [t._v(",")] ), t._v("\n MglPopup\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( "spa