Accessing Angular component variable via Leaflet marker.on('click', ...) - ngx-leaflet

I'm using ngx-leaflet to render a map in an Angular app. I'm adding markers to a layer with an EventListener on click like so:
questions.forEach((question) => {
this.layers.push(
marker([question.lat, question.lng], {
icon: icon({
iconSize: [25, 41],
iconAnchor: [13, 41],
iconUrl: 'assets/marker-icon.png',
shadowUrl: 'assets/marker-shadow.png'
})
}).on('click', this.onClick)
);
});
With onClick being:
onClick(e) {
this.showQuestion = true;
console.log('data: ', e);
}
I want the click on a marker to set the showQuestion Boolean to true, but the context of this is not related to the Angular component, but to the Leaflet event.
How can I access the Angular component this instead of the Leaflet this?

The simplest approach is to use bind to create a function with an explicit this context. See the following example:
questions.forEach((question) => {
this.layers.push(
marker([question.lat, question.lng], {
icon: icon({
iconSize: [25, 41],
iconAnchor: [13, 41],
iconUrl: 'assets/marker-icon.png',
shadowUrl: 'assets/marker-shadow.png'
})
}).on('click', this.onClick.bind(this))
);
});
In this example, the onClick handler will be invoked with this set to whatever this is referring to when the call to bind is evaluated (I'm assuming from your example it will be the ngx component).

Related

HERE Maps JS API 3.1.30.17 used in VUE - Error for style group 'non-collision' in Firefox

I've build a simple Here Map using Vue 2 and the JS API in version 3.1.30.17. The map works fine in all browsers except Firefox v102.
This is the error message in Firefox:
Tangram [error]: Error for style group 'non-collision' for tile 20/7/68/41/7 CanvasRenderingContext2D.drawImage: Passed-in canvas is empty: loadTexture#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:417267
e/sn.addWorker/<#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:63015
EventListener.handleEvent*e/sn.addWorker#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:62515
e/value/<#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:515089
value#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:515502
value#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:514847
e/value/this.initializing<#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:511497
promise callback*value#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:511472
Ul#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:335:441
p.eh#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:378:446
p.Ge#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:329:436
p.Ge#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:376:356
S#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:369:214
T.prototype.u#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:410:166
T#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:401:290
... The error is even bigger
The following method I'm using to init Here Maps inside Vue's mounted:
async initializeHereMap() {
const mapContainer = this.$refs.hereMap;
const H = window.H;
// Initialize the platform object:
this.platform = new H.service.Platform({
apikey: this.apiKey,
});
await this.geocode(this.platform, this.originAddress)
.then(data => this.routingParameters.origin = data[0]);
await this.geocode(this.platform, this.destinationAddress)
.then(data => this.routingParameters.destination = data[0]);
// Obtain the default map types from the platform object
const defaultLayers = this.platform.createDefaultLayers({
lg: window.navigator.language,
});
// Instantiate (and display) a map object:
const map = new H.Map(mapContainer, defaultLayers.vector.normal.map, {
zoom: this.zoom,
center: this.center,
padding: {
top: this.padding,
bottom: this.padding,
left: this.padding,
right: this.padding,
},
});
// create map pins
const mapPinOrigin = this.addMapPin('A', 40);
const mapPinDestination = this.addMapPin('B', 40);
let linestring = new H.geo.LineString();
linestring.pushPoint(this.routingParameters.origin);
linestring.pushPoint(this.routingParameters.destination);
// Create a polyline to display the route:
let routeLine = new H.map.Polyline(linestring, {
linestring,
style: { strokeColor: '#3F80C4', lineWidth: 5 },
});
// Create a marker for the start point:
let startMarker = new H.map.Marker(this.routingParameters.origin, { icon: mapPinOrigin });
// Create a marker for the end point:
let endMarker = new H.map.Marker(this.routingParameters.destination, { icon: mapPinDestination });
// Add the route polyline and the two markers to the map:
map.addObjects([routeLine, startMarker, endMarker]);
// Set the map's viewport to make the whole route visible:
map.getViewModel().setLookAtData({bounds: routeLine.getBoundingBox()});
// add behavior control
if (this.behaviors) new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// add UI
if (this.controls) H.ui.UI.createDefault(map, defaultLayers);
},
Is there some one facing the same issue and could solved it?
Did you follow this example on: https://developer.here.com/tutorials/how-to-implement-a-web-map-using-vuejs/ ?
Tangram error is related to rendering e.g. when render map objects (like icons, markers, polylines etc.) and map vector tiles.
I don't think so that this issue related to HERE JS Map API.
Because all examples on https://developer.here.com/documentation/examples/maps-js are working well on my FireFox 102.0.1
It could be some map objects like icons or markers etc. are created in some moment but is not finished yet and then try to push onto map? Creating an icon in some asynchron function?
Or in like your code:
await this.geocode(this.platform, this.originAddress)
.then(data => this.routingParameters.origin = data[0]);
You don't know when func geocode will be finished (e.g. due slow internet connectivity)
It could be this command above is not done yet, but your code is already start to run this code:
linestring.pushPoint(this.routingParameters.origin);<-- 'this.routingParameters.origin' could be null
linestring.pushPoint(this.routingParameters.destination);
// Create a polyline to display the route:
let routeLine = new H.map.Polyline(linestring, { <-- Could cause Tangram error because 'linestring' is strange due undefined origin yet!
linestring,
style: { strokeColor: '#3F80C4', lineWidth: 5 },
});
The polyline options is not correct in:
new H.map.Polyline(linestring, {
linestring,
style: { strokeColor: '#3F80C4', lineWidth: 5 },
}
Why in above the 'linestring' is second time in options?
Please follow correct syntax on:
https://developer.here.com/documentation/maps/3.1.31.0/api_reference/H.map.Polyline.html#.Options

How to rotate a marker in ngx-leaflet

I have read through the documentation but can't seem to find a way to rotate a marker using ngx-leaflet (I would like to dynamically change based on my compass heading).
Here is the solution as there is a type definition for this:
npm i -S #types/leaflet-rotatedmarker leaflet-rotatedmarker
Then just import the module:
import 'leaflet-rotatedmarker';
Now your marker has extra functions to set rotation:
const currentMarker = marker([-28, 15], {
icon: icon({
iconSize: [25, 41],
iconAnchor: [13, 41],
iconUrl: 'assets/markers/marker-icon-green.png',
iconRetinaUrl: 'assets/markers/marker-icon-2x-green.png',
shadowUrl: 'assets/markers/marker-shadow.png'
})
});
currentMarker.setRotationAngle(90);

error : Cannot read property 'querySelectorAll' of null

I'm trying to make a graph with libraries on nuxt
I'm looking to use chartist but it doesn't work for now.
Link chartist: https://gionkunz.github.io/chartist-js/getting-started.html
I'm trying diplay the diagram by following the get started part.
In my component, i'm doing this:
<template>
<canvas class="ct-chart ct-perfect-fourth" />
</template>
export default {
created() {
this.creatChart();
},
methods: {
creatChart() {
const data = {
// A labels array that can contain any sort of values
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
// Our series array that contains series objects or in this case series data arrays
series: [
[5, 2, 4, 2, 0]
]
}
const chart = new Chartist.Line('.ct-chart', data);
return chart;
},
},
}
And i receive this error : Cannot read property 'querySelectorAll' of null
Of course chartist is installed with npm...
Instead of created() {} to init your Chartist, you must use the mounted() {} method to init your chart only on client side.
mounted() {
this.creatChart();
},
The "created" hook will be run twice once on server-side, then once on client-side. The "mounted" will be run only once on client-side.
Chartist is only available on client-side (browser), due to the usage of document.querySelectorAll.
But on server-side (Node.js), document does not exist... which explains your error of Cannot read property 'querySelectorAll' of null.

Unable to create polygon graphic using SketchViewModel() in arcgis js 4.11

I am using vuejs as my frontend framework and esri-loader to load arcgis js 4.11 in vue.I am beginner in arcgis js api and trying to use SketchViewModel to draw a polygon. However, when I use create() function, I am getting sketchVM.create is not a function as error.
I followed arcgis js 4.11 SketchViewModel's documentation
I have divided the code for arcgis js in two methods:- one method is responsible for loading map and view, and another is used to draw polygon.
views/mapView.vue
<script>
...
draw(){
loadModules(
[
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch/SketchViewModel",
"esri/geometry/geometryEngine"
],
{
url: "https://js.arcgis.com/4.11/" // use a specific version
}
).then(
([
SketchViewModel,
geometryEngine,
GraphicsLayer
]) => {
console.log("Area section active")
this.view.surface.style.cursor = "crosshair"; // change cursor style to crosshair
this.graphicsLayer = new GraphicsLayer();
// needed to sketch polygon
var sketchVM = new SketchViewModel({
layer: this.graphicsLayer, // graphics layer over which polygon will be added
view: this.view, // view where polygon will be rendered
updateOnGraphicClick: true, // to allow graphic updation on through click event
defaultUpdateOptions:{
tool:'reshape', // this will set reshape as default tool for update event
},
polygonSymbol: { // style and type for polygon symbol
type: "simple-fill",
color: "rgba(138,43,226, 0.8)",
style: "solid",
outline: {
color: "white",
width: 1
}
}
});
sketchVM.on("create", (event)=>{
if(event.state === "complete"){
console.log(geometryEngine.planarArea(this.graphicsLayer.graphics.items[0].geometry, "square-meters"))
}
});
sketchVM.on("update", (event)=>{
// if() // event to remove graphic on pressing delete key
console.log("Updated value state : ",event.state)
});
console.log("drawing mode on")
sketchVM.create("polygon", {mode:"click"}); // getting error at this line
console.log("draw view returned")
return this.view;
}
);
},
...
</script>

Assign object {row} to state

I'm trying to migrate my application which currently uses react-bootstrap-table to react-bootstrap-table-next but I'm having a problem.
What I am trying to do:
is to get the object of the selected line.
My code
const selectRow = {
mode: 'radio',
hideSelectColumn: true,
clickToSelect: true,
bgColor: 'red',
onSelect: (row) => {
console.log(row)
}
};
<div className="col-lg-12">
<BootstrapTable keyField='id' data={ products } columns={ columns } selectRow={ selectRow } />
</div>
result obtained
When I click on the line, it assigns the color red and prints the object to the selected line
but when I try to put the object in the state:
const selectRow = {
mode: 'radio',
hideSelectColumn: true,
clickToSelect: true,
bgColor: 'red',
onSelect: (row) => {
console.log(row)
this.setState({banco: row});
}
};
The selected line object is assigned to {banco} property as expected, but the line does not turn red.
I think you need to check this. As the above link mention, right now there's only one workaround is when you need to call setState in selectRow.onSelect, please also manage the selection by yourself via selectRow.selected I'm the creator of react-bootstrap-table and we will improve this issue in the future. Please follow above link to have a workaround, thanks