javascriptleafletmarker
Uncaught TypeError: Cannot read property 'createIcon' of undefined when creating markers
Now I have named every name object in the var but the map still not working.
I want to map custom icons, which are defined in a json data object by the property name. I have multiple Icons. I wrote this code, but it's not working and my console says the error is in line 266,
"Uncaught TypeError: Cannot read property 'createIcon' of undefined" but I can't figure out the error.
var map = L.map('map').setView([50.922082,6.944733], 13);
var markerIcons = {
"REWE": L.icon({
iconUrl: 'rewe.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Kaufland": L.icon({
iconUrl: 'kaufland.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Netto Filiale": L.icon({
iconUrl: 'netto.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"REWE Rahmati": L.icon({
iconUrl: 'rewe.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Lidl": L.icon({
iconUrl: 'lidl.jpg',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"ALDI SÜD": L.icon({
iconUrl: 'aldi.jpg',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"PENNY": L.icon({
iconUrl: 'penny.jpg',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"dm-drogerie markt": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Hit": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"HIT Handelsgruppe GmbH & Co. KG": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Hit getränkemarkt": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Hit Markt": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Kaufland Köln-Niehl": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Kaufland Köln-Ehrenfeld": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Kaufland Köln-Kalk": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Kaufland Köln-Mühlheim": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"NORMA Filiale": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"NORMA": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"real": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Wodarz Getränkemarkt": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Center Engels Marsdorf GmbH": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Engels": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Peters": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Gans": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Daub KG": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Center Engels Widdersdorf": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Romano": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Wodarz": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Kausemann": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Weiden": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Hein": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Feldmann-Höner": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA - Die Kippings": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Blomeier": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Aktiv Markt Hetzenegger": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA STEFFENS": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Jung": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Markt Hein": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Frischmarkt Zickuhr": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Stahl": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Klein": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Hetzenegger": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA-Markt Frischecenter J. Engels GbR": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Geurtz": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Wünsch": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Hetzenegger Getränkemarkt": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Klein Hessling": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Breuer": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Höner": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Schröder": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA FrischeCenter Gusek": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Zickuhr": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Köln-Merheim": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Jünger": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Klein-Heßling": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Mülln": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Bonus": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"EDEKA Breidohr-Frischecenter": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Jünger": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Jünger": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Jünger": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Jünger": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Edeka Jünger": L.icon({
iconUrl: 'dm.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
};
for (var i = 0; i < jsonDataObject.length; i++) {
var lat = parseFloat(jsonDataObject[i].geometry.location.lat);
var lng = parseFloat(jsonDataObject[i].geometry.location.lng);
var marker = L.marker(L.latLng(lat, lng), {
icon: markerIcons[jsonDataObject[i].name]
});
marker.bindPopup(jsonDataObject[i].name, {
autoClose: false
});
map.addLayer(marker);
marker.myJsonData = jsonDataObject[i];
};
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
Solution
You get this error because in your jsonDataObject you only have as name Lidl and not REWE and Netto Filiale. Moreover there is not an object for Lidl in your markerIcons dictionary. If you include in your markerIcons an object for Lidl you should be good and not get the error.
<!DOCTYPE html>
<html>
<head>
<title>Angelkarte</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
</head>
<body>
<div id="map" style="width: 700px; height: 640px"></div>
<script>
var jsonDataObject = [
{
"geometry": {
"location": {
"lat": 50.93756,
"lng": 6.947799799999999
},
"viewport": {
"northeast": {
"lat": 50.93890322989272,
"lng": 6.949169529892721
},
"southwest": {
"lat": 50.93620357010728,
"lng": 6.946469870107277
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/shopping-71.png",
"id": "62cb1e6d0806ad07128377d901ee32310253a30b",
"name": "REWE",
"opening_hours": {
"open_now": true
},
"photos": [{
"height": 3096,
"html_attributions": [
"\u003ca href=\"https://maps.google.com/maps/contrib/101585085101168022315\"\u003eMomen Mawad\u003c/a\u003e"
],
"photo_reference": "CmRaAAAAXm4APOhsx_uZaCqKYJaPIV3j4N8LacOOyJRbo4Ngic4a8d_wfvN2hpGdEq99Bb4a-GJ1zNYytXZJb31oZtb76UcCXlCqJz-_T8OUJIGU0QPrwtoxouUUNbpogqSCnCddEhDqABsG5Mqmf0PSSo-b_T2uGhTU6tkDpTmygG7CRvzKLaSm2W1K_Q",
"width": 4128
}],
"place_id": "ChIJfT5IYqklv0cRa8hjie38gBs",
"plus_code": {
"compound_code": "WWQX+24 Köln",
"global_code": "9F28WWQX+24"
},
"rating": 4,
"reference": "ChIJfT5IYqklv0cRa8hjie38gBs",
"scope": "GOOGLE",
"types": [
"supermarket",
"grocery_or_supermarket",
"food",
"point_of_interest",
"store",
"establishment"
],
"user_ratings_total": 718,
"vicinity": "Neumarkt 8-10, Köln"
},
{
"geometry": {
"location": {
"lat": 50.9896636,
"lng": 6.9450721
},
"viewport": {
"northeast": {
"lat": 50.99083827989272,
"lng": 6.945784879892721
},
"southwest": {
"lat": 50.98813862010728,
"lng": 6.943085220107277
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/shopping-71.png",
"id": "15bde73489d3e661f76c6c8b057b857d15c33f5d",
"name": "Lidl",
"opening_hours": {
"open_now": true
},
"photos": [{
"height": 4160,
"html_attributions": [
"\u003ca href=\"https://maps.google.com/maps/contrib/109844980228758601627\"\u003eJakub Zeman\u003c/a\u003e"
],
"photo_reference": "CmRaAAAAxWykfcdTATYDgX-RKiu2bJMZ_i1TDEKYRRZtLY7d7ra2LoPSq-lHbqYgj2Hm8rT2MtniHkb5LbjPsynSg_03hYxVvrU7y5HC0shGbjO-AkmChpTk4G0u0fm7Ryso_BUcEhC4p08zvEuFmcU5fOZvbCoKGhS1zKXZF6SF27Ly4u6ZWlmsd2VJ3Q",
"width": 3120
}],
"place_id": "ChIJI0M7-Jkvv0cRZafVWxoOywc",
"plus_code": {
"compound_code": "XWQW+V2 Köln",
"global_code": "9F28XWQW+V2"
},
"rating": 4.1,
"reference": "ChIJI0M7-Jkvv0cRZafVWxoOywc",
"scope": "GOOGLE",
"types": [
"supermarket",
"grocery_or_supermarket",
"food",
"point_of_interest",
"store",
"establishment"
],
"user_ratings_total": 450,
"vicinity": "Neusser Str. 774/776, Köln"
},
{
"geometry": {
"location": {
"lat": 50.9626901,
"lng": 7.0051027
},
"viewport": {
"northeast": {
"lat": 50.96417282989272,
"lng": 7.006365279892721
},
"southwest": {
"lat": 50.96147317010728,
"lng": 7.003665620107277
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/shopping-71.png",
"id": "abb022726ecd83f2f41a4921b9969fdb92f78a48",
"name": "Lidl",
"opening_hours": {
"open_now": true
},
"photos": [{
"height": 1920,
"html_attributions": [
"\u003ca href=\"https://maps.google.com/maps/contrib/101798318233683502049\"\u003eSergei Baikin\u003c/a\u003e"
],
"photo_reference": "CmRaAAAAJ4SqucpuL7ecaLXlipj7twdqC_KwTTYAF48n-2aMGzLTJGT1nphb_OM9h_A05nRob5R34sHNKNqtKBSoHeVTI5UlDf6cbHRswDv1UFldESl814keTyTXfWTlzlryyGxQEhApWglsPwfp3thXkYgHzAp2GhT9cZSOrbfKytiDWdGjM8y-hNhE1Q",
"width": 1080
}],
"place_id": "ChIJA5HPDgcmv0cR-QJ3JHPmld4",
"plus_code": {
"compound_code": "X274+32 Köln",
"global_code": "9F29X274+32"
},
"rating": 3.6,
"reference": "ChIJA5HPDgcmv0cR-QJ3JHPmld4",
"scope": "GOOGLE",
"types": [
"supermarket",
"grocery_or_supermarket",
"food",
"point_of_interest",
"store",
"establishment"
],
"user_ratings_total": 318,
"vicinity": "Wr. Pl. 1, Köln"
},
{
"geometry": {
"location": {
"lat": 50.97775619999999,
"lng": 7.0010123
},
"viewport": {
"northeast": {
"lat": 50.97912242989272,
"lng": 7.002976729892721
},
"southwest": {
"lat": 50.97642277010728,
"lng": 7.000277070107277
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/shopping-71.png",
"id": "078117a10aefd0116715a6079cdb036f5ba41c57",
"name": "Netto Filiale",
"opening_hours": {
"open_now": true
},
"photos": [{
"height": 1280,
"html_attributions": [
"\u003ca href=\"https://maps.google.com/maps/contrib/111351800509443750507\"\u003eA Google User\u003c/a\u003e"
],
"photo_reference": "CmRaAAAAoij8qIZHDfyMMua-UT_Xr4qIbNaEaeJg6ocxZMmLnbtvMBgSHwlnX_z0XXeugXfZRAlGer39I1chZiL10-iR_BIw86ciuNseeI7dzgubxljtcWHE8c-_4Nwk4hctxZFSEhAe5EKQCBGRRJbzGikqunuXGhT0Qox0e2htUVa_VhVgGvOrJWwr2w",
"width": 960
}],
"place_id": "ChIJXQ6kzFMvv0cRHnkGLzukbvw",
"plus_code": {
"compound_code": "X2H2+4C Köln",
"global_code": "9F29X2H2+4C"
},
"rating": 3.9,
"reference": "ChIJXQ6kzFMvv0cRHnkGLzukbvw",
"scope": "GOOGLE",
"types": [
"supermarket",
"grocery_or_supermarket",
"food",
"point_of_interest",
"store",
"establishment"
],
"user_ratings_total": 360,
"vicinity": "Düsseldorfer Str. 177, Köln"
}
];
var map = L.map('map').setView([50.922082, 6.944733], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var markerIcons = {
"REWE": L.icon({
iconUrl: 'https://unpkg.com/leaflet@1.6.0/dist/images/marker-icon-2x.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Netto Filiale": L.icon({
iconUrl: 'https://unpkg.com/leaflet@1.6.0/dist/images/marker-icon-2x.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Lidl": L.icon({
iconUrl: 'https://unpkg.com/leaflet@1.6.0/dist/images/marker-icon-2x.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
};
for (let i = 0; i < jsonDataObject.length; i++) {
var lat = parseFloat(jsonDataObject[i].geometry.location.lat);
var lng = parseFloat(jsonDataObject[i].geometry.location.lng);
console.log(jsonDataObject[i].name)
var marker = L.marker([lat, lng], {
icon: markerIcons[jsonDataObject[i].name]
});
marker.bindPopup(jsonDataObject[i].name, {
autoClose: false
});
map.addLayer(marker);
marker.myJsonData = jsonDataObject[i];
};
</script>
</body>
</html>- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices