Module: Leaflet Map

Cybermano · June 29, 2023

Hi to everybody and special thanks to @Mats for sharing this big porting, to @gebeer @netcarver @dab for the hard implementations and to @Ivan Gretsky to keep it alive again, but also to all the contributors and maintainers of this awesome module.

I'm testing it and it works really fine and easy.

I would try to add an extra class to the markers and I followed this linked tip to Leaflet.AwesomeMarker properties for the main page with all the markers:

   $options = array(
        'useMarkerSettings' => true,
        'markerFormatter' => function($page, $marker_options) {
            $marker_options['icon'] = $page->icon; // Override the default icon for this marker.
            $marker_options['markerColor'] = $page->color; // Override the default color for this marker.
			// Adding extra classes to this marker ??
            $marker_options['extraClasses'] = 'music-stage'; // Or dynamically from an option field: $page->stage_kind->value
            return $marker_options;
        }, 
...
);

But as you can see from the screenshot below, no classes are added to the icon (there is a blank space instead between the classes into <i></i> tag; actually it's always present, with or without the 'extraClasses' index into $marker_options).

Am I missing something?

P.S. The JS correctly loads the object properties:

mleafletmap1.addMarkerIcon(L.AwesomeMarkers.icon({prefix: 'fa', icon: 'music', markerColor: 'red', iconColor: 'white', extraClasses: 'music-stage'})

Basically it would be nice to add extra classes to the whole marker (not only to the icon) to manipulate it with js (eg. filtering by type/class on a triggered event such as a button click or select change, or hiding from page if an event date is passed, like for exibitions/music lives and so on).

Does anybody have any suggestions to do this?

Thanks in advance.

Edited July 25, 2023 by Cybermano
typo fixed

Cybermano · July 11, 2023

Hi, is there anybody that knows how to easly disable "scrollWheelZoom" on admin page editing?

Or is there a "module/field" settings development plan for map options in admin?
(an overrideble setting in the field options could be great).

I find a little annoying the zooming in/out of the map on page scroll.

At the moment I put manually a js line of code in InputfieldLeafletMapMarker.js after line 24

// line 24
var map = L.map(mapElement).setView([lat, lng], options.zoom);

// new line
map.scrollWheelZoom.disable();

But I'm not so happy to modify original modules... (on updates the modifications could be lose).

The second approach that I have succesfully tested is to load a js file in admin, but it needs to completely initialize a new map, only with the add of an option in the declaration of the map init:

var map = L.map('_Inputfield_fm_mappa_map', {center: [lat, lng], zoom: parseInt($('#_Inputfield_fm_mappa_zoom').val()), scrollWheelZoom: 0,} );

Spoiler

Complete code

$(document).ready(function(){

    if ($('form#ProcessPageEdit').hasClass('YOUR_PW_TEMPLETE_NAME_TO_EDIT')) {

        var mapId = '_Inputfield_YOUR_FIELD_MAP_map';

        var lat = $('#_Inputfield_YOUR_FIELD_MAP_lat').val();
        var lng = $('#_Inputfield_YOUR_FIELD_MAP_lng').val();
        var zoom = parseInt($('#_Inputfield_YOUR_FIELD_MAP_zoom').val());

        var options = {
            zoom: 9,
            draggable: true,
            center: null,
            scrollWheelZoom: 0,
        }
        
        // var map = $('#_Inputfield_YOUR_FIELD_MAP_map');
        var map = L.map('_Inputfield_YOUR_FIELD_MAP_map', {center: [lat, lng], zoom: zoom, scrollWheelZoom: 0,} );

        var coder = L.Control.Geocoder.nominatim(),
        geocoder = L.Control.geocoder({
            geocoder: geocoder, placeholder: ''
        }).addTo(map);

        var marker = L.marker(
            [lat,lng],
            {draggable: options.draggable}
        ).addTo(map);

        // tiles provider according to module settings (not mandatory), like OpenStreetMap.Mapnik
        L.tileLayer.provider('YOUR_SELECTED_TILES_PROVIDER').addTo(map);

        var $map = $('#' + mapId);
        //var $latlng = $map.siblings(".InputfieldLeafletMapMarkerLatLng").find("input[type=text]");
        var $lat = $map.siblings(".InputfieldLeafletMapMarkerLat").find("input[type=text]");
        var $lng = $map.siblings(".InputfieldLeafletMapMarkerLng").find("input[type=text]");
        var $addr = $map.siblings(".InputfieldLeafletMapMarkerAddress").find("input[type=text]");
        var $raw = $map.siblings(".InputfieldLeafletMapMarkerAddress").find("input[name$=_raw]");
        var $zoom = $map.siblings(".InputfieldLeafletMapMarkerZoom").find("input[type=number]");
   

        $( ".InputfieldLeafletMapMarkerAddress" ).on( "click", function() {
            $(".leaflet-control-geocoder.leaflet-control").toggleClass("leaflet-control-geocoder-expanded");
            setTimeout(function() { $('input.undefined').focus() }, 300);
        });

        $lat.val(marker.getLatLng().lat);
        $lng.val(marker.getLatLng().lng);
        $zoom.val(map.getZoom());

        $zoom.change(function(event) {
            map.setZoom($zoom.val());
            map.setView(marker.getLatLng());
        });

        $lat.change(function(event) {
            marker.setLatLng([$lat.val(),$lng.val()]);
            map.setView(marker.getLatLng(), 9);

            coder.reverse(marker.getLatLng(), map.options.crs.scale(map.getZoom()), function(results) {
                var r = results[0];
                if (r) {
                    $addr.val(r.name);
                    $raw.val(JSON.stringify(r.properties));
                }
            })
        });

        $lng.change(function(event) {
            marker.setLatLng([$lat.val(),$lng.val()]);
            map.setView(marker.getLatLng(), 9);
            coder.reverse(marker.getLatLng(), map.options.crs.scale(map.getZoom()), function(results) {
                var r = results[0];
                if (r) {
                    $addr.val(r.name);
                    $raw.val(JSON.stringify(r.properties));
                }
            })
        });

        geocoder.markGeocode = function(result) {
            marker.setLatLng(result.center);
            map.fitBounds(result.bbox);
            $lat.val(result.center.lat);
            $lng.val(result.center.lng);
            $addr.val(result.name);
            $raw.val(JSON.stringify(result.properties));
        };

        marker.on('dragend', function(event) {
            var result = marker.getLatLng();
            $lat.val(result.lat).trigger('change.custom');
            $lng.val(result.lng).trigger('change.custom');

            //reverse geocoding displays in the adress field
            coder.reverse(marker.getLatLng(), map.options.crs.scale(map.getZoom()), function(results) {
                var r = results[0];
                if (r) {
                    $addr.val(r.name);
                    $raw.val(JSON.stringify(r.properties));
                }
            })
        });

        map.on('zoomend', function(event){
            $zoom.val(map.getZoom());
        });        

        // get the tab element where this map is integrated
        var $map = $('#' + mapId); 
        
        // Get closed wrappers around the map.
        var $inputFields = $map.parents('.Inputfield.InputfieldStateCollapsed');

        // Refresh the map when any of the wrappers open.
        $inputFields.on('opened',function(){
            window.setTimeout(function(){
                map.invalidateSize();
            }, 200);
        });

        function initializeLeafletMap() {
            $(".InputfieldLeafletMapMarkerMap").each(function(item) {
                var $t = $(this);
                if (!$t.children().length) {
                    InputfieldLeafletMapMarker.init($t.attr('id'), $t.attr('data-lat'), $t.attr('data-lng'), $t.attr('data-zoom'), $t.attr('data-type'), $t.attr('data-provider'));
                }
            });
        }
        
        $(document).ready(function() {
            initializeLeafletMap();
            $(document).on('reloaded', '.InputfieldLeafletMapMarker', initializeLeafletMap);
        }); 

    }

});

Any suggestions?

Ivan Gretsky · July 12, 2023

23 hours ago, Cybermano said:

Hi, is there anybody that knows how to easly disable "scrollWheelZoom" on admin page editing?

Or is there a "module/field" settings development plan for map options in admin?
(an overrideble setting in the field options could be great).

I find a little annoying the zooming in/out of the map on page scroll.

At the moment I put manually a js line of code in InputfieldLeafletMapMarker.js after line 24

// line 24
var map = L.map(mapElement).setView([lat, lng], options.zoom);

// new line
map.scrollWheelZoom.disable();

But I'm not so happy to modify original modules... (on updates the modifications could be lose).

The second approach that I have succesfully tested is to load a js file in admin, but it needs to completely initialize a new map, only with the add of an option in the declaration of the map init:

var map = L.map('_Inputfield_fm_mappa_map', {center: [lat, lng], zoom: parseInt($('#_Inputfield_fm_mappa_zoom').val()), scrollWheelZoom: 0,} );

Reveal hidden contents

Complete code

$(document).ready(function(){

    if ($('form#ProcessPageEdit').hasClass('YOUR_PW_TEMPLETE_NAME_TO_EDIT')) {

        var mapId = '_Inputfield_YOUR_FIELD_MAP_map';

        var lat = $('#_Inputfield_YOUR_FIELD_MAP_lat').val();
        var lng = $('#_Inputfield_YOUR_FIELD_MAP_lng').val();
        var zoom = parseInt($('#_Inputfield_YOUR_FIELD_MAP_zoom').val());

        var options = {
            zoom: 9,
            draggable: true,
            center: null,
            scrollWheelZoom: 0,
        }
        
        // var map = $('#_Inputfield_YOUR_FIELD_MAP_map');
        var map = L.map('_Inputfield_YOUR_FIELD_MAP_map', {center: [lat, lng], zoom: zoom, scrollWheelZoom: 0,} );

        var coder = L.Control.Geocoder.nominatim(),
        geocoder = L.Control.geocoder({
            geocoder: geocoder, placeholder: ''
        }).addTo(map);

        var marker = L.marker(
            [lat,lng],
            {draggable: options.draggable}
        ).addTo(map);

        // tiles provider according to module settings (not mandatory), like OpenStreetMap.Mapnik
        L.tileLayer.provider('YOUR_SELECTED_TILES_PROVIDER').addTo(map);

        var $map = $('#' + mapId);
        //var $latlng = $map.siblings(".InputfieldLeafletMapMarkerLatLng").find("input[type=text]");
        var $lat = $map.siblings(".InputfieldLeafletMapMarkerLat").find("input[type=text]");
        var $lng = $map.siblings(".InputfieldLeafletMapMarkerLng").find("input[type=text]");
        var $addr = $map.siblings(".InputfieldLeafletMapMarkerAddress").find("input[type=text]");
        var $raw = $map.siblings(".InputfieldLeafletMapMarkerAddress").find("input[name$=_raw]");
        var $zoom = $map.siblings(".InputfieldLeafletMapMarkerZoom").find("input[type=number]");
   

        $( ".InputfieldLeafletMapMarkerAddress" ).on( "click", function() {
            $(".leaflet-control-geocoder.leaflet-control").toggleClass("leaflet-control-geocoder-expanded");
            setTimeout(function() { $('input.undefined').focus() }, 300);
        });

        $lat.val(marker.getLatLng().lat);
        $lng.val(marker.getLatLng().lng);
        $zoom.val(map.getZoom());

        $zoom.change(function(event) {
            map.setZoom($zoom.val());
            map.setView(marker.getLatLng());
        });

        $lat.change(function(event) {
            marker.setLatLng([$lat.val(),$lng.val()]);
            map.setView(marker.getLatLng(), 9);

            coder.reverse(marker.getLatLng(), map.options.crs.scale(map.getZoom()), function(results) {
                var r = results[0];
                if (r) {
                    $addr.val(r.name);
                    $raw.val(JSON.stringify(r.properties));
                }
            })
        });

        $lng.change(function(event) {
            marker.setLatLng([$lat.val(),$lng.val()]);
            map.setView(marker.getLatLng(), 9);
            coder.reverse(marker.getLatLng(), map.options.crs.scale(map.getZoom()), function(results) {
                var r = results[0];
                if (r) {
                    $addr.val(r.name);
                    $raw.val(JSON.stringify(r.properties));
                }
            })
        });

        geocoder.markGeocode = function(result) {
            marker.setLatLng(result.center);
            map.fitBounds(result.bbox);
            $lat.val(result.center.lat);
            $lng.val(result.center.lng);
            $addr.val(result.name);
            $raw.val(JSON.stringify(result.properties));
        };

        marker.on('dragend', function(event) {
            var result = marker.getLatLng();
            $lat.val(result.lat).trigger('change.custom');
            $lng.val(result.lng).trigger('change.custom');

            //reverse geocoding displays in the adress field
            coder.reverse(marker.getLatLng(), map.options.crs.scale(map.getZoom()), function(results) {
                var r = results[0];
                if (r) {
                    $addr.val(r.name);
                    $raw.val(JSON.stringify(r.properties));
                }
            })
        });

        map.on('zoomend', function(event){
            $zoom.val(map.getZoom());
        });        

        // get the tab element where this map is integrated
        var $map = $('#' + mapId); 
        
        // Get closed wrappers around the map.
        var $inputFields = $map.parents('.Inputfield.InputfieldStateCollapsed');

        // Refresh the map when any of the wrappers open.
        $inputFields.on('opened',function(){
            window.setTimeout(function(){
                map.invalidateSize();
            }, 200);
        });

        function initializeLeafletMap() {
            $(".InputfieldLeafletMapMarkerMap").each(function(item) {
                var $t = $(this);
                if (!$t.children().length) {
                    InputfieldLeafletMapMarker.init($t.attr('id'), $t.attr('data-lat'), $t.attr('data-lng'), $t.attr('data-zoom'), $t.attr('data-type'), $t.attr('data-provider'));
                }
            });
        }
        
        $(document).ready(function() {
            initializeLeafletMap();
            $(document).on('reloaded', '.InputfieldLeafletMapMarker', initializeLeafletMap);
        }); 

    }

});

Any suggestions?

Let me encourage you to create a PR) I promise to work with it.

Cybermano · July 12, 2023

10 hours ago, Ivan Gretsky said:

Let me encourage you to create a PR) I promise to work with it.

