Markers: Changing Icon Color for groups of markers

[Kevin Elmore]

Can someone briefly describe what I need to do to create multiple sets of markers that have a different color per set?

Basically I want to define the coordinates of a large set of markers first.  Then I want to choose markers from the large set to create subsets.  I've tried making layers from these subsets and then applied a different style to each subset layer.  The markers show up, but the colors are still the same, and i've specified them to be different.

Here's my code:

var alvarion2400points = {"type": "MultiPoint", "coordinates": [APL1, KAV1]};

var alvarion5800points = {"type": "MultiPoint", "coordinates": [KAW1, ARD1]};

//Define Styles

var alvarion2400style = {"color": "#ff7800","weight": 5,"opacity": 0.65};

var alvarion5800style = {"color": "#bf7800","weight": 5,"opacity": 0.65};

//Layer Definition, and adding data points and style

var alvarion2400layer = L.geoJson().addTo(map);

alvarion2400layer.addData(alvarion2400points, {style: alvarion2400style});

var alvarion5800layer = L.geoJson().addTo(map);

alvarion5800layer.addData(alvarion5800points, {style: alvarion5800style});

I was reading the section on pointToLayer, about how points don't behave like the other features.  But I can't figure out how to apply that function to a multipoint feature that i've already defined.

Thanks for your time

[Bryan McBride]

From a single geojson layer, you just have to loop through the features and call layer.setStyle() or layer.setIcon(), passing in the options you want. Something like this:

myGeoJSON.eachLayer(function (layer) { if (layer.feature.properties.name === "alvarion2400") { layer.setIcon(L.icon({ iconUrl: "path/myicon.png", iconSize: [24, 28], iconAnchor: [12, 28], popupAnchor: [0, -25] })) }; });

[Kevin Elmore]

Brian, I appreciate the response.  Can you help me find why this isn't working?  I have been writing in TextWrangler, and viewing in google chrome.  When the code doesn't work, it usually doesn't load the map at all.  There must be a better way to chase down errors.  Which compiler/editor should I use that has geoJSon abilities?  I tried Eclipse, but I don't see how that can check the geojson code as well.  Thanks again.

// Locations

var APL = ([-100, 50]);

var KAV = ([-101, 51]);

//Define Geometry

var alvarion2400points = {

"type": "MultiPoint", 

"coordinates": [APL, KAV], 

"properties": {

"name": "alvarion2400"

}

};

//Layer Definition, and adding data points and style

var alvarion2400layer = L.geoJson().addTo(map);

alvarion2400layer.addData(alvarion2400points);

alvarion2400layer.eachLayer(function (layer) {

    if (layer.feature.properties.name === "alvarion2400") {

        layer.setIcon(L.icon({

            iconUrl: "leaf-green.png",

[Arnie Shore]

For part of the debug process, here's an online editor I just found >>

http://www.jsoneditoronline.org/

AS

On 2/19/14, Kevin Elmore <kevina...@gmail.com> wrote:
> Brian, I appreciate the response. Can you help me find why this isn't
> working? I have been writing in TextWrangler, and viewing in google
> chrome. When the code doesn't work, it usually doesn't load the map at
> all. There must be a better way to chase down errors. Which
> compiler/editor should I use that has geoJSon abilities? I tried Eclipse,

> but I don't see how that can check the geojson code as well. Thanks again. ...

[Bryan McBride]

Kevin,

I would have to see the entire code, preferably live so I could help debug it. Try using the Chrome developer tools and the JavaScript console to see if there are any errors.

BRYAN

[Kevin Elmore]

Bryan,

I am going to basically start with a clean slate, as my code is full of lots of "test" code.  I appreciate the offer, and will take you up on that once I get things organized better.  

Thanks,

Kevin