Geojson – I Need to use this, I have 100’s of markers causing load probs

  • Resolved Wizard

    (@badmp3)


    3 months, 3 weeks ago

    So I have a new problem, i created many markers but they are all inlined, and not using geojson file..

    I am trying to figure out how to use this:

    Here is my basic markers.json




    {
    "type": "FeatureCollection",
    "features": [
    {
    "type": "Feature",
    "geometry": {
    "type": "Point",
    "coordinates": [40.979898069620155, -76.640625]
    },
    "properties": {
    "names": "Zimmsville",
    "descriptions": "Recommended Level 2",
    "url": "/icons/union.png",
    "size": [30, 30]
    }
    },
    {
    "type": "Feature",
    "geometry": {
    "type": "Point",
    "coordinates": [56.36525013685609, 28.828125000000004]
    },
    "properties": {
    "names": "Super Market",
    "descriptions": "Recommended Level 15",
    "url": "/icons/union.png",
    "size": [30, 30]
    }
    }
    ]
    }

    Here is the shortcode:

    [leaflet-geojson src=”/markers.json”

    iconurl=”{url}”

    iconsize=”{size}”

    iconanchor=”15,30″

    popupanchor=”0,-30″

    tooltipanchor=”0,-15″]

    {names} – {descriptions}[/leaflet-geojson]

    This isnt showing the icons, it does show names and description

    It seems the {url} is not pulling the data from the json, while the name / description works..


    Can someone help make a basic example to get this working? I can then start to convert the others.


    Another tidbit – So Just to try it out, I put {url} at {names} – {descriptions} – {url] [/leaflet-geojson]

    and it shows the URL in the hover / tooltip , but for some reason, its not putting it in the other spot where it needs to go???

    • This topic was modified 3 months, 3 weeks ago by Wizard.
    • This topic was modified 3 months, 3 weeks ago by Wizard.
Viewing 7 replies - 16 through 22 (of 22 total)
  • Thread Starter Wizard

    (@badmp3)

    I just checked we have this

    <link rel=’stylesheet‘ id=’font-awesome-css‘ href=’/wp-content/themes/news-vibrant/assets/library/font-awesome/css/font-awesome.min.css?ver=4.7.0‘ type=’text/css‘ media=’all‘ />

    Plugin Author hupe13

    (@hupe13)

    I tested it, it works in Github version (and in the next Plugin version). But you need to configure it with the new parentgroup options:

    (both without aria-hidden="true") or any other symbol.

    Thread Starter Wizard

    (@badmp3)

    So I tried taking all the files from the github and copying it on top, nothing changed for the Icon issue.

    I used this as a temp solution since my theme has custom css section

    /* Styling for the down arrow symbol / .fas.fa-chevron-down { font-size: 14px; / Adjust size as needed / color: #333; / Adjust color as needed / font-family: ‘Arial’, sans-serif; / Use a common font family / display: inline-block; font-weight: normal; / Ensure font weight is normal */
    }

    .fas.fa-chevron-down::before {
    content: ‘▼’; /* Down arrow symbol / font-size: 14px; / Adjust the size of the symbol here / font-family: ‘Arial’, sans-serif; / Ensure the font family matches */
    }

    /* Styling for the right arrow symbol / .fas.fa-chevron-right { font-size: 14px; / Adjust size as needed / color: #333; / Adjust color as needed / font-family: ‘Arial’, sans-serif; / Use a common font family / display: inline-block; font-weight: normal; / Ensure font weight is normal */
    }

    .fas.fa-chevron-right::before {
    content: ‘▼’; /* Right arrow symbol / font-size: 14px; / Adjust the size of the symbol here / font-family: ‘Arial’, sans-serif; / Ensure the font family matches / display: inline-block; / Ensure it is treated as an inline block for transformations / transform: rotate(270deg); / Rotate the symbol 90 degrees to point right */
    }

    Plugin Author hupe13

    (@hupe13)

    Maybe I didn’t wrote it correctly: It does not work as it is. You need to configure the options as I wrote.

    Awesome V4 font

    However, you can configure any other symbol or character. For example + and -.

    Thread Starter Wizard

    (@badmp3)

    I managed to create python script to change my leaflet markers to the new json format, so far everything is working, the groups etc all good

    Plugin Author hupe13

    (@hupe13)

    Unfortunately there is not such a possibility. leaflet-geojson has only these options. All markers have the same icon.

    I made an example with defining the icons in the geojson file.

    Plugin Author hupe13

    (@hupe13)

    Wait, so your saying that
    iconurl=”{url}”
    iconsize=”{size}”

    Can not take the data from the json and you gotta manually add it in?

    I asked @bozdoz.

    He answered. But I made a working example.

Viewing 7 replies - 16 through 22 (of 22 total)
  • You must be logged in to reply to this topic.