I'm trying to display interactive maps in my VueJS3 app.
I found a code that works:
<template>
<div id="mapContainer"></div>
</template>
<script>
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
export default {
name: 'LeafletMap',
data() {
return {
map: null,
};
},
mounted() {
this.map = L.map('mapContainer').setView([46.05, 11.05], 5);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
}).addTo(this.map);
//use a mix of renderers
var customPane = this.map.createPane('customPane');
var canvasRenderer = L.canvas({ pane: 'customPane' });
customPane.style.zIndex = 399; // put just behind the standard overlay pane which is at 400
L.marker([50, 14]).addTo(this.map);
L.marker([53, 20]).addTo(this.map);
L.marker([49.5, 19.5]).addTo(this.map);
L.marker([49, 25]).addTo(this.map);
L.marker([-10, 25]).addTo(this.map);
L.marker([10, -25]).addTo(this.map);
L.marker([0, 0]).addTo(this.map);
},
onBeforeUnmount() {
if (this.map) {
this.map.remove();
}
},
};
</script>
<style scoped>
#mapContainer {
width: 100vw;
height: 100vh;
}
</style>
But as soon as I import a custom geoJSON, like this:
import France from '#/assets/carto/France.geojson';
I have this in my console:
[Vue Router warn]: uncaught error during route navigation: vue-router.mjs:35:17
SyntaxError: unexpected token: ':' vue-router.mjs:3451:20
[Vue Router warn]: Unexpected error when starting the router: SyntaxError: unexpected token: ':'
Uncaught (in promise) SyntaxError: unexpected token: ':'France.geojson:2:8
What is wrong?
By the way, France.geoJSON is a classic geoJSON file:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[5.829184048326689, 45.93827339383888], ...
]
]
},
"properties": { "dep": "01", "reg": "84", "libgeo": "Ain" }
}, ...
Actually if I write
import France from '#/assets/carto/france.json';
After having changed the name of the file, it works.
I still don't know why the extension matters.
Related
I created a text editor component for my Vue3 project which is based on Quill (for documentation --> https://quilljs.com/docs/api/#setcontents):
<template>
<div class="form-control" v-bind:class="inputClasses" ref="editor"></div>
</template>
<script>
import Quill from 'quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.bubble.css';
import 'quill/dist/quill.snow.css';
import GENERAL_COMPONENT_CONSTANTS from "../constants/GeneralComponentConstants";
export default {
props: {
modelValue: { type: String, default: '' },
},
data() {
return {
editor: null
};
},
mounted() {
var _this = this;
this.editor = new Quill(this.$refs.editor, {
modules: {
toolbar: [
[{ header: [1, 2, 3, 4, false]} ],
["bold", "italic", "underline", "link", "image"],
],
},
//theme: 'bubble',
theme: "snow",
formats: ["bold", "underline", "header", "italic", "link"],
placeholder: this.placeholder,
});
this.editor.root.innerHTML = this.modelValue;
this.editor.setText('Default Value');
this.editor.on("text-change", function () {
return _this.update();
});
},
methods: {
update: function update() {
this.$emit(
"update:modelValue",
this.editor.getText() ? this.editor.root.innerHTML : ""
);
},
},
computed: {
}
}
</script>
It works fine and as a default value, I set the text this.editor.setText('Default Value'); But I am getting Uncaught DOMException: Failed to execute 'setStart' on 'Range': The offset 4294967294 is larger than the node's length error when I try to delete the whole default value.
I use i18n to provide multilingual support to an application, I'd like the charts I provide with highcharts to have the same behaviour.
<i18n>
{
"fr": {
"test": "en fançais"
},
"en": {
"test": "in english"
}
}
</i18n>
<template>
<highcharts :options="options"></highcharts>
</template>
<script>
import '#/plugins/highcharts.js'
export default {
data() {
return {
options: {
chart: {
type: 'bar'
},
series: [{
name: $t('test'),
data: [1.0, 0.3, 0],
color: '#beab9d'
}],
xAxis: {
categories: ["1", "2", "3"]
}
}
}
}
}
</script>
But when building the application, I got :
'$t' is not defined
There is a way to access i18n values from the script part of a component ?
This question already has an answer here:
Binding data to vue for axios call
(1 answer)
Closed 1 year ago.
I have a simple vue project which calls the data from my API.
There is a google map that i need to connect and show the markers from the lat and long retrieved from the database via API.
I have enabled the Axios for vue but the axios function is giving me an error.
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError:
Cannot read property 'map' of undefined"
File: GoogleMap.vue
<template>
<div>
<div>
<h2>Search and add a pin</h2>
</div>
<br/>
<gmap-map id="map" v-bind="options">
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
:label="m.label"
#click="openWindow"
/>
<gmap-info-window
#closeclick="window_open = false"
:opened="window_open"
:position="infowindow"
:options="{
pixelOffset: {
width: 0,
height: 0,
},
}"
>
Hello world!
</gmap-info-window>
</gmap-map>
</div>
</template>
import axios from "axios";
import { gmapApi } from "vue2-google-maps";
export default {
name: "GoogleMap",
data() {
return {
// maps - entry point
options: {
zoom: 12,
center: {
lat: 6.9271,
long: 79.8612,
},
mapTypeId: "roadmap",
},
info_marker: null,
infowindow: {
lat: 39.9995601,
long: -75.1395161,
},
window_open: false,
};
},
mounted() {
this.initialize();
let config = {
method: "get",
url: "http://127.0.0.1:8002/api/locations/",
};
axios(config).then((val) => {
this.Data = val.data;
});
},
computed: {
google: gmapApi,
markers() {
return this.Data.map(
(locationName, lat, long) => ({
locationName,
position: lat,
long: long,
}));
},
},
watch: {},
methods: {
initialize() {
console.log("init");
},
openWindow() {
console.log(this);
this.window_open = true;
},
},
};
API Endpoint :
[
{
"id": 1,
"nic": "9886556V",
"locationName": "Cargils",
"lat": "6.5945719",
"long": "79.9489557",
"policeArea": "south",
"dateTime": "2021-04-20T04:26:49.000000Z",
"created_at": null,
"updated_at": null
},
{
"id": 2,
"nic": "123456789V",
"locationName": "Super Centre",
"lat": "6.9175873",
"long": "79.8589105",
"policeArea": "Hyde Park Corner",
"dateTime": "2021-04-20T05:03:49.000000Z",
"created_at": null,
"updated_at": null
}
]
return this.Data.map , thats your issue. return this.data.map
...
axios(config).then((val) => {
this.data = val.data; // Fix here
});
},
computed: {
google: gmapApi,
markers() {
return this.data.map( // Fix here
(locationName,lat,long) => ({locationName, position: lat, long: long,})
);
},
Following the example for integrating the Monaco Editor with Webpack shown here fails when using VueJS.
webpack.config.js:
// eslint-disable-next-line #typescript-eslint/no-var-requires
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
// eslint-disable-next-line #typescript-eslint/no-var-requires
const path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.ttf$/,
use: ['file-loader']
}]
},
plugins: [
new MonacoWebpackPlugin()
]
};
App.vue:
<template>
<div id="container"></div>
</template>
<script>
import * as monaco from 'monaco-editor'
export default {
mounted() {
monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
},
};
</script>
<style>
#container{
height: 100vh;
overflow: hidden;
}
</style>
The editor appears and has syntax highlighting. However, typing causes Unexpected usage errors to be thrown.
What step am I missing? Thanks!
Use https://github.com/suren-atoyan/monaco-loader with VueJS.\
import loader from '#monaco-editor/loader';
export default {
mounted() {
const wrapper = document.getElementById('editor')
loader.init().then(monaco => {
monaco.editor.create(wrapper, {
value: 'const name = "Peter"',
});
});
},
}
I had created a project in vuejs using Vue-CLI. I have update the version of echarts from version-4.1.0 to version 4.2.0-rc.2. After updating it following error occurs:
In terminal it shows error:
"export 'default' (imported as 'echarts') was not found in 'echarts/lib/echarts'
and on accessing bar chart page, it shows error in console as:
TypeError: Cannot assign to read only property 'exports' of object '#'
Before updating the echarts package, here is my code for
vue.config.js file
const path = require('path');
const webpack = require('webpack');
module.exports = {
baseUrl: process.env.NODE_ENV == 'production' ? '/' : '/',
transpileDependencies: [
/\bvue-echarts\b/,
/\bresize-detector\b/
],
configureWebpack: {
plugins: [
//jquery plugin
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
}
}
After updating echarts version, I have replace the some lines of code with these lines:
transpileDependencies: [
/\/node_modules\/vue-echarts\//,
/\/node_modules\/resize-detector\//
],
On updating these lines, I had resolved the 1st error. But in echarts page following error arises in console:
Error in mounted hook: "Error: Component series.bar not exists. Load it first."
Here is my barchart file :
<template>
<ECharts :options="bar" style="width:100%; height:300px"></ECharts>
</template>
<script>
import ECharts from "vue-echarts/components/ECharts.vue";
import "echarts/lib/chart/bar";
import "echarts/lib/component/title";
import { ChartConfig } from "Constants/chart-config";
export default {
components: {
ECharts
},
data() {
return {
bar: {
tooltip: {
trigger: "axis"
},
color: [ChartConfig.color.danger],
legend: {
data: ["Series A"]
},
xAxis: {
type: "category",
boundaryGap: true,
data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
},
yAxis: {
type: "value",
axisLabel: {
formatter: "{value} K"
}
},
series: [
{
name: "Series A",
type: "bar",
data: [11, 11, 15, 13, 12, 13, 10]
}
]
}
};
}
};
</script>
How I should remove these errors. For more information please,let me know.
Thanks!
I finally ended up with the solution, this error occurs because we cannot mix commonjs & ES modules. To solved this I updated the babel.config.js file:
// babel.config.js
module.exports = {
presets: [
["#vue/app", {
modules: "commonjs"
}]
]
};
By adding above code, all your ES module code will be transpiled to commonjs and then pass to webpack for compilation.