CODEWITHSUNDEEP
javascriptleafletfont-awesome
Soreno
Soreno

Reputation: 1

Font Awesome icons with geoJson files in leaflet

I am new to Leaflet and Javascript, and trying to do a map with informative points. Trying apply the awesome icons instead of the default blue when using leaflet. I have tried all kind of variants from examples, latest below. It seems not to be working for me at all.

All icons shows up in the blue default color on the map so I am a bit lost here. Also in next step I want to do is looking for a way to use properties from the GeoJSON file to change the icon style based on the values in GeoJSON file by using awesome icons. For example "koncept = "Large" use awesome icon this, koncept = "Small" use awesome icon this. etc

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Leaflet test</title>

 <link rel="stylesheet" type="text/css" href="css/leaflet.css">
 <link rel="stylesheet" type="text/css" href="css/mapstyle.css">
 <link rel="stylesheet" type="text/css" href="css/leaflet.awesome-markers.css"> 

  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="js/leaflet.js"></script>
  <script type="text/javascript" src="js/leaflet.ajax.min.js"></script>
  <script type="text/javascript" src="js/leaflet.awesome-markers.min.js"></script>
  <script src="js/spin.js"></script>
  <script src="js/leaflet.spin.min.js"></script>
  <script src="https://use.fontawesome.com/xxxxxxxxxx.js"></script>

  <script type="text/javascript" src="dip.geojson"></script>

<body>

    <div id="mapid"></div>
<script type="text/javascript">

var map = L.map('mapid').setView([59.5, 14.5], 7);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',

}).addTo(map);

//test if awesome icon works... and it works...

L.marker([59.5,14.621303], {icon: L.AwesomeMarkers.icon({icon: 'coffee', prefix: 'fa', markerColor: 'red', iconColor: '#ffffff'}) }).addTo(map);

//This part below does not work with awesome markers, it returns to the default blue markers

var dip = new L.geoJson.ajax(["dip.geojson"], {icon: L.AwesomeMarkers.icon({icon: 'coffee', prefix: 'fa', markerColor: 'red', iconColor: '#ffffff'}) }).addTo(map);

</script> 
</head>
</div>
</body>
</html>

Did some changes but still no AwesomeMarkers, only the blue default on the map...

var dip = new L.geoJson.ajax(["dip.geojson"],{icon: L.AwesomeMarkers.icon({icon: 'coffee', prefix: 'fa', markerColor: 'red', iconColor: '#ffffff'})}).addTo(map);

Upvotes: 0

Views: 1785

Answers (1)

deevee
deevee

Reputation: 1855

Please take a look at this fiddle: http://jsfiddle.net/VPzu4/92/. Check external sources: there are not only leaflet.awesome-markers but also bootstrap.min.css and font-awesome.css included. I guess your code misses that - include them in your script.

Also you have some errors in your code. This is wrong:

<head>
   //...
<div id="mapid"></div> // map div in head section
   //...
</head>
<body>
</div> // left div closing tag
</body>

Your map div shouldn't be in head section. Move your map div declaration from head to body:

<body>
<div id="mapid"></div>
</body>

Also, make sure your included sources (libraries and jsons) are accessible by this page. Check it in browser inspection tool. Maybe you see some more errors in console?

EDIT

Refering to your comment - making jsfiddle of your code and data is not 'insane', it's helpful for you. I don't say you add all your data - just make a short example of it to be easy reproducible for others who wish to help you..

Anyway, well now I see you don't have problem with font awesome but with handling geojson. So working on other exemplar data (here USGS earthquake daily data) you can see how to style json with fontawesome:

http://jsfiddle.net/VPzu4/1559/

You can grab geojson with jquery - mind the external sources - and add conditions depending on feature magnitude data:

$.getJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson', function(json) {

  geoLayer = L.geoJson(json, {
    onEachFeature: function(feature, layer) {
      var popupText = "<b>Magnitude:</b> " + feature.properties.mag +
        "<br><b>Location:</b> " + feature.properties.place +
        "<br><a href='" + feature.properties.url + "'>More info</a>";
      layer.bindPopup(popupText, {
        closeButton: true,
        offset: L.point(0, -20)
      });
      layer.on('click', function() {
        layer.openPopup();
      });
    },

    pointToLayer: function(feature, latlng) {
    var mag = feature.properties.mag;
    var marker;
    if (mag >= 4.0) {
        marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'cog', prefix: 'glyphicon',markerColor: 'cadetblue'}) }); 
      } else if (mag >= 3.0) {
        marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'coffee', prefix: 'glyphicon',markerColor: 'black'}) });
      } else if (mag >= 2.0) {
        marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'spinner', markerColor: 'red', prefix: 'fa', spin:true}) });
      } else {
        marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'star', prefix: 'glyphicon',markerColor: 'orange'}) });
      }
    return marker;
    }
  }).addTo(map);
});

Upvotes: 2

Related Questions