CODEWITHSUNDEEP
javascriptleafletmapsmarkersleaflet.markercluster
Sanaz Baghban
Sanaz Baghban

Reputation: 155

Changing marker color based on data property in Leaflet

I have a set of data in json which I wanna set an specific marker color for each in leaflet. the data is like this:

var BillingDate = [
          {"branchcode":"668",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.649717",
          "LastY":"52.488193",
          "flag":"1",
          "flag_Title":null
          },
          {
            "branchcode":"669",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.712585",
          "LastY":"52.935543",
          "flag":"0",
          "flag_Title":null
          }
          {
           "branchcode":"669",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.712585",
          "LastY":"52.935543",
          "flag":"2",
          "flag_Title":null
          }
        ];

I wanna say that if flag===0 set marker color to Blue, if flag===1 set marker color to Red and so on. how am I able to do that in leaflet? because the if loop function itself wont work i guess... I'm using this code with Awsome Markers:

var customColor = "blue";

    if (ODO[i].flag === 1)
    customColor = "red";
    else if (ODO[i].flag === 2)
    customColor = "orange";
    else if (ODO[i].flag === 3)
    customColor = "green";

    var customMarker = L.AwesomeMarkers.icon({
    markerColor: customColor
    });
    var mainMap = L.marker( [ODO[i].LastX, ODO[i].LastY] , {icon: customMarker})
                    .bindPopup( popup );
    markerClusters.addLayer( mainMap );

but it gives me an error for

Layer.js:52 Uncaught TypeError: t.addLayer is not a function
at i.addTo (Layer.js:52)
at MarkerOnMap (functions.js:61)
at Object.success (app.js:213)
at i (0:4002)
at XMLHttpRequest.Request.f.onload (0:4179)

on the line: window.mainMap.addLayer( markerClusters ); markerClusterLayer = L.markerClusterGroup({disableClusteringAtZoom: 13}).addTo(mainMap);

anyone can help with this?

Upvotes: 1

Views: 1274

Answers (1)

Grzegorz T.
Grzegorz T.

Reputation: 4113

I have updated my examples, take a look -> Leaflet.awesome-markers

Update: adding markerClusterGroup plugin

Below is the solution to your problem:

// config map
let config = {
  minZoom: 7,
  maxZomm: 18,
};
// magnification with which the map will start
const zoom = 17;
// co-ordinates
const lat = 52.2297700;
const lon = 21.0117800;

// coordinate array with popup text
let points = [{
    "lat": 52.230020586193795,
    "lng": 21.01083755493164,
    "text": "point 1",
    "flag": 1
  },
  {
    "lat": 52.22924516170657,
    "lng": 21.011320352554325,
    "text": "point 2",
    "flag": 0
  },
  {
    "lat": 52.229511304688444,
    "lng": 21.01270973682404,
    "text": "point 3",
    "flag": 2
  },
  {
    "lat": 52.23040500771883,
    "lng": 21.012146472930908,
    "text": "point 4",
    "flag": 3
  }
];

// calling map
const map = L.map('map', config).setView([lat, lon], zoom);

// Used to load and display tile layers on the map
// Most tile servers require attribution, which you can set under `Layer`
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Creates a red marker with the coffee icon
function colors(flag) {
  let colorMarker = '';
  switch (flag) {
    case 0:
      colorMarker = 'pink';
      break;
    case 1:
      colorMarker = 'red';
      break;
    case 2:
      colorMarker = 'blue';
      break;
    case 3:
      colorMarker = 'green';
      break;
    default:
      break;
  }

  return L.AwesomeMarkers.icon({
    markerColor: colorMarker
  });
}

let markers = L.markerClusterGroup();

// loop that adds many markers to the map
for (let i = 0; i < points.length; i++) {
  const {
    lat,
    lng,
    text,
    flag
  } = points[i];

  const marker = new L.marker([lat, lng], {
    icon: colors(flag)
  }).bindPopup(text)

  markers.addLayer(marker);

}

map.addLayer(markers);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body,
html,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lvoogdt/[email protected]/dist/leaflet.awesome-markers.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/gh/lvoogdt/[email protected]/dist/leaflet.awesome-markers.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>

<div id="map"></div>

Upvotes: 2

Related Questions