Hi @Ivan Gretsky, thanks for your reply.
I hope to create it asap.

I will update you.

Mike-it · July 15, 2023

OHHH, SORRY! I've replyed from my co-worker account: I'm Cybermano.

---

Hi @Ivan Gretsky, as promised I made a PR on GitHub: hope it's ok.

Basically I added a new InputfieldCheckbox in the InputfieldLeafletMapMarker.module fields configuration.

Then I setted it in the constructor and also assigned to a variable into the ___render(): if the checkbox is checked, this variable will inoculate an html class ("scrollwheel-disabled") into the div.InputfieldLeafletMapMarkerMap.

At the end, into the InputfieldLeafletMapMarker.js, if the div has this class assigned, map.scrollWheelZoom.disable() will do the work.

Sorry, I didn't found a cleaner way ?: hope this could be helpful or of inspiration.?

I attach the two file here, too.

InputfieldLeafletMapMarker.js InputfieldLeafletMapMarker.module

Edited July 15, 2023 by Mike-it
Typos fixed

snck · July 26, 2023

I had a problem with PHP 8.1.8 an saving pages containing the field. I got this error:

Quote

Fatal Error: Uncaught TypeError: round(): Argument #1 ($num) must be of type int|float, string given in site/modules/FieldtypeMapMarker/InputfieldLeafletMapMarker.module:193

