Initial commit
This commit is contained in:
zhongjin
+35
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.step1.title`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
|
||||
<InjectableIframe :content="map" width="940" height="416"></InjectableIframe>
|
||||
|
||||
<p v-html="$t(`Wizards.cartovl.step1.text1`)" class="text is-body u-mb--16 u-mt--24"></p>
|
||||
<p v-html="$t(`Wizards.cartovl.step1.text2`)" class="text is-body u-mb--16 u-mt--24"></p>
|
||||
<p v-html="$t(`Wizards.cartovl.step1.text3`)" class="text is-body u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
import InjectableIframe from 'new-dashboard/components/InjectableIframe';
|
||||
import map from 'new-dashboard/assets/resources/onboarding/cartovl.html';
|
||||
|
||||
export default {
|
||||
name: 'Step1',
|
||||
stepName: 'Intro',
|
||||
components: {
|
||||
InjectableIframe,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
map
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+66
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step2.summary`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step2.howto.instruction1`)" class="text is-caption u-inlineflex"></p>
|
||||
<CodeBlock :code="codeBlock1" language="htmlmixed"></CodeBlock>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step2.extras.resource1`)" class="text is-caption u-mb--24"></p>
|
||||
<p v-html="$t(`Wizards.cartovl.step2.extras.resource2`)" class="text is-caption u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step2',
|
||||
stepName: 'Load CARTO VL',
|
||||
components: {
|
||||
CodeBlock,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeBlock1
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const codeBlock1 =
|
||||
`<html>
|
||||
<head>
|
||||
<title>CARTO VL Example</title>
|
||||
<!-- Load CARTO VL JS -->
|
||||
<script src="https://libs.cartocdn.com/carto-vl/v1.2.4/carto-vl.min.js"><\/script>
|
||||
<!-- Load Mapbox GL -->
|
||||
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"><\/script>
|
||||
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet">
|
||||
|
||||
<!-- Your style will go here -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- Your map will go here -->
|
||||
</body>
|
||||
</html>`;
|
||||
</script>
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step3.summary`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step3.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock1" language="htmlmixed" class="u-mt--16"></CodeBlock>
|
||||
</li>
|
||||
<li class="u-mt--36">
|
||||
<p v-html="$t(`Wizards.cartovl.step3.howto.instruction2`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock2" language="htmlmixed"></CodeBlock>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step3',
|
||||
stepName: 'Define container',
|
||||
components: {
|
||||
CodeBlock,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeBlock1,
|
||||
codeBlock2
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const codeBlock1 = `<div id="map"><\/div>`;
|
||||
|
||||
const codeBlock2 =
|
||||
`<style>
|
||||
#map {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
<\/style>`;
|
||||
</script>
|
||||
+63
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step4.summary`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step4.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock1" language="htmlmixed"></CodeBlock>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step4.extras.resource1`)" class="text is-caption u-mb--16"></p>
|
||||
<div class="u-flex u-flex__justify--between u-mb--16 u-mb--64">
|
||||
<img src="../../../../assets/images/onboarding/voyager@2x.png" width="306" height="140" alt="Voyager basemap sample"/>
|
||||
<img src="../../../../assets/images/onboarding/positron@2x.png" width="306" height="140" alt="Positron basemap sample"/>
|
||||
<img src="../../../../assets/images/onboarding/darkmatter@2x.png" width="306" height="140" alt="Dark Matter basemap sample"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step4',
|
||||
stepName: 'Create map',
|
||||
components: {
|
||||
CodeBlock,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeBlock1
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const codeBlock1 =
|
||||
`<script>
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: carto.basemaps.voyager,
|
||||
center: [0, 30],
|
||||
zoom: 2
|
||||
})
|
||||
<\/script>`;
|
||||
</script>
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step5.summary`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step5.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock1"></CodeBlock>
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step5.howto.instruction2`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock2"></CodeBlock>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step5.extras.resource1`)" class="text is-caption u-mt--16 u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step5',
|
||||
stepName: 'Add data layer',
|
||||
components: {
|
||||
CodeBlock,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeBlock1,
|
||||
codeBlock2
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// Code Blocks to be rendered in steps
|
||||
const codeBlock1 =
|
||||
`carto.setDefaultAuth({
|
||||
username: 'public',
|
||||
apiKey: 'default_public'
|
||||
})`;
|
||||
|
||||
const codeBlock2 =
|
||||
`const viz = new carto.Viz();
|
||||
const source = new carto.source.Dataset('world_ports')
|
||||
const layer = new carto.Layer('layer', source, viz);
|
||||
layer.addTo(map);`;
|
||||
</script>
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step6.summary`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step6.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock1"></CodeBlock>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step6.extras.resource1`)" class="text is-caption u-mt--16 u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step6',
|
||||
stepName: 'Style features',
|
||||
components: {
|
||||
CodeBlock,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeBlock1
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// Code Blocks to be rendered in steps
|
||||
const codeBlock1 =
|
||||
`const viz= new carto.Viz(\`
|
||||
width: 4
|
||||
strokeWidth: 0.5
|
||||
strokeColor: black
|
||||
color: rgb(10,185,107)
|
||||
\`);`;
|
||||
</script>
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="congrats">
|
||||
<div class="congrats__hero">
|
||||
<Confetti></Confetti>
|
||||
<div class="congrats__hero-content">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/congrats.svg" alt="">
|
||||
<h2 class="title is-body u-mb--16 u-mt--24 ">{{ $t(`Wizards.cartovl.step7.congrats.title`) }}</h2>
|
||||
<p v-html="$t(`Wizards.cartovl.step7.congrats.message1`)" class="text is-caption"></p>
|
||||
<p v-html="$t(`Wizards.cartovl.step7.congrats.message2`, { url: downloadUrl })" class="text is-caption"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container u-mt--64 u-pb--80">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.learnmore`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/learn.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step7.extras.resource1`)" class="text is-caption u-mt--16 u-mb--64"></p>
|
||||
<TutorialCard :content="$t(`Wizards.cartovl.step7.cards.card1`)" class="u-mb--16">
|
||||
<img src="../../../../assets/images/onboarding/stylefeatures.png" width="240" height="130" alt="Style features by category sample image"/>
|
||||
</TutorialCard>
|
||||
<TutorialCard :content="$t(`Wizards.cartovl.step7.cards.card2`)" class="u-mb--16">
|
||||
<img src="../../../../assets/images/onboarding/hoverpopups.png" width="240" height="130" alt="Add hover popups sample image"/>
|
||||
</TutorialCard>
|
||||
<TutorialCard :content="$t(`Wizards.cartovl.step7.cards.card3`)">
|
||||
<img src="../../../../assets/images/onboarding/animatefeatures.png" width="240" height="130" alt="Animate the features sample image"/>
|
||||
</TutorialCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
import TutorialCard from 'new-dashboard/components/Onboarding/components/TutorialCard.vue';
|
||||
import Confetti from 'new-dashboard/components/Onboarding/components/Confetti.vue';
|
||||
import { getAssetsBaseUrl } from 'new-dashboard/utils/assets-version';
|
||||
|
||||
export default {
|
||||
name: 'Step7',
|
||||
stepName: 'Download',
|
||||
components: {
|
||||
StepTitle,
|
||||
TutorialCard,
|
||||
Confetti
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
downloadUrl: getAssetsBaseUrl() + 'unversioned/onboarding/cartovl.zip'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.congrats {
|
||||
background-color: $white;
|
||||
|
||||
&__hero {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $onboarding-congrats__height;
|
||||
background-color: $onboarding-congrats__bg-color;
|
||||
}
|
||||
|
||||
&__hero-content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
import { importFilesFrom } from 'new-dashboard/utils/dynamic-import';
|
||||
|
||||
const folderContext = require.context('./', true, /Step.*\.vue$/);
|
||||
|
||||
const wizardName = 'wizardCARTOVL';
|
||||
const steps = importFilesFrom(folderContext, /^\.\/(.*)\.vue$/);
|
||||
|
||||
export default { steps, wizardName };
|
||||
Reference in New Issue
Block a user