Converting JSON values to an array

Question

I working with leaflet maps and html5 geolocation. I have a view that receives coords from a node.js server and adds markers for each unique id and updates their positions as new coords come in. I'm storing the marker objects in an object, the IDs as the keys, the markers as the values. So the markers object looks like this when tracking two devices:

Object {qwpW9K0L1OtOhsV3CF0G: e, syeQs_oH7s8z8f0UCF0I: e}

Where the e is an actual marker.

The problem I'm working on is that the leaflet api likes to receive arrays of data. For example, I'd like to fit the map view bounds to the markers using a feature group and map.fitBounds(...). So i'm iterating through the object and pushing the markers into a new array and updating the map bounds every time a new marker is created or new coords come in and it seems extremely inefficient and just plain the wrong way to do it.

Complete socket.io code block I'm working on:

socket.on('markerCoords', function(data) {
    var markerGroup = [];
    if(data.id in markers) {
        markers[data.id].setLatLng([data.data.latitude, data.data.longitude]);
        $.each(markers, function(i, e) {
            markerGroup.push(e);
        });
        var group = new L.featureGroup(markerGroup);
        map.fitBounds(group.getBounds().pad(0.5));
    } else {
        var marker = L.marker([data.data.latitude, data.data.longitude], {"title": data.id, "draggable": true}).addTo(map);
        markers[data.id] = marker;
        $.each(markers, function(i, e) {
            markerGroup.push(e);
        });
        var group = new L.featureGroup(markerGroup);
        map.fitBounds(group.getBounds().pad(1.0));
   }
});

This doesn't seem to have anything to do with JSON.

Felix Kling
– Felix Kling

2014-02-19 06:36:52 +00:00
Commented Feb 19, 2014 at 6:36 — Felix Kling
– Felix Kling, Commented Feb 19, 2014 at 6:36

Felix Kling · Accepted Answer · 2014-02-19 06:43:24Z

2

Looks like one possible solution is to simply create the feature group only once and updated it when necessary:

var group = new L.featureGroup();

socket.on('markerCoords', function(data) {
    var markerGroup = [];
    if(data.id in markers) {
        markers[data.id].setLatLng([data.data.latitude, data.data.longitude]);
        map.fitBounds(group.getBounds().pad(0.5));
    } else {
        markers[data.id] = L.marker(
            [data.data.latitude, data.data.longitude],
            {"title": data.id, "draggable": true}
        ).addTo(map);

        group.addLayer(markers[data.id]);
        map.fitBounds(group.getBounds().pad(1.0));
    }
});

You could probably also just add the group to the map once on startup, not every marker individually.

answered Feb 19, 2014 at 6:43

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jake Sellers Over a year ago

Just made your edits and its working smooth. Code looks much cleaner and should probably run better with many users. Thanks again.

Felix Kling Over a year ago

You're welcome! I assume that getBounds will still use most of the runtime, so that wouldn't change, but at least you are not creating a new array and group every time, which would have gotten slower each time.

Collectives™ on Stack Overflow

Converting JSON values to an array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related