I have an issue. I'm trying to display some markers stored in json variable. what i'm trying to do is looping the json get x,y and then store them in markers, so that i can display the on map but this don't seem to be working for me here is the code
var map = L.map('map').setView([56.04351888068181, 12.695600612967427], 15);
var osmAttrib = 'Map data © OpenStreetMap contributors';
var osmTileLayer = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: osmAttrib
});
map.addLayer(osmTileLayer);
var cities = {
city: [{
x: -7.6188009,
y: 33.5949733,
"osm_id": 25730724,
"place": "city",
"name": "Casablanca",
"alt_name": "Casablanca",
"old_name": ""
},
{
x: -1.9293059,
y: 34.6778736,
"osm_id": 26755661,
"place": "city",
"name": "Oujda",
"alt_name": "",
"old_name": ""
},
{
x: -5.5678716,
y: 33.8850849,
"osm_id": 26756035,
"place": "city",
"name": "Meknès",
"alt_name": "",
"old_name": ""
},
{
x: -8.49884,
y: 33.2433309,
"osm_id": 26756132,
"place": "city",
"name": "El Jadida",
"alt_name": "",
"old_name": ""
},
{
x: -11.0986635,
y: 28.4375526,
"osm_id": 26756639,
"place": "city",
"name": "Tan-Tan",
"alt_name": "",
"old_name": ""
},
{
x: -9.5830755,
y: 30.4211631,
"osm_id": 27565078,
"place": "city",
"name": "Agadir",
"alt_name": "",
"old_name": ""
},
{
x: -9.2395332,
y: 32.2994239,
"osm_id": 29337459,
"place": "city",
"name": "Safi",
"alt_name": "",
"old_name": ""
},
{
x: -2.9281198,
y: 35.1739922,
"osm_id": 31380375,
"place": "city",
"name": "Nador",
"alt_name": "",
"old_name": ""
},
{
x: -5.531164,
y: 31.5213295,
"osm_id": 34992118,
"place": "city",
"name": "Tinghir",
"alt_name": "",
"old_name": ""
},
{
x: -6.072605,
y: 33.8302864,
"osm_id": 63439019,
"place": "city",
"name": "Khémisset",
"alt_name": "",
"old_name": ""
},
{
x: -4.0101041,
y: 34.230155,
"osm_id": 63443413,
"place": "city",
"name": "Taza",
"alt_name": "",
"old_name": ""
},
{
x: -5.2219133,
y: 33.4361171,
"osm_id": 206385324,
"place": "city",
"name": "Azrou",
"alt_name": "",
"old_name": ""
},
{
x: -9.7620903,
y: 31.5118281,
"osm_id": 245486763,
"place": "city",
"name": "Essaouira",
"alt_name": "",
"old_name": ""
},
{
x: -8.8779217,
y: 30.4706513,
"osm_id": 254485332,
"place": "city",
"name": "Taroudant",
"alt_name": "",
"old_name": ""
},
{
x: -9.7312815,
y: 29.698624,
"osm_id": 256948195,
"place": "city",
"name": "Tiznit",
"alt_name": "",
"old_name": ""
},
{
x: -6.9008369,
y: 30.9204403,
"osm_id": 288704798,
"place": "city",
"name": "Ouarzazate",
"alt_name": "",
"old_name": ""
},
{
x: -2.9407146,
y: 35.2919028,
"osm_id": 289031151,
"place": "city",
"name": "Melilla",
"alt_name": "",
"old_name": ""
},
{
x: -5.013355,
y: 34.0341156,
"osm_id": 289035432,
"place": "city",
"name": "Fès",
"alt_name": "",
"old_name": ""
},
{
x: -5.3041384,
y: 35.8883614,
"osm_id": 291768008,
"place": "city",
"name": "Ceuta",
"alt_name": "",
"old_name": ""
},
{
x: -6.8345427,
y: 34.0224046,
"osm_id": 299120862,
"place": "city",
"name": "Rabat",
"alt_name": "",
"old_name": ""
},
{
x: -8.7595462,
y: 31.5469033,
"osm_id": 309968105,
"place": "city",
"name": "Chichaoua",
"alt_name": "",
"old_name": ""
},
{
x: -15.9431274,
y: 23.6940663,
"osm_id": 348237703,
"place": "city",
"name": "Dakhla",
"alt_name": "",
"old_name": "Villa Cisneros"
},
{
x: -10.0574351,
y: 28.9863852,
"osm_id": 351111110,
"place": "city",
"name": "Guelmim",
"alt_name": "",
"old_name": "Goulimine"
},
{
x: -3.9301858,
y: 35.2451143,
"osm_id": 391512701,
"place": "city",
"name": "Al Hoceima",
"alt_name": "",
"old_name": ""
},
{
x: -2.3294087,
y: 34.9266755,
"osm_id": 391562106,
"place": "city",
"name": "Berkane",
"alt_name": "",
"old_name": ""
},
{
x: -1.9632308,
y: 32.5329031,
"osm_id": 400915111,
"place": "city",
"name": "Bouarfa",
"alt_name": "Būʿarfah",
"old_name": ""
},
{
x: -1.2303964,
y: 32.1150479,
"osm_id": 401232144,
"place": "city",
"name": "Figuig",
"alt_name": "",
"old_name": ""
},
{
x: -4.4335952,
y: 31.9292779,
"osm_id": 406192860,
"place": "city",
"name": "Er Rachidia",
"alt_name": "",
"old_name": ""
},
{
x: -6.8140167,
y: 34.0448888,
"osm_id": 414081770,
"place": "city",
"name": "Salé",
"alt_name": "",
"old_name": ""
},
{
x: -5.3742776,
y: 35.570175,
"osm_id": 421432226,
"place": "city",
"name": "Tétouan",
"alt_name": "",
"old_name": ""
},
{
x: -7.9886083,
y: 31.6259901,
"osm_id": 508040941,
"place": "city",
"name": "Marrakech",
"alt_name": "",
"old_name": ""
},
{
x: -11.6645492,
y: 26.7435827,
"osm_id": 569755163,
"place": "city",
"name": "Smara",
"alt_name": "",
"old_name": ""
},
{
x: -6.152913,
y: 35.1952327,
"osm_id": 583022208,
"place": "city",
"name": "Larache",
"alt_name": "",
"old_name": ""
},
{
x: -9.084263,
y: 32.1082966,
"osm_id": 1039966988,
"place": "city",
"name": "Sebt Gzoula",
"alt_name": "",
"old_name": ""
},
{
x: -5.7114339,
y: 34.2264119,
"osm_id": 1052247758,
"place": "city",
"name": "Sidi Kacem",
"alt_name": "",
"old_name": ""
},
{
x: -5.8987235,
y: 34.9992176,
"osm_id": 1052364362,
"place": "city",
"name": "Ksar-el-Kebir",
"alt_name": "",
"old_name": ""
},
{
x: -7.6198672,
y: 33.0023969,
"osm_id": 1156264376,
"place": "city",
"name": "Settat",
"alt_name": "",
"old_name": ""
},
{
x: -7.9581313,
y: 32.2390335,
"osm_id": 1210857280,
"place": "city",
"name": "Benguerir",
"alt_name": "",
"old_name": ""
},
{
x: -6.3533346,
y: 32.3341927,
"osm_id": 1274095863,
"place": "city",
"name": "Beni Mellal",
"alt_name": "",
"old_name": ""
},
{
x: -7.5811465,
y: 33.2676746,
"osm_id": 1339097697,
"place": "city",
"name": "Berrechid",
"alt_name": "",
"old_name": ""
},
{
x: -6.0365451,
y: 35.4619276,
"osm_id": 1686960487,
"place": "city",
"name": "Assilah",
"alt_name": "",
"old_name": ""
},
{
x: -3.3910053,
y: 34.9769401,
"osm_id": 1725334403,
"place": "city",
"name": "Driouch",
"alt_name": "",
"old_name": ""
},
{
x: -6.5701685,
y: 34.2645699,
"osm_id": 1863747049,
"place": "city",
"name": "Kénitra",
"alt_name": "",
"old_name": "Port-Lyautey"
},
{
x: -5.8037921,
y: 35.7771029,
"osm_id": 1863747052,
"place": "city",
"name": "Tanger",
"alt_name": "",
"old_name": ""
},
{
x: -5.9272533,
y: 34.259878,
"osm_id": 1864970021,
"place": "city",
"name": "Sidi Slimane",
"alt_name": "",
"old_name": ""
},
{
x: -6.909238,
y: 32.8855082,
"osm_id": 1865094126,
"place": "city",
"name": "Khouribga",
"alt_name": "",
"old_name": ""
},
{
x: -6.5710543,
y: 32.8625036,
"osm_id": 1865117987,
"place": "city",
"name": "Oued Zem",
"alt_name": "",
"old_name": ""
},
{
x: -13.1953921,
y: 27.154512,
"osm_id": 1888261495,
"place": "city",
"name": "Laâyoune",
"alt_name": "",
"old_name": ""
},
{
x: -6.9238035,
y: 33.9171656,
"osm_id": 1954988722,
"place": "city",
"name": "Témara",
"alt_name": "",
"old_name": ""
},
{
x: -14.4843938,
y: 26.1272238,
"osm_id": 2090045902,
"place": "city",
"name": "Boujdour",
"alt_name": "Cap Boujdour",
"old_name": "Cabo Bojador"
},
{
x: -7.3893292,
y: 33.6958383,
"osm_id": 2622712708,
"place": "city",
"name": "Mohammédia",
"alt_name": "",
"old_name": "Fédala"
},
{
x: -2.8938247,
y: 34.4134375,
"osm_id": 2684455807,
"place": "city",
"name": "Taourirt",
"alt_name": "",
"old_name": ""
}
]
};
var icon01 = L.icon({
iconUrl: 'img/placeholder.png',
iconSize: [25, 25], // size of the icon
iconAnchor: [12, 12], // point of the icon which will correspond to marker's location
popupAnchor: [2, -25] // point from which the popup should open relative to the iconAnchor
});
for (var i = 0; i < cities.city.length; i++) {
// Create a local variable pointing to the
// coordinate pair object at index i in the resources array of objects
var currentCoordPair = cities.city[i];
// Construct a 2 item array containing the x and y values of the current object
var xyArray = [currentCoordPair.x, currentCoordPair.y];
// Create a new marker object just like you did before
var marker = L.marker(xyArray, {
icon: icon01
});
// Add the marker to the map
var addedMarker = marker.addTo(map);
// Bind your popup
addedMarker.bindPopup("Base");
}
Answer
Did you check if the markers appear somewhere else on earth and not in Morocco where you probably would expect them to be?
Because Leaflet requires the coordinates to be in the order Latitude, Longitude. See also the Leaflet documentation for this topic.
So changing the line
var xyArray = [currentCoordPair.x, currentCoordPair.y];
within you for loop to
var xyArray = [currentCoordPair.y, currentCoordPair.x];
solves your problem.
No comments:
Post a Comment