Hej!
I'm very new to leaflet and react and have an issue changing the icon of the marker based on a condition.
I want different colored markers based on the project and set the opacity based on the status given in a json file.
I defined my icons, create functions for every condition and try to return it likewise the map.
//map.js - giving an empty website (totally blank)
import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import dummy_data from '../../data/dummy_data.json';
import L from 'leaflet';
function Map() {
const greenIcon = new L.Icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41],
});
const blueIcon = new L.Icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
function CreateGreenMarker() {
dummy_data.map(element => {
if (element.ProjektorgaList == 'DBFZ' && element.active == true) {
<Marker
key = {element.projektNr}
position={[element.Latitude, element.Longitude]}
icon={greenIcon}>
<Popup>
{element.LeadOrga}
</Popup>
</Marker>
};
})}
function CreateGreenOpacMarker() {
dummy_data.map(element =>{
if (element.ProjektorgaList == 'DBFZ' && element.active == false) {
<Marker
key = {element.projektNr}
position={[element.Latitude, element.Longitude]}
icon={greenIcon}
opacity={0.4}>
<Popup>
{element.LeadOrga}
</Popup>
</Marker>
};
})}
function CreateBlueMarker() {
dummy_data.map(element =>{
if (element.ProjektorgaList.includes(';') && element.active == true) {
<Marker
key = {element.projektNr}
position={[element.Latitude, element.Longitude]}
icon={blueIcon}>
<Popup>
{element.LeadOrga}
</Popup>
</Marker>
};
})}
function CreateBlueOpacMarker() {
dummy_data.map(element =>{
if (element.ProjektorgaList.includes(';') && element.active == false) {
<Marker
key = {element.projektNr}
position={[element.Latitude, element.Longitude]}
icon={blueIcon}
opacity={0.4}>
<Popup>
{element.LeadOrga}
</Popup>
</Marker>
};
})}
return (
<MapContainer
center={[51.00, 10.00]}
zoom={6}
maxZoom={18}
scrollWheelZoom={true}
>
<TileLayer
url='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png '
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<CreateBlueMarker/>
<CreateBlueOpacMarker/>
<CreateGreenMarker/>
<CreateGreenOpacMarker/>
</MapContainer>
);
}
export default Map;
I'm not getting any error message, but the website is totally blank.
If I'm only rendering default markers everything works fine.
import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import dummy_data from '../../data/dummy_data.json';
import L from 'leaflet';
function Map() {
return (
<MapContainer
center={[51.00, 10.00]}
zoom={6}
maxZoom={18}
scrollWheelZoom={true}
>
<TileLayer
url='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png '
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
{dummy_data.map(data => (
<Marker
key = {data.projektNr}
position={[data.Latitude, data.Longitude]}>
<Popup>
{data.LeadOrga}
</Popup>
</Marker>
))}
</MapContainer>
);
}
export default Map;
Leaflet without react is working fine. I can get all my markers with the right conditions.
<html>
<head>
<title>OrgaKarte</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<style>
#map {
margin-top: 20px;
margin-left: 200px;
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script>
// dummy data for testing
const dummy_data = [
{
"projektNr": "03EI5433",
"Acronym": "HTPyr1",
"ProjektorgaList": "VauTe",
"LeadOrga": "Biomasse GmbH",
"Longitude": 9.932966,
"Latitude": 49.79245,
"active": 'True'
},
{
"projektNr": "1234",
"Acronym": "HTPyr1",
"ProjektorgaList": "VauTe",
"LeadOrga": "Biomasse GmbH",
"Longitude": 13.00,
"Latitude": 49.00,
"active": 'True'
},
{
"projektNr": "1234",
"Acronym": "HTPyr1",
"ProjektorgaList": "DBFZ",
"LeadOrga": "Biomasse GmbH",
"Longitude": 13.00,
"Latitude": 50.00,
"active": 'False'
},
// initial map
var map = L.map('map').setView([51.00, 10.00], 6);
L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png ', {
styles: 'c',
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// icon choices
var greenIcon = new L.Icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41],
});
var blueIcon = new L.Icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
// create the markers
// including pop ups, opacity, colour
dummy_data.map(element =>{
if (element.ProjektorgaList == 'DBFZ' && element.active == 'True') {
L.marker([element.Latitude, element.Longitude], {icon: greenIcon}).addTo(map).bindPopup(element.LeadOrga + '<br/><a href="https://de.wikipedia.org/wiki/Test" target="_blank">mehr Informationen</a>').on('mouseover', function (e) {
this.openPopup();
});
}
if (element.ProjektorgaList == 'DBFZ' && element.active == 'False') {
L.marker([element.Latitude, element.Longitude], {icon: greenIcon}).addTo(map).setOpacity(0.4).bindPopup(element.LeadOrga + '<br/><a href="https://de.wikipedia.org/wiki/Test" target="_blank">mehr Informationen</a>').on('mouseover', function (e) {
this.openPopup();
});
}
if (element.ProjektorgaList == 'VauTe' && element.active == 'True') {
L.marker([element.Latitude, element.Longitude], {icon: goldIcon}).addTo(map).bindPopup(element.LeadOrga + '<br/><a href="https://de.wikipedia.org/wiki/Test" target="_blank">mehr Informationen</a>').on('mouseover', function (e) {
this.openPopup();
});
}
if (element.ProjektorgaList == 'VauTe' && element.active == 'False') {
L.marker([element.Latitude, element.Longitude], {icon: goldIcon}).addTo(map).setOpacity(0.4).bindPopup(element.LeadOrga + '<br/><a href="https://de.wikipedia.org/wiki/Test" target="_blank">mehr Informationen</a>').on('mouseover', function (e) {
this.openPopup();
});
}
if (element.ProjektorgaList.includes(';') && element.active == 'True') {
L.marker([element.Latitude, element.Longitude], {icon: blueIcon}).addTo(map).bindPopup(element.LeadOrga + '<br/><a href="https://de.wikipedia.org/wiki/Test" target="_blank">mehr Informationen</a>').on('mouseover', function (e) {
this.openPopup();
});
}
if (element.ProjektorgaList.includes(';') && element.active == 'False') {
L.marker([element.Latitude, element.Longitude], {icon: blueIcon}).addTo(map).setOpacity(0.4).bindPopup(element.LeadOrga + '<br/><a href="https://de.wikipedia.org/wiki/Test" target="_blank">mehr Informationen</a>').on('mouseover', function (e) {
this.openPopup();
});
}
});
// if filter:
// function to set the zoom and change the center
// map.setZoom(8); -> for a Bundesland?
// map.panTo(new L.LatLng('new center')); -> pan in to the new given filter
/*
function filter (datalist.option) {
if (datalist.option.value = "Bayern")
map.setZoom(8);
map.panTo(new L.LatLng('48.790447', '11.497889'))
}
*/
</script>
</body>
</html>
my json file looks like this:
[
{
"projektNr": "03EI5433",
"Acronym": "HTPyr1",
"ProjektorgaList": "VauTe",
"LeadOrga": "Biomasse GmbH",
"Longitude": 9.932966,
"Latitude": 49.79245,
"active": true
},
{
"projektNr": "1234",
"Acronym": "HTPyr1",
"ProjektorgaList": "VauTe",
"LeadOrga": "Biomasse GmbH",
"Longitude": 13.00,
"Latitude": 49.00,
"active": true
},
{
"projektNr": "1234",
"Acronym": "HTPyr1",
"ProjektorgaList": "DBFZ",
"LeadOrga": "Biomasse GmbH",
"Longitude": 13.00,
"Latitude": 50.00,
"active": false
},
{
"projektNr": "03EI5433",
"Acronym": "HTPyr1",
"ProjektorgaList": "Biomasse GmbH; DBFZ; Mustermann AG; Test AG; VauTe",
"LeadOrga": "Biomasse GmbH",
"Longitude": 12.932966,
"Latitude": 52.79245,
"active": true
},
{
"projektNr": "12345",
"Acronym": "Hallo",
"ProjektorgaList": "Biomasse GmbH; DBFZ; Test AG; VauTe",
"LeadOrga": "Biomasse GmbH",
"Longitude": 10.00,
"Latitude": 50.00,
"active": true
},
{
"projektNr": "Test",
"Acronym": "Test",
"ProjektorgaList": "Test2; Hallo",
"LeadOrga": "Test2",
"Longitude": 11.00,
"Latitude": 53.00,
"active": false
}
]
Does anyone know what I'm doing wrong and how to implement the conditions in my react-leaflet? Any help is appreciated!
