Not really sure how to ask this, so I'll outline the scenario.

We have a database with locations in it. There are various types of cars at each location and each car has a problem of varying importance associated with it.

Some Sample Scenarios

Location A - has a Mercedes - With a Level 3 problem Location A - has a Ford - With a Level 1 problem. Location A - has a Toyota - With a Level 2 problem. Location B - has a Nissan - With a Level 3 problem.

Level 1 problems are the most severe, they get a red marker icon. Level 2 problems are severe but less so, an orange marker icon. Level 3 problems are not that bad, a yellow marker icon.

Marker icons for a location are selected by the highest priority problem at the location. i.e. Location A would have a red icon because the ford has a Level 1 problem. Location B would have a yellow icon because it only has a problem 3 there.

We have managers who are responsible for types. i.e. Manager 1 is responsible for Mercedes and Nissan vehicles.

So Manager 1 would like to select Mercedes and Nissan and see a Yellow icon at Location A and a Yellow icon at location B.

Manager 2 might select Ford and Toyota. He should see Red at location A and there shouldn't even be a marker at location B.

I'm using a simple OSM tile map and marker layers. I have a one marker layer for each type of car and that marker color is based on the highest priority, it works fine as long as they only select one layer at a time, if there's 2 selected, the icon for one type gets drawn over the icon for the previous type and the icon color is only representative of one type, not the highest priority of the types selected.

Currently, the data is loaded and the layers built via an AJAX call, what I would like to do is change the application to only have 1 marker layer but allow the user to select types and rebuilt it via AJAX call each time. Is there a way to do this? Ideally it would still work like the LayerSwitcher control. Is there a better way to go about solving this?

  • Can you also post the code that created the layer?
    – mfdev
    Aug 19 '13 at 10:36

If anyone is interested. I wound up just writing some javascript to hide the default layer checkbox, install my own check box with my events registered.

    layerSwitcher.layersDiv.lastChild.style.display = "none";
    loadTypes(); //loads all car types

    //This function handles the response from the loadTypes() call
function loadTypesResponse(response,ioArgs){
    var types = response; 

    for ( var i = 0; i < types.length; i++) {
        var theDiv = document.createElement("div");
        var c = "";
        if (types[i] == "FORD" || types[i] == "TOYOTA") {
            c = 'checked="checked"';
        theDiv.className = "dataLayersDiv";
        theDiv.innerHTML = '<input value="' + types[i] + '" ' + c + ' name="' + types[i] + '" id="chk' + types[i] + '" type="checkbox" onClick="typeChanged(this);"><label style="vertical-align: baseline;">' + types[i] + '</label><br>';


then my onclick event for refreshing the marker layer

function typeChanged(obj){
selectedTypes = [];
for(var i=0; i<checkBoxes.length; i++){
searchAllProblemStatus(); //ajax request to re add all markers and pop ups 


The code is a little ugly, I'll clean it up, but it works.


It would be better to use stylemap property of layer. You can dynamically create a style based on user input, then assign it to the layer. This way you can have more option than layer switcher.

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.