Using fontawesome with leaflet markers and geojson

Question

Found this issue hard to work out. I want to use fontawesome markers on my leafletmap which is using GeoJson data for lon/lat of the different markers.

var Icon = L.icon({
    html: '<i class="fas fa-map-pin"></i>',
    iconSize: [20, 20]
  });

    var mymap = L.map('mapid').setView([-37.735018, 144.894947], 13);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(mymap);

    L.geoJSON(myGeojsonData).addTo(mymap);

    var circle = L.circle([-37.735018, 144.894947], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 50
}).addTo(mymap);

Example of geoJson

var myGeojsonData =
{
  "features": [
    {
      "geometry": {
        "coordinates": [
          144.829434,
          -37.825233
        ],
        "type": "Point"
      },
      "properties": {
        "Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
        "IDnumber": "2541EL_P0"
      },
      "type": "Feature"
    },
    {
      "geometry": {
        "coordinates": [
          144.829502,
          -37.825234
        ],
        "type": "Point"
      },
      "properties": {
        "Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
        "IDnumber": "2541EL_P1"
      },
      "type": "Feature"
    },
    {
      "geometry": {
        "coordinates": [
          144.881846,
          -37.732708
        ],
        "type": "Point"
      },

I want to add the var Icon information as the marker on all the separate points given by the geoJson.

I understand how to do this with one point but with multiple it gets very confusing...

user9570476 user9570476 · Accepted Answer · 2019-03-05T00:28:05

I'm guessing that your "myGeojsonData" object is a "multipoint" feature type so I created a couple of points close to your "red circle". I changed your Icon to a DivIcon and hooked up the marker logic by using the pointToLayer callback on the L.geoJSON call.

var myGeojsonData = {
    "type": "Feature",
    "geometry": {
        "type": "MultiPoint",
        "coordinates": [
            [144.894947,-37.72],
            [144.894947,-37.70]
        ]
    }
};

var myIcon = L.divIcon({
    html: '<i class="fas fa-map-pin"></i>',
    iconSize: [20, 20],
    className: 'dummy' // We don't want to use the default class
});

var mymap = L.map('mapid').setView([-37.735018, 144.894947], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);

L.geoJSON(myGeojsonData, {
    pointToLayer: function(getJsonPoint, latlng) {
        return L.marker(latlng, { icon: myIcon });
    }
}).addTo(mymap);

var circle = L.circle([-37.735018, 144.894947], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 50
}).addTo(mymap);

Result:

Using your GeoJSON data which looks like this:

var myGeojsonData = {
    "features": [
        {
            "geometry": {
                "coordinates": [
                    144.829434,
                    -37.825233
                ],
                "type": "Point"
            },
            "properties": {
                "Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
                "IDnumber": "2541EL_P0"
            },
            "type": "Feature"
        },
        {
            "geometry": {
                "coordinates": [
                    144.829502,
                    -37.825234
                ],
                "type": "Point"
            },
            "properties": {
                "Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
                "IDnumber": "2541EL_P1"
            },
            "type": "Feature"
        }
    ]
};

The two points appear to be really close to each other:

For the popups, I don't know what it looked like originally since I don't see any "bindpopup" type calls in your original code, and testing the original code you provided (without my changes) I don't get any popups. You can add popups like this:

L.geoJSON(myGeojsonData, {
    pointToLayer: function (getJsonPoint, latlng) {
        return L.marker(latlng, { icon: myIcon });
    }
}).bindPopup(function(layer) {
    return 'ID #: ' + layer.feature.properties.IDnumber + '<br />Area: ' + layer.feature.properties.Area;
}).addTo(mymap);

I didn't add any styling so they would look pretty ugly. There are more settings for positioning and styling the popups.

Using fontawesome with leaflet markers and geojson

1 Answers