Control.extend

[Gary Whitcher]

Do I need another .js file to be able to create a custom control? The L.Control.extend  doesn't seem to have any affect to the map.

[Edwin Corrigan]

Hi Gary, 

A separate .js file isn't required for a custom control, although it can help to keep your application organised. Let's describe adding a custom control in two steps. See what you think and if you're having trouble, I'd be happy to take a look at an example:

1. Extend the Control base class. Note, you must add the onAdd ( which must return a html element) and onRemove methods (here is where documentation describes this step - https://leafletjs.com/SlavaUkraini/reference.html#control-onadd). Here is a skeleton example of this step:

const node = L.DomUtil.create("div");

L.Control.MyNewControl = L.Control.extend({

onAdd: function (map) {

// POSSIBLE TO DO SOMETHING WITH NODE (DIV ELEMENT) LIKE ADD CSS ETC

return node;

},

onRemove: function (map) {

// REMOVE EVENT LISTENERS HERE

}

});

2. Then you can add your custom control to the map like below. Add the new custom control to the map:

//helper function for convenience

L.control.myNewControl = function(opts) {

return new L.Control.MyNewControl(opts);

}

// adding the custom control in the bottom left

L.control.myNewControl({ position: 'bottomleft' }).addTo(map);

Best Regards, 

Edwin

Edwin Corrigan 

edwint....@gmail.com

On Wed, 6 Apr 2022 at 21:30, Gary Whitcher <gwhi...@blueskyevo.com> wrote:

Do I need another .js file to be able to create a custom control? The L.Control.extend  doesn't seem to have any affect to the map.

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/fb093c89-8b85-4ecc-8cb0-c8f0a16ca444n%40googlegroups.com.

[Gary Whitcher]

That worked perfectly! I only had half of that implemented. Thank you so much for the assist!

[Mary Solorzano]

Hi Edwin,

Would you be able to provide further insight into creating a custom control with typescript? Previously, I had been able to add controls using JSX however recently switched to react leaflet with typescript. Thanks!

[Edwin Corrigan]

Hi Mary, 

Happy to do that, although I don't have a sandbox with Leaflet and Typescript handy, so providing a working skeleton like below isn't as easy.

If you could detail some of the specific typescript related issues, I could address those. If you are getting a type error for map in my example below, the type can be imported with the below:

import { Map } from 'leaflet';

So it would be something like:

onAdd: function (map: Map) {

Edwin

To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/a0cc7140-1f1d-4c4e-8d64-ba034c478483n%40googlegroups.com.

[Edwin Corrigan]

Hi Mary, 

I have since found a suitable Typescript environment, would you let me know if this works for you?

import { createControlComponent } from "@react-leaflet/core";

import { Control, DomUtil, Map } from 'leaflet';

const node = DomUtil.create("div");

const TestControl = Control.extend({

options: {

position: "topleft",

},

onAdd: function (map: Map) {

console.log(map);

node.style.width = '300px';

node.style.height = '200px';

node.style.background = 'red';

return node;

},

onRemove: function (map: Map) {

console.log(map);

},

});

export const TypeScriptControl = createControlComponent(

(props: any) => new TestControl(props)

);

Result (after adding it as a functional component to a React Leaflet map component):

Best Regards, 

Edwin

Edwin Corrigan 

To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/CACGOqYuKC_5D3j9K-MiSMTZefF2BHKf7%3DW086B0X3-zZwyvinQ%40mail.gmail.com.

[Mary Solorzano]

Hi Edwin, 

Thank you for getting back to me so quickly. Originally my thought process for creating a control came from viewing the react leaflet search npm package. Right now, I'm on the initial steps of just trying to learn how to add a control onto the map using react leaflet w/ typescript. I was able to add a control before when I was just using JSX. The error I get when I try using the coding methods from the course is that the property for the custom control doesn't exist on type 'type of Control'. I created the code sandbox demo below with the code block I was using located in Controls/Custom-Control/Custom-component.tsx file. 

https://codesandbox.io/s/sparkling-violet-jjw693 

I also found this stack overflow that has some code to create a control, but wasn't sure if it was applicable since I'm not attempting to create a zoom control. https://stackoverflow.com/questions/69602522/react-leaflet-v3-good-way-to-create-a-control

Thanks for any help you can provide. Have a great day! 

Mary

To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/CACGOqYuKC_5D3j9K-MiSMTZefF2BHKf7%3DW086B0X3-zZwyvinQ%40mail.gmail.com.

[Mary Solorzano]

Hi Edwin, 

Thank you for all the amazing information!! I just realized that you’re also the instructor for the Udemy course Leaflet(with hooks) that I’m taking and I also posted there. The solution worked great! Sorry for the delay in response, I was accessing the google group from my email account and updates in the group conversation didn’t appear there. I added the completed code to the code sandbox I mentioned in my previous message and am including below. Thanks again! YOU ROCK!! 

https://codesandbox.io/s/sparkling-violet-jjw693

Mary

[Harry wood]

That worked perfectly! I only had half of that implemented. Thank you so much for the assist!