I changed lines 193 and 194 to make sure all values that get rounded are floats:

 if( ((string) round(floatval($lat), $precision)) != ((string) round(floatval($this->defaultLat), $precision)) ||
     ((string) round(floatval($lng), $precision)) != ((string) round(floatval($this->defaultLng), $precision))) {

Maybe this could be included in a future version?

Cheers,
Flo

Cybermano · August 2, 2023

Hi there,

I'm testing a static call with JS to set a new view of the map (I need it on event change without refreshing the page), as found on Github and Stackoverflow:

// frontend
var mymap = L.map($('#mleafletmap1')).setView([45.53, 10.21], 2);

// backend
var mymap = L.map($('#_Inputfield_fm_mappa_map')).setView([45.53, 10.21], 2);

This produces a TypeError: t.className is undefined.

Spoiler

Uncaught TypeError: t.className is undefined
_getClass https://unpkg.com/leaflet@0.7.7/dist/leaflet.js:6
hasClass https://unpkg.com/leaflet@0.7.7/dist/leaflet.js:6
addClass https://unpkg.com/leaflet@0.7.7/dist/leaflet.js:6
_initLayout https://unpkg.com/leaflet@0.7.7/dist/leaflet.js:6
initialize https://unpkg.com/leaflet@0.7.7/dist/leaflet.js:6
e https://unpkg.com/leaflet@0.7.7/dist/leaflet.js:6
map https://unpkg.com/leaflet@0.7.7/dist/leaflet.js:6
<anonymous> debugger eval code:1
debugger eval code:6:11444

I looking for a solution, but didn't found it (...and I'm not a skilled js coder).

