I'm using Vue3 + Vite and trying to make leaflet.vectorgrid work with my map. I'm almost there, I can display my topojson file correctly using this code:
fetch('./mytopo.json').then(function(response){
return response.json();
}).then(function(json){
var vectorGrid = L.vectorGrid.slicer( json, {
rendererFactory: L.canvas.tile,
interactive: true,
minZoom: 10,
maxZoom: 12,
vectorTileLayerStyles: {
'reduced2': function(properties, zoom) {
//console.log(properties);
var gradient = hslToHex(percent,100,50);
return {
fillColor: gradient,
fillOpacity: 0.5,
stroke: true,
fill: true,
color: 'black',
weight: 1,
}
}
}
}).addTo(map);
but when I add the following code for catching clicks, I get an error:
**Uncaught TypeError: L.DomEvent.fakeStop is not a function
at NewClass._onClick (Leaflet.VectorGrid.bundled.min.js:2:15768)
at HTMLCanvasElement.handler (DomEvent.js:108:13)
Leaflet.VectorGrid.bundled.min.js:2**
the event code:
vectorGrid.on('click', function(e) {
L.popup()
.setContent('<p>Hello world!<br />This is a nice popup.</p>')
.setLatLng(e.latlng)
.openOn(map)
});
Any idea of what is happening? I suspect there is a configuration / version problem ...
Here are my components for my app:
#geoman-io/leaflet-geoman-free#2.13.0
├── #popperjs/core#2.11.6
├── #vitejs/plugin-vue#3.0.3
├── #vue-leaflet/vue-leaflet#0.6.1
├── axios#0.27.2
├── bootstrap#5.2.0
├── https#1.0.0
├── leaflet-fullscreen#1.0.2
├── leaflet-sidebar#0.2.4
├── leaflet.markercluster#1.5.3
├── leaflet.vectorgrid#1.3.0
├── leaflet#1.9.1
├── sass-loader#13.0.2
├── sass#1.54.9
├── topojson-client#3.1.0
├── vite-plugin-mkcert#1.9.0
├── vite-plugin-rewrite-all#1.0.0
├── vite#3.0.9
├── vue-google-charts#1.1.0
├── vue-gtag#2.0.1
├── vue-router#4.1.5
└── vue#3.2.38
EDIT: I made some tests and it is working fine with Leaflet 1.7.1 but not with 1.8+. It seems the fakestop function doesn't exist anymore with Leaflet1.8+. Any idea how to solve the problem?
Thanks a lot
Alex
I finally found a dirty patch by myself, adding the following line to my code to create the missing function:
L.DomEvent.fakeStop = function () {
return true;
}
I hope it can help others!
Related
I want to add another page to vuepress with the blog plugin.
The new page that I added does not show the content.
I expect the about page to show the content
I use basic vuePressBlog template. My tree structure is
├── examples
│ ├── about
│ │ └── Readme.md
│ └── _posts
│ ├── 2018-4-4-intro-to-vuepress.md
│ ├── 2019-6-8-intro-to-vuepress-next.md
│ ├── 2019-6-8-shanghai.md
│ ├── 2019-6-8-summary.md
│ └── 2019-6-8-vueconf.md
├── index.js
├── layouts
│ ├── GlobalLayout.vue
│ ├── Layout.vue
│ ├── Post.vue
│ └── Tag.vue
├── package.json
├── package-lock.json
└── README.md
I added the following lines to the ./example/.vuepress/config.js
module.exports = {
title: "SlimBlog",
theme: require.resolve("../../"),
themeConfig: {
// Please keep looking down to see the available options.
nav: [
{
text: "Home",
link: "/",
},
{
text: "about",
link: "/about/",
},
{},
],
},
};
I assume there might be a layout missing but I unable to find the config for this.
I am struggling to work out how to pass outputs from a module and to consume it an another.
My folder structure:
.
├── main.tf
├── modules
│ ├── cloudwatch-event
│ │ ├── basic_event_rule.tf
│ │ ├── basic_event_target.tf
│ │ └── variables.tf
│ └── lambda
│ ├── basic_lambda.tf
│ ├── output.tf
│ ├── lambda.py
│ └── variables.tf
├── lambda
│ ├── main.tf
│ └── variables.tf
└── terraform.tfvar
In order to add scheduling to the lambda, i need to consume the Lambda ARN in to the CloudWatch module.
The lambda - basic_lambda.tf
resource "aws_lambda_function" "lambda_function" {
The lambda - outputs.tf
output "lambda_arn" {
value = "${aws_lambda_function.lambda_function.arn}"
In my lambda application module, i have this in my main lambda/main.tf
module "cloudwatch-event" {
source = "../modules/cloudwatch-event"
lambda_arn = "${module.lambda.lambda_arn}"
module "lambda" {
source = "../modules/lambda"
My lambda/variables.tf includes the lambda_arn variable as a string
variable "lambda_arn" {
type = "string"
}
The root main file looks like this:
provider "aws" {
region = var.aws_region
}
module "accesskey-lambda" {
source = "./lambda/"
}
Running TF i get this
Error: Missing required argument
on main.tf line 5, in module "accesskey-lambda":
5: module "accesskey-lambda" {
The argument "lambda_arn" is required, but no definition was found.
then adding it to the root main file doesnt resolve my issues.
Thanks
Nick
Solved, i had a typo
in the cloudwatch/basic_event_target.tf
arn = "${var.lambda_arn}"
Then in the cloudwatch/variable
variable "lambda_arn" {
type = string
}
The module then needed
module "cloudwatch-event" {
source = "../modules/cloudwatch-event"
lambda_arn = "${module.lambda.lambda_arn}"
}
Is it possible to show different sidebars depending on what section of the site you're in? So if I had two sections (Books and Countries) then I could show the corresponding sidebar menu object:
module.exports = {
books: {
"Children's Book": [
"books/childrens-books/winnie-the-pooh",
"books/childrens-books/harry-potter",
],
"Non-Fiction": [
"books/non-fiction/hitchikers-guide",
"books/non-fiction/a-history-of-england",
]
},
countries: {
"Europe": [
"countries/europe/england",
"countries/europe/france",
"countries/europe/spain",
],
"Asia": [
"countries/asia/china",
"countries/asia/india",
"countries/asia/laos",
],
},
}
The docs do reference that something like this could be done, but there aren't any examples to go along with it:
You can have multiple sidebars for different Markdown files by adding more top-level keys to the exported object.
The only other place I can find sidebars referenced is in docusaurus.config.js, but I'm not sure what this section is for:
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
sidebarPath: require.resolve('./sidebars.js'),
},
...
Any pointers appreciated!
So the issue was that my content structure didn't match what I had in sidebar.js. This is my content structure now:
docs
├── README.md
├── books
│ ├── childrens-books
│ │ ├── harry-potter.md
│ │ └── winnie-the-pooh.md
│ └── non-fiction
│ ├── a-history-of-england.md
│ └── hitchikers-guide.md
└── countries
├── asia
│ ├── china.md
│ ├── india.md
│ └── laos.md
└── europe
├── england.md
├── france.md
└── spain.md
├── docs
├── docusaurus.config.js
├── sidebars.js
└── src
I think the issue lay in the fact that Docusaurus couldn't find the articles I was referencing, so it just didn't parse.
With this set up URLs like localhost:3000/docs/books/childrens-books/harry-potter will work fine, but localhost:3000/docs/books/childrens-books/ will return a blank page since there's no corresponding article for that URL.
I am creating documentation for a W3C web components library (Vanilla JavaScript) using VuePress. However, my "custom" web components are generating an error due to VuePress trying to "recognize" them as Vue components the very first time the page loads.
Once the page is loaded my web components work as expected, but the error is there anyway.
This is the error I am getting:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <nova-timeline> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <TimeLineWrapper> at docs/.vuepress/components/TimeLineWrapper.vue
I have created the following structure related to Vuepress
.
├── docs
│ ├── .vuepress
│ │ ├── components
│ │ │ ├── TimeLineWrapper.vue
│ │ ├── config.js
│ │ └── theme
│ ├── README.md
│ ├── components
│ │ ├── README.md
│ │ └── Timeline.md
And this is part of my code:
// docs/.vuepress/components/TimeLineWrapper.vue
<template>
<nova-timeline ref="timeline"></nova-timeline>
</template>
<script>
import timeLineJson from "./data/TimeLineData";
export default {
data() {
return {
timeLineJson: timeLineJson
};
},
mounted() {
this.$refs.timeline.data = this.timeLineJson.data;
this.$refs.timeline.configuration = this.timeLineJson.configuration;
}
};
</script>
// This is my W3C web component:
<nova-timeline ref="timeline"></nova-timeline>
What I like to know is how to "ignore custom components", I mean where or how to do this kind of configuration using the VuePress way.
Vue.config.ignoredElements = [
// Use a `RegExp` to ignore all elements that start with "nova-"
// 2.5+ only
/^nova-/
]
https://v2.vuejs.org/v2/api/#ignoredElements
Thanks in advance.
I finally manage to find how to add my ignored elements,
1) Create a file named enhanceApp.js in docs/.vuepress/theme
2) Place this content inside of it:
// https://vuepress.vuejs.org/guide/custom-themes.html#app-level-enhancements
export default ({ Vue, options, router, siteData }) => {
Vue.config.ignoredElements = [
// Use a `RegExp` to ignore all elements that start with "nova-"
// 2.5+ only
/^nova-/
];
}
Now, the error will disappear since Vue will ignore our custom web components.
I would like to define environment-specific properties in a .yml/.yaml file. Therefore I created the following test.yaml:
baseUrl: 'http://localhost:1234'
Next, I wrote this karate-config.js:
function() {
var env = karate.env;
if (!env) {
env = 'test'; // default is test
}
// config = read(env + '.yaml')
var config = read('/home/user/git/karate-poc/src/test/java/test.yaml');
// var config = read('test.yaml');
// var config = read('classpath:test.yaml');
return config;
}
As seen here https://github.com/intuit/karate#reading-files the read() function should be known by Karate, however I'm not sure if this only applies to .feature files or the karate-config.js too.
Unfortunately, none of the above read()s work, as I'm getting this error:
Caused by: com.intuit.karate.exception.KarateException: javascript function call failed: could not find or read file: /home/user/git/karate-poc/src/test/java/test.yaml, prefix: NONE
at com.intuit.karate.Script.evalFunctionCall(Script.java:1602)
I'm sure that the file exists and is readable.
Am I doing something wrong or is my approach not supported? If it's not supported, what would be the recommended way to read the configuration based on the environment from a YAML file (once) in order to use it in (multiple) .feature files?
Thank you very much
Edit: Tree structure of the project:
.
├── build.gradle
├── gradle
│ └── wrapper
│ ├── gradle-wrapper.jar
│ └── gradle-wrapper.properties
├── gradle.properties
├── gradlew
├── gradlew.bat
└── src
└── test
└── java
├── karate
│ └── rest
│ ├── rest.feature
│ └── RestRunner.java
├── karate-config.js
└── test.yaml
Run with ./gradlew test
In JS, use the karate object, which is explained here: https://github.com/intuit/karate#the-karate-object
So this should work:
var config = karate.read('classpath:test.yaml');