2

I am building an ASP.NET Core application using Leaflet.js library. On the map I would like to show containers(used for transferring building materials) as markers. These containers can have different statuses: take-able, old, normal

What I want to do is to show different marker-icon on the map for each status, correspondingly. Let's see how far I could get:

function initMap(containers) {
    window.map = L.map('map', {
        center: [46.6726, 21.0856],
        zoom: 13,
        layers: [
            buildLayerGroupWithContainers(containers)]
    });

    L.tileLayer('http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
}

function buildLayerGroupWithContainers(containersInRawJSON) {
    var containerMarkers = [];
    var containersInJSON = JSON.parse(containersInRawJSON.replace(/&quot;/g, '"'));

    for (index = 0; index < containersInJSON.length; ++index) {
        var container = containersInJSON[index];
        if (container.IsTakeable) {
            containerMarkers[index] = buildMarker(container, takeableContainerIcon);
            alert("this is takeable: " + index);
        } else if (container.IsOld) {
            containerMarkers[index] = buildMarker(container, oldContainerIcon);
            alert("this is old: " +index);
        } else {
            containerMarkers[index] = buildMarker(container, containerIcon);
            alert("this is normal: " + index);
        }
    }

    return L.layerGroup(containerMarkers);
}

function buildMarker(container, cIcon) {
    return L.marker([container.Location.Latitude, container.Location.Longitude], { icon: cIcon })
        .bindPopup(
        "<span class=\"popupTitle\">Konténer info: </span></br>" +
        "Id: " + container.CompoundId + "</br>" +
        "Tipus: " + container.Type + "</br>" +
        "Lerakás dátuma: " + container.LayDownDate + "</br>" +
        "Lerakta: " + container.LayedDownBy + "</br>" +
        "Tel.: " + container.PhoneNumber + "</br>" +
        "Megjegyzés: " + container.Others + "</br>" +
        "Öreg-e: " + container.IsOld + "</br>");
}

First of all you can see that there is a containersInJSON array. These containers come from the ASP.NET application, and the properties are set in C# code. So every property is set up properly. In the for-loop firstly I check whether the container is takeable. If so, I build a marker for it with the corresponding container-icon. If it is not take-able, I check of it is old. If so I set the appropriate container-icon. If not, I build a marker with normal icon. The setup of my markers are the followings:

var containerIcon = L.icon({
    iconUrl: '../images/markers/container.png',
    iconSize: [42, 42], 
});

var takeableContainerIcon = L.icon({
    iconUrl: '../images/markers/container-with-green-flag.png',
    iconSize: [42, 42],
});

var oldContainerIcon = L.icon({
    iconUrl: '../images/markers/container-with-red-flag.png',
    iconSize: [42, 42],
});

Well, everything seems fine. But on the map, al the markers have the "takeableContainerIcon" marker-icon. At this point I was wondering of maybe my containers from c# are wrongly set. So that's why I put some alert methods after each marker-building, so for debugging purposes. The following line:

alert("this is old: " +index);

..is invoked once, which is the expected result. I have namely 12 containers, 11 are takeable and only one is old. But despite it, I can see only markers with takeableContainerIcon, and even the old marker is shown with takeableContainerIcon which is really interesting.

I could not get further.

  • Is the site publicly accessible? That would make it easier to track down. – Josiah Jun 8 '17 at 18:29
  • I haven't seen a working example of initiating a geojson layerGroup in the map declaration. Usually you declare the map, then declare the layerGroup, then add it to the map. I think it is recommended to follow the leafletjs geojson example – NettaB Jun 11 '17 at 10:37
  • Hey. Sorry for the late response, I was on holiday. Well, the site is not publicly accessible. Today I tried to make everything from sketch, removed every entry from the database, wrote again the same code and now it works. I have really no idea what was happening. Maybe something was wrong with my db data, but I am not sure about it Thanks anyway for the comments. Cheers! – mirind4 Jun 26 '17 at 17:13

Your Answer

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

Browse other questions tagged or ask your own question.