0

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 © <a href="https://openstreetmap.org">OpenStreetMap</a> 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");

}
2

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.

  • this was exaclty the real problem. Thanks for your answer – zakaria mouqcit Jun 22 '17 at 9:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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