Support » Plugin: Leaflet Map » More than one GeoJSON popup_property

  • ResolvedPlugin Contributor Gerald

    (@gerital)


    First thanks for your great plugin, makes it really easy to embed leaflet maps.

    I show a map loading GeoJSON features and now want to open popups on the markers. Everything works fine with one property like this:

    [leaflet-geojson src="https://xrcb.exo.cat/radios-geojson/" popup_property="title"][/leaflet-geojson]

    Any chance to show more than one feature properties on the popup, ideally with HTML markup to make links to content? I imagine something like that (where url and title are feature properties):

    [leaflet-geojson]<a href="popup_property=url">popup_property=title</a>[/leaflet-geojson]

    I thought of hacking into the plugin, what do you think would be the best markup for that case?

    • This topic was modified 2 years, 9 months ago by Gerald. Reason: add code
Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author bozdoz

    (@bozdoz)

    That might be a hard one (but might not).

    I like the idea of string formatting as you suggest; maybe something like:

    [leaflet-geojson]
    {title}
    [/leaflet-geojson]

    You could do something like that in leaflet-map/shortcodes/class.geojson-shortcode.php

    The function reads like this:

    
    function onEachFeature (feature, layer) {
        var props = feature.properties || {},
            text = popup_property && props[ popup_property ] || popup_text;
        if (text) {
            layer.bindPopup( text );
        }
    }

    Leaflet actually has a function to interpolate strings, called L.Util.template. So you should be able to change the function like this:

    function onEachFeature (feature, layer) {
        var props = feature.properties || {},
            text = popup_property && props[ popup_property ] || popup_text;
        if (text) {
            text = L.Util.template(text, props);
            layer.bindPopup( text );
        }
    }

    It might be THAT easy to hack! Give it a shot if you’re keen to be the first. That should be backwards compatible, so I’ll look into adding it into the next version. Thanks!

    Plugin Author bozdoz

    (@bozdoz)

    Wow, that markup really messed up my comment. Here was my suggested markup:

    [leaflet-geojson]
    <a href={url}>{title}</a>
    [/leaflet-geojson]
    Plugin Author bozdoz

    (@bozdoz)

    Actually, I wouldn’t want to use L.Util.template. It throws an Error, which I think is needless. Here’s my recommended function:

    var templateRe = /\{ *([\w_-]+) *\}/g;
    function template(str, data) {
    	return str.replace(templateRe, function (match, key) {
    		var value = data[key];
    		if (value === undefined) {
    			return match;
    		}
    		return value;
    	});
    }
    • This reply was modified 2 years, 9 months ago by bozdoz.
    Plugin Contributor Gerald

    (@gerital)

    Great shot @bozdoz, your proposal works perfect adding the template function and changing line 109 of leaflet-map/shortcodes/class.geojson-shortcode.php to:

    text = popup_property && props[ popup_property ] || template(popup_text, feature.properties);

    Thanks!

    ps: just created a pull request

    Plugin Contributor Gerald

    (@gerital)

    There is a final detail with the generated popup markup. Probably it’s an issue with layer.bindPopup( text ). I’m adding more HTML markup to the geojson shortcode, like this:

    [leaflet-geojson]<h3><a href="https://xrcb.exo.cat/?p={id}">{title}</a></h3>{barrio}<br>Radio {categoria}[/leaflet-geojson]

    It get’s converted to something like that, with a lot of extra <p> and <br>:

    <div class="leaflet-popup-content"><p></p><br><h3><a href="https://xrcb.exo.cat/?p=22">scannerfm.com</a></h3><br><p>el Poble Sec<br>Radio libre</p></div>

    Plugin Author bozdoz

    (@bozdoz)

    Probably WordPress is reading the new lines:

    [leaflet-geojson]
    *new line*
    *new line
    [/leaflet-geojson]

    WordPress creates paragraphs for every new line. Try putting it on one line? Or try the text editor instead of the visual editor? Other than that it’s working?

    Something like this:

    [leaflet-geojson]All text here[\leaflet-geojson]

    • This reply was modified 2 years, 9 months ago by bozdoz.
    Plugin Contributor Gerald

    (@gerital)

    Actually I have it in one line in the text tab, exactly as I posted it in the last message. Seems that WordPress is doing some HTML cleanup before saving it to the database.

    • This reply was modified 2 years, 9 months ago by Gerald.
    Plugin Author bozdoz

    (@bozdoz)

    Hmmm. I just gave it a test and it works great! Not seeing any extra para tags at all. Not sure what might be happening.

    This is behind my coding knowledge. I just need to show more properties in a single popup. What would look the shortcode like? Do I need to modify any php code of the plugin? If yes can I achive this using Code Snippets plugin which I broadly use? Thanks, Roman.

    I’ve resolved it, sorry for replying to a resolved topic.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘More than one GeoJSON popup_property’ is closed to new replies.