0

So i want to make simple html webpage with my analytical data on it. I gather all of my data inside of valid geoJSON. I used this for HTML part:

<!DOCTYPE html>
<html>
<head>
    <title>GeoJSON + Flask + MongoDB</title>
    <meta charset="utf-8">
    <link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<h1>
    Let's display some nice maps here!
</h1>
<div id="map" style="height: 80vh;"></div>

<script>

const map = L.map('map').setView([55.73135, 37.59104], 10);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: 'Open street map',
}).addTo(map);


axios.get('http://127.0.0.1:5000/points')
  .then((response) => {
    L.geoJSON(response.data, {
      style(feature) {
        console.log(feature);
        if (feature.properties.count < 5) {
          return { color: '#3cb043' };
        }
        if (feature.properties.count < 8) {
          return { color: '#fad201' };
        }
        return { color: '#ff0033' };
      },
    }).addTo(map);
  });


</script>
</body>
</html>

It shows markers on the map but doesn't really color them. I tried to make it green for points where count less than 5, yellow for less than 8 and red for the other cases. I feel like problem is about axios.get but i'm not much of a front-end guy so I don't really know what's wrong. Also I added console.log(feature) just to see if the function is ever called and it doesn't seem like it.

Improve this question

2 Answers 2

Reset to default
1

Markers can't be colorized with the default leaflet library, you can only change the icon: https://leafletjs.com/examples/custom-icons/

You can try a library like this: https://github.com/lvoogdt/Leaflet.awesome-markers

Improve this answer
1
  • Thank you I didn't notice that tutorial on coloring was about polygons, not markers:(
    – Jubick
    Commented Aug 24, 2020 at 16:43
1

So i figured out that calling style didn't work and changed it to pointToLayer Here's correct markup:

<!DOCTYPE html>
<html>
<head>
    <title>GeoJSON + Flask + MongoDB</title>
    <meta charset="utf-8">
    <link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<h1>
    Let's display some nice maps here!
</h1>
<div id="map" style="height: 80vh;"></div>

<script>

const map = L.map('map').setView([55.73135, 37.59104], 10);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: 'Open street map',
}).addTo(map);

var greenMarkerOptions = {
    radius: 8,
    fillColor: "#3cb043",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

var yellowMarkerOptions = {
    radius: 8,
    fillColor: "#fad201",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

var redMarkerOptions = {
    radius: 8,
    fillColor: "#ff0033",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};


axios.get('http://127.0.0.1:5000/points')
  .then((response) => {
    L.geoJSON(response.data, {
      pointToLayer: function (feature, latlng) {
        if (feature.properties.count < 3) {
          return L.circleMarker(latlng, greenMarkerOptions);
        }
        else if (feature.properties.count < 6) {
          return L.circleMarker(latlng, yellowMarkerOptions);
        }
        return L.circleMarker(latlng, redMarkerOptions);
      },
    }).addTo(map);
  });


</script>
</body>
</html>
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.