How to select then draw a custom feature/shape directly onto the map?

[JayCork]

Hi there. My team is working on a plug-in for a weather company and we have the need for some custom drawing options. What we would like to achive is the ability for our users to be able draw specific shapes. We've not quite sussed out how to achieve what we have set out to do, so we are looking for some guidence.

For a specific usecase we would like options within the drawLine tool that would allow them to select a weather front type (see image) and be able to draw directly on the map in the same way that you would draw a regualr shape.

At the moment we have two patterns for achieving something like this, but both end up with the user selecting the "weather front" after adding it to the map rather than before.

Patterns

Pattern 1

Action with a onClick event that runs an "addFeature()" function with parameters needed to create the desried feature.

const  lineActions = [
    {
        text: 'Cold Front',
        onClick: () => {
            addFeature('coldFront');
        },
    }
    'cancel'
]

function addFeature(shapeName) {
    switch (shapeName) {
        case 'coldFront':
            new L.Polyline(coords, options).addTo(map);
            break;
        default:
            // Other stuff
    }
}

This works well enough for some things, but the user experince is kind of nasty. As the feature is added to the map and then the feature needs to be edited. Rather than being able to click on "Cold Front", drawing on the map, and having it added with all the event handling, and custom data that we need.

Pattern 2

Upon a feature being drawn use the pm:create event to retrospectifly ask the user what they wanted to draw such as line style, data values, custom classes.

map.on('pm:create', event => {
    if (event.shape === 'Line') {
        let reqOptions = requestLineStyleOptions();
        event .layer.feature.properties.customStuff = reqOptions ;
        event.layer.on('dblclick', function (layer) {
            // Add functions based off reqOptions values inputted from the user.   
        })
    }
});

Desired Results

We would like the user to be able to select what they wanted to draw, allow them to draw it, and for it to appear complete on the map were, if they need to, can access the data to edit the feature.

[Falke-Design]

How do you style the lines?

If this are only options they are need to be added on the layer you can use this:

map.pm.Toolbar.copyDrawControl('Line', {
  name: 'ColdFrontLine',
  block: 'draw',
  title: 'Cold Front',
});
map.pm.Draw.ColdFrontLine.setOptions({
	pathOptions: { color: 'green' },
  hintlineStyle: {color: 'green', dashArray:[5,5]},
  templineStyle: {color: 'green'}
});

https://jsfiddle.net/falkedesign/r7o3dx2c/

If you want, it would be nice to get a info about your project: #904

[JayCork]

Not done any work on these the weather front stuff at the moment. But we would likley be use setOptions for some of the simplier patterns. However there are other more complicated features that need to be drawn on the map. Someone else is working on some of these using Polyline Decorator at the moment. Though they're not in today and they haven't pushed their code. But from what they have said they are creating using the second pattern mentioned to add update the styles in the oncreate event. With that said, we could probably look into setOptions as I have a feeling we can achieve the styles we need using that, and they might have missed it in the documention.

I guess our main problem is more to do with drawing something with key-values attatched to it. We're creating something that looks like the below example. The function that creates this marker is currently setup as to run inside an action's onClick event so we've had to pass in the _position value before the user has had a change to draw.

new L.marker(_position, {
    draggable: true,
    icon: generateTextIcon(textValue, varient),
    moClass: moClass,
    textValue: textValue,
    rotationAngle: rotationAngle,
    authoredBy: userId,
    tags: tagArray
})

Looking for something more akin to how circles are drawn, and then can have their radius set. Just took another look at the source for drawing though. Would the correct approach to be to make the onClick action use enableDraw and use that as a jumping off point?

We're early on in a prototyping/proof of concept stage at the moment. The plan is to delete the codebase once it's fufilled it's purpose, and the orginisation has some policies about sharing stuff. I'll like to be able to share what we've been working on as I've found the examples in the showcase useful, but it's going to be an uphill battle.

[Falke-Design]

I updated the sample to use Polyline Decorator, does this help? https://jsfiddle.net/falkedesign/r7o3dx2c/