Does anybody have an idea?

Cybermano · August 3, 2023

I would advice all you that the geocoder API is no longer accessible in the format of the current module.

I have an error geocoding address and the return message from nominatim.openstreetmap is:
Using the URL /search/ and /reverse/ (with slashes) is no longer supported.
Change url from /search/?q=Berlin in /search?q=Berlin

Also complete addresses are changed, see below:

File not found: API no longer accessible via this URL

Using the URL /search/ and /reverse/ (with slashes) is no longer supported. Please use URLs as given in the documentation.

Examples how to change the URL:

You use: https://nominatim.openstreetmap.org/search/?q=Berlin
Change to: https://nominatim.openstreetmap.org/search?q=Berlin

You use: https://nominatim.openstreetmap.org/search/US/Texas/Huston
Change to: https://nominatim.openstreetmap.org/search?q=Huston, Texas, US

See github issue #3134 for more details.

See github issue #3134 for more details.

Maybe editing ControlGeocoder.js fixes partially the problem?

:343 L.Control.Geocoder.jsonp(this.options.serviceUrl + 'search/', L.extend({
change in
L.Control.Geocoder.jsonp(this.options.serviceUrl + 'search', L.extend({

:370 L.Control.Geocoder.jsonp(this.options.serviceUrl + 'reverse/', L.extend({
change in
L.Control.Geocoder.jsonp(this.options.serviceUrl + 'reverse', L.extend({

I have tested with simple addresses (italian street, number and city) ad it works fine again, both search and reverse.

Posted a commit on Github:
https://github.com/FriendsOfProcessWire/FieldtypeLeafletMapMarker/commit/63254dffea9bd504eb45b124d64fd5832e38f013

torf · November 29, 2024

Hi,

does anybody know how to use the module with a repeater? I need to have multiple mappoints in one map at my frontend, and due to the nature of the site I cannot put them in pages. So I thought of using a repeater for those points (as it is not possible to add multiple markers to one map). In the backend it works fine, but I cannot figure out how to collect those points and display them in one map.

<?php
$map = $modules->get('MarkupLeafletMap');
echo $map->getLeafletMapHeaderLines();
$mappoints = [];
foreach ($page->map_repeater as $point) {
        array_push($mappoints, $point->map); //or 
		array_push($mappoints, [$point->map]); //or
		array_push($mappoints, $point->map->LeafletMapMarker);
		array_push($mappoints, [$point->map->lat, $point->map->lng]);
	}
echo $map->render($page, $mappoints, array('height' => '270px'));
?>

All I tried gave me different mistakes. Does anybody know the correct syntax?

Cybermano · November 29, 2024

Hi @torf

Never used Leaflet Map with repeaters, but in past I had to collect lot of points into a single map.

I simply used a PageArray with wire('pages')-find('template=MY_TEMPLATE, and so on...') and then I passed the PageArray to the $map->render($MY_PAGE_ARRAY, 'MY_MAP_FIELD', $options); it works.

So I suggest to collect your points in a PageArray with proper selectors. Don't forget that your repeater has a template, and if useful you can get the parents of them.

Let me know if this solution can fit your needs.

Edited November 29, 2024 by Cybermano

torf · November 29, 2024

Thanks @Cybermano I already did it with page arrays and it works great, but this time I'd prefer a repeater. Using page arrays would make the backend to complicated.

Cybermano · November 29, 2024

2 hours ago, torf said:

Thanks @Cybermano I already did it with page arrays and it works great, but this time I'd prefer a repeater. Using page arrays would make the backend to complicated.

Hi @torf, maybe I didn't get it at all or maybe I didn't explain well my idea.
So I'll try again... 😉

Surely I could be wrong, but for me a PageArray is not only for admin side, but all the pw pages collected into a php variable created with pw selectors in a script file.

For shortness I have created 2 pages with two repeaters each (repeater name is "multipoints"), with a title and a leaflet map field (named 'fm_mappa') into.
This is the simply code for testing. Please note that I didn't get the repeater with a foreach statement, but with a pw search with a selector for all the templates with name equals to "repeater_NAMEOFTHEREPEATER", as pw builds. Obviously into your selector you can build your search to the desired points, e.g with sorting or something other.

echo $pagesWithMultipointsRepeater = wire('pages')->find('template=repeater_multipoints');
        if (count($pagesWithMultipointsRepeater)){
            $map = $modules->get('MarkupLeafletMap');       
            $options = array(
                'height' => 800,
                'markerColour' => 'red',
            );
            echo '<div class="g-mb-25">';
            echo $map->render($pagesWithMultipointsRepeater,'fm_mappa',$options);
            echo '</div>';
        }

The numbers before the map are the repeater ids (note the "echo" on the first line of the code).

And these are the admin pages:

I hope that's clearer.

Cybermano · November 29, 2024

Or maybe this edited code of your first post works?


$map = $modules->get('MarkupLeafletMap');
echo $map->getLeafletMapHeaderLines();
$mappoints = new PageArray();
foreach ($page->map_repeater as $point) {
	$mappoints->add($point) // the repater is a page
	}
echo $map->render($mappoints, 'your_map_field_name', array('height' => '270px'));
?>

torf · November 30, 2024

Thanks a lot @Cybermano That worked flawless.

torf · December 3, 2024

For the records: I found a way to use multiple points or areas directly from a repeater, but it's not the most beautiful method. It works by simply omitting the frontend part of the module.

I just load the leaflet js and css manually, extract the lat and lng from the repeater, and paste them in the site. Which has the advantage that I can use additional fields in my repeater (in my example I use a field named "radius" to draw multiple circles:

<div id="map" style="height: 200px"></div>
<script>
    var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    let boundaries = [];
    <?php
    foreach($page->my_repeater as $repeaterdata) {
        $diameter = $repeaterdata->radius * 1000;
        echo "
        var circle = L.circle([{$repeaterdata->map->lat}, {$repeaterdata->map->lng}], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: {$diameter}
    }).addTo(map);
        ";
    }

    ?>
</script>

Please note that this is just a proof of concept. I haven't played around with markerclusters, automatic boundaries or any other fancy stuff at this point.

Cybermano · December 3, 2024

Quote

For the records ...

Hi @torf, thanks for sharing that.

stefan wemove · March 3

On 6/29/2023 at 7:37 AM, Cybermano said:
Hi to everybody and special thanks to @Mats for sharing this big porting, to @gebeer @netcarver @dab for the hard implementations and to @Ivan Gretsky to keep it alive again, but also to all the contributors and maintainers of this awesome module.

I'm testing it and it works really fine and easy.

I would try to add an extra class to the markers and I followed this linked tip to Leaflet.AwesomeMarker properties for the main page with all the markers:
   $options = array(
        'useMarkerSettings' => true,
        'markerFormatter' => function($page, $marker_options) {
            $marker_options['icon'] = $page->icon; // Override the default icon for this marker.
            $marker_options['markerColor'] = $page->color; // Override the default color for this marker.
			// Adding extra classes to this marker ??
            $marker_options['extraClasses'] = 'music-stage'; // Or dynamically from an option field: $page->stage_kind->value
            return $marker_options;
        }, 
...
);
But as you can see from the screenshot below, no classes are added to the icon (there is a blank space instead between the classes into <i></i> tag; actually it's always present, with or without the 'extraClasses' index into $marker_options).

Am I missing something?

P.S. The JS correctly loads the object properties:
mleafletmap1.addMarkerIcon(L.AwesomeMarkers.icon({prefix: 'fa', icon: 'music', markerColor: 'red', iconColor: 'white', extraClasses: 'music-stage'})
Basically it would be nice to add extra classes to the whole marker (not only to the icon) to manipulate it with js (eg. filtering by type/class on a triggered event such as a button click or select change, or hiding from page if an event date is passed, like for exibitions/music lives and so on).

Does anybody have any suggestions to do this?

Thanks in advance.

Hello,

we noticed that these "extraClasses" are not included in the minified version of the used leaflet.awesome-markers
https://github.com/lennardv2/Leaflet.awesome-markers/blob/2.0/develop/dist/leaflet.awesome-markers.min.js
but in the unminified version
https://github.com/lennardv2/Leaflet.awesome-markers/blob/2.0/develop/dist/leaflet.awesome-markers.js

so we solved this by
adding the unminified version to the project
https://github.com/hefan/FieldtypeLeafletMapMarker/commit/9aeefed37b8065d71fc3a23ed80d9ee41eab974b
and just link this file in "MarkupLeafletMap.module" file
https://github.com/hefan/FieldtypeLeafletMapMarker/commit/0f5f563cdf2df725a32e1a3bbeb30a8790f4bd13

j__ · July 9

On 2/4/2022 at 6:23 AM, torf said:
I also confirm what digitex said: There is no header dropdown, and the map container shows nothing. Looks to me as JS execution is stopped because of the following error:
Uncaught Error: Invalid LatLng object: (NaN, NaN)
(...)
Using ProcessWire 3.0.184

----

Maybe to be more specific: the module works like a charm, but in the backend it shows up without initial marker, and therefore no map is rendered. As soon as you type in any lat / lon the map shows up and you can place the marker accordingly.

Experienced the same error ("Invalid LatLng object: (NaN, NaN)") with a freshly installed module just now. In my case it was caused by a legacy (?) Nominatim URL:

The module uses https://nominatim.openstreetmap.org/search/?q=Berlin&limit=5&format=json&addressdetails=1&json_callback=_l_geocoder_2, but Nominatim responded with a 404 error. I had to remove the trailing slash from 'search/' in modules/FieldtypeLeafletMapMarker/Control.Geocoder.js, line 343. Change this line from:

L.Control.Geocoder.jsonp(this.options.serviceUrl + 'search/', L.extend({

To:

L.Control.Geocoder.jsonp(this.options.serviceUrl + 'search', L.extend({

Now the modules uses the correct Nominatim URL, in this example: https://nominatim.openstreetmap.org/search?q=Berlin&limit=5&format=json&addressdetails=1&json_callback=_l_geocoder_2

The map loads fine, with the initial marker.

Ivan Gretsky · July 10

Good day, everybody!

Sorry for not answering in this thread. Going through some not so easy times here. And working on this module is out of my reach for now. More to that the leaflet site is not even accessible from Russia (this is where I am at) as the lib author is in Ukraine. You can guess why.

But maybe I have got a way around. Just maybe you noticed that the module repo is under the FriendsOfProcessWire organization. I was hoping to gather a team of PW loving devs under this org and support some important but abandoned modules there. This plan didn't work out (yet?) but we can try to make it work. If someone here in this topic feels willing and capable to take care of FieldtypeLeafletMapMarker (at least for a while), please write to me a PM and we will decide how to go on.

I was always wishing a more productive community cooperation around PW and just maybe it is time)))

P.S. I am now out of town so might not answer quickly. But I will)

Sign In

Module: Leaflet Map

Recommended Posts

Cybermano

Cybermano

Ivan Gretsky

Cybermano

Mike-it

snck

Cybermano

Cybermano

torf

Cybermano

torf

Cybermano

Cybermano

torf

torf

Cybermano

stefan wemove

j__

Ivan Gretsky

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Similar Content

module StripePaymentLinks – Simple Checkout Integration for ProcessWire

Image Hotspots

module [Addon] StripePaymentLinks → Mailchimp Sync

module New Textformatter: Smart Quotes for visible Text

module Epic AI Pair Programming Adventure: Building a Module with the Most Confused “Dev” Ever

Browse

Activity

My Activity Streams

Support

Store

My Details