In mapbox I am creating my overlays using the following code within my map creation function - http://jsfiddle.net/shanejones/3ajankv9/
I now need to work out a way to open a popover by it's ID in a separate function.
Using the post here I have modified it to the following example which should open layer with id 1.
function next(next_id){
map.featureLayer.eachLayer(function(marker) {
if (marker.feature.properties.id == marker_id) {
marker.openPopup();
}
});
}
But all it does is give me an undefined error anyone know where I'm going wrong here?
Edit - To show the error I get when I run the above function from the console.
Thanks
I ran into this problem in the past. What I ended up doing was something like this, it's not the best solution but it may help you out.
map.featureLayer.eachLayer(function(marker) {
if (marker.feature.properties.id == marker_id) {
marker.fireEvent('click', {
latlng: {
lat: marker._latlng.lat,
lng: marker._latlng.lng
}
});
}
});
Related
I'm practicing my React and stumbled upon something I couldn't find the answer on the internet.
The context is: I'm making a page using the Random User API. On the main page the user navigating can browse through random people and add them to a list. Additionally, the user can click on a person's name and go to a page with more details about that person. I configured the route using React Router Dom and a Link attached to the thumbnail. So far so good.
The problem is that when I decided to test some kind of constructors on this project, so when I fetch the person's info object from the API, I use a mini-constructor to add a few methods to it. Something like that:
function Person(person) {
return {
...person,
getFullName: () => `${person.name.first} ${person.name.last}`
}
}
const data = await fetchPerson();
addPerson(Person(data));
So, on the main page there's no problem. I call getFullName() inside a <p> tag and it displays the name perfectly. But when I try to send this constructed Person object containing both the information and the method via <Link>'s state, I get an error saying that the function can't be cloned. Note: I tried using a class constructor as well. The error is the following:
DataCloneError: Failed to execute 'pushState' on 'History': person => `${this.person.name.title} ${this.person.name.first} ${this.person.name.last}` could not be cloned.
I've tried declaring the function inside the Person functions and then referencing it inside the return and many other things but nothing seems to work.
If I could have a light on the question, it'd be nice!
Thanks! :))
EDIT:
I tried declaring the function outside the "constructor" and it worked. But it isn't very clean. If any other suggestions/explanations surface I'd really like to now!
const getFullName = (person) => `${person.name.title} ${person.name.first} ${person.name.last}`;
export class Person {
constructor(person) {
this.person = person;
this.getFullName = getFullName(person);
this.test = 'IOEJASIEPASKEKASÇLEKÇASKEA'
}
}
EDIT2: Tried with a function aswell, like the following, and worked. But I just can't understand the "cannot clone" error.
export function Person(person) {
const getFullName = (person) => `${person.name.title} ${person.name.first} ${person.name.last}`;
return {
...person,
fullName: getFullName(person) ,
}
}
I need to show the number of selected options instead of the actually selected options. Here is what I'd like to achieve, which I created a mockup with manipulating the DOM in the browser inspection.
In the baseweb/baseui documentation, it is mentioned that it can be achieved by overriding, however, when I use override property, it affects the style and behavior as you can uncomment and see the result.
Here is the code-snippet:
https://codesandbox.io/s/nifty-johnson-erkfr
I asked the same question in the Baseweb Slack channel and here is the answer from one of the guys behind it.
overrides={{
MultiValue: {
component: (data) => {
if (selectedOption.length) {
const isFirst = selectedOption[0].id === data.value.id;
if (isFirst) {
return <Tag {...data} closeable={false}>{selectedOption.length} Selected</Tag>
}
}
return null
}
}
}}
Hope it saves someone else's time.
Just copy-pasted the example code from Sortable's docs.
It works fine on any touchsreen device, but as soon as I view it on Chrome or any other desktop browser it stops working. No error, you just can't drag anymore.
Onsen UI's JS probably overwrites the drag events or something like that but couldn't manage to find the solution.
Per the answer given here: https://github.com/SortableJS/Vue.Draggable/issues/508#issuecomment-488314106
If anybody faces this issue then the following is a workaround for this;
document.body._gestureDetector.dispose()
If you need to enable it again for any reason, use the following
document.body._gestureDetector = new ons.GestureDetector(document.body);
Since my code is using Sortable in a Vue component, I ended up doing this as part of the options to Sortable.create. It seems to work well enough:
onChoose: function(event) {
if(this.$ons) {
document?.body?._gestureDetector?.dispose();
}
},
onStart: function(event) {
if(this.$ons) {
document?.body?._gestureDetector?.dispose();
}
},
onEnd: (event) => {
if(this.$ons) {
document.body._gestureDetector = new this.$ons.GestureDetector(document.body);
}
},
I am trying to implement a Rich Text editor using reactjs and slate.js. So far, i was able to get most features working, however unable to add images to the document at the cursor is not working (Image insertion at beginning of the document is working, however).
when iam trying to insert it any other point iam getting the error.
at the renderpart i.e., executing the onchange method of the editor.
const target = getEventRange(e, this.state.EditorComp.state.value)
change = this.state.EditorComp.state.value.change().call(this.insertImage, filelocation,target)
this.state.EditorComp.onChange(change);
slate-react.es.js:1229 Uncaught Error: Unable to find a DOM node for "51". This is often because of forgetting to add `props.attributes` to a custom component.
at findDOMNode$1 (slate-react.es.js:1229)
at findDOMPoint (slate-react.es.js:1247)
at findDOMRange (slate-react.es.js:1290)
My code is based on the link https://github.com/ianstormtaylor/slate/blob/master/examples/images/index.js
Please help.
Do you have a schema defined for your editor? I had this same error until I added a schema for images that set isVoid to true. You need at least the following in your schema:
const schema = {
blocks: {
image: {
isVoid: true
}
}
};
I would imagine you would want to insert the image inline if you want it at the cursor:
change.insertInline({
type: 'img',
isVoid: true,
data: { location: location }
})
change.moveToStartOfNextText().focus()
Then in your renderNode method:
const { attributes, node, isSelected } = props
if (node.type === 'img') {
node.data.get('location')
return <img ... />
}
In my app, I am getting the show method issue. something is wrongly going on with my app. But i couldn't able to find that.
in case if i do like this my view is properly rendering ( but this is wrong approach ):
regions:{
header:'header',
content:'section',
footer:'footer'
},
initialize:function(){
console.log('initialized by layout')
},
renderRegions:function(options){
this.formData = _.defaults(options || {}, requireViews);
if(this.formData.headerView){ //this is true.
this.headerView();
this.renderHeaderView();
}
},
headerView:function(){
this.appHeaderView = new AppHeaderView({model:this.model});
return this.appHeaderView;
},
renderHeaderView:function(){
$(this.header.el).html(this.appHeaderView.render().el) //working fine
//but this is not workig: this.header.show(this.appHeaderView)..why not working?
}
why i use the "this.header.show" - nothing is appending to header.
Any one highlight me what is wrong i do here?
I have simplified my total process, and added in Jsfiddle here is the link:
Live Demo Here
You have a few issues in your code:
A view's model needs to be instantiated, not just the model class.
There is absolutely no reason for you to overwrite the ItemView's render method with what you had.
Your order of operations is wrong. show can only be called after the Layout is in the DOM already.
Here's the main thing that fixes your issue:
var Controller = Backbone.Marionette.Controller.extend({
initialize:function(){
this.layout = new Layout;
$('#wrapper').html(this.layout.render().el);
this.layout.renderRegions();
}
});
Updated FIDDLE
Another option (and something I find myself doing often) is to render the regions using the onShow method of the layout.