Leaflet Draw plugin and capabilities

[Oufrid]

Hello, I hope you are doing well and everything is going well for you, your family and your business. Wonderful work you are doing here, I really appreciate your efforts.

Can you please integrate the leaflet draw plugin to enable drawing controllers and allow drawing on maps. I would like to be able to select parcels by selecting points using polygons or poly lines and then get information about the selected parcel like dimensions, area and coordinates of selected points. I was able to achieve this easily with HTML and JavaScript but I was wondering if you could integrate this functions and feature into the plugin on WordPress. Looking forward to a positive response

[hupe13]

Do you mean Leaflet Draw? I'll take a look at it. I think I will not include it, but write a documentation how to include.

[Oufrid]

That would be great, thank you

[Oufrid]

Following your examples for other plugins, I created this code to implement the Leaflet.Draw plugin.

if (!function_exists('leafext_draw_enqueue')) {
    function leafext_draw_enqueue() {
        wp_enqueue_script('leaflet-draw', '/wp-content/uploads/leaflet-plugins/leaflet.draw/leaflet.draw.js', array('wp_leaflet_map'), null);
        wp_enqueue_style('leaflet-draw', '/wp-content/uploads/leaflet-plugins/leaflet.draw/leaflet.draw.css', array('leaflet_stylesheet'), null);
    }
}

if (!function_exists('leafext_draw_script')) {
    function leafext_draw_script() {
        $text = '
        <script>
        window.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];
        window.WPLeafletMapPlugin.push(function () {
            var map = window.WPLeafletMapPlugin.getCurrentMap();
            var drawnItems = new L.FeatureGroup();
            map.addLayer(drawnItems);
            var drawControl = new L.Control.Draw({
                draw: {
                    polygon: true,
                    polyline: true,
                    rectangle: true,
                    circle: true,
                    marker: true
                },
                edit: {
                    featureGroup: drawnItems
                }
            });
            map.addControl(drawControl);
            map.on(L.Draw.Event.CREATED, function (e) {
                var layer = e.layer;
                drawnItems.addLayer(layer);
            });
        });
        </script>';
        return "\n" . $text . "\n";
    }
}

if (!function_exists('leafext_draw_shortcode')) {
    function leafext_draw_shortcode($atts) {
        leafext_draw_enqueue();
        return leafext_draw_script();
    }
    add_shortcode('leafletdraw', 'leafext_draw_shortcode');
}

Now you just need to upload the JS and CSS files to the adequate directory without forgetting to upload /images for icons of the drawing toolbar. JS, CSS and Images

[hupe13]

Yes it is mostly always the same. I will put it with on my website. Thank you very much.

[hupe13]

Do you have really the js, css and images in the uploads directory? If yes, do you have any plugin or function installed to handle svg? I have difficulties to load the svg image form uploads directory (403 error). If I put the files outside from uploads, it works.

Thank you very much.

[hupe13]

It is a strange behavior, I asked wordpress.stackexchange.com.

[Oufrid]

Yes, I'm definitely sure the files are in the uploads directory just like for the other leaflet plugins. Everything is working fine under the last version of Wordpress and PHP 8.1

[Oufrid]

I'm not sure if I can share the link to the page where I implemented the draw plugin into a map, so I removed my last comment but you should have received a copy in your email if you want to check the website

[hupe13]

It was a .htaccess issue. Now it works.