request: add the possibility to add more than 1 ruler to the map about google-maps-ruler

[alexcheng1982]

I think this is a good feature. The only issue is that we can only allow one active ruler at the same time, otherwise we don't know which ruler should the new point be added to. So we also need a way to reactive previous rulers. A typical flow may be:

1. Default ruler is added to the map.
2. User adds new points to current ruler.
3. Create a new ruler and make it active. New points will be added to this ruler.
4. If user wants to update previous ruler, we need the user to specify which ruler to use, possibly add ID or name to the ruler, or select a point in the ruler?

[smolleyes]

hi

yes, that s what i think too

i copied the gmruler object as gmruler2 for exemple and used the bind() function on it so it add a new ruler juste fine but then the first gmruler is unusable

let me know if you need some tests/help :)

[smolleyes]

hello

nothing new on this feature :) ?

thanks

[alexcheng1982]

I added the new API to support multiple rulers. After gmruler is initialised to the map, use gmruler.add(name, options) to add a new ruler. Ruler can be activated using gmruler.activate(name). See the updated README file and example file for details.

[smolleyes]

hi

great ! i LL try this asap :) thanks

[smolleyes]

hello

trying the update now

it works well but not very user friendly for the moment :)

here s how i used it (with jquery / bootstrap and font awesome...)

my js :

// .... load the map ..... then

gmruler.init(map);

function clearMapRulers() {
  gmruler.removeAll();
}

function addRuler() {
  var color = "#" + Math.random().toString(16).slice(2, 8);
  var rulerOptions = {
    distanceUnit: 'km',
    strokeWeight : 5,
    strokeColor: color
  };
  var name = generateUUID();
  if (name) {
    gmruler.add(name, rulerOptions);
  }
}

function generateUUID() {
  var d = new Date().getTime();
  var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = (d + Math.random()*16)%16 | 0;
      d = Math.floor(d/16);
      return (c=='x' ? r : (r&0x3|0x8)).toString(16);
  });
  return uuid;
};

$(document).on('click','.activateRulerBtn',function(e) {
  e.preventDefault()
  var name = $(this).attr('data-id')
  if (name) {
    gmruler.activate(name);
    console.log("ruler "+name+" activated")
  }
});

$(document).on('click','.removeRulerBtn',function(e) {
  e.preventDefault()
  var name = $(this).attr('data-id')
  if (name) {
    gmruler.remove(name);
    console.log("ruler "+name+" removed")
  }
});

in the html i just have 2 buttons

<div id="toolbar">
        <button class="btn btn-default" onclick="addRuler()">Ajouter une règle</button>
        <button class="btn btn-default" onclick="clearMapRulers()">Supprimer toutes les règles</button>
</div>

the css

.rulerBtn {
  border-radius: 0px !important;
  width: 20px;
  height: 20px;
}

.rulerBtnIcon {
  position: relative;
  top: -0.35em;
  left: -0.35em;
}

and i just changed one function in your code (not very clean.... :p )

LabelOverlay.prototype.updateDistance = function() {
    var markup;
    markup = (function() {
      switch (this.options.distanceUnit) {
        case 'mile':
          return (this.distance * 0.000621371).toFixed(2) + ' mile(s)';
        default:
          return (this.distance / 1000).toFixed(2) + ' km';
      }
    }).call(this);
    return this.container.innerHTML = this.distance > 0 ? markup : this.distance === 0 ? 'Start <div><button data-id="'+this.observer.name+'" class="btn btn-sm btn-success rulerBtn activateRulerBtn" title="activate"><i class="fa fa-check-square-o rulerBtnIcon"></i></button><button data-id="'+this.observer.name+'" class="btn btn-sm btn-danger rulerBtn removeRulerBtn" title="remove"><i class="fa fa-trash rulerBtnIcon"></i></button></div>' : '';
  };

so we have one color for each ruler, then above the "start" 2 buttons each time one to activate the ruler and one to remove it :)

let me know what you think about it

thanks again !

[smolleyes]

i think it s better to add the first point thru the add new ruler button and show it directly centered on the map then use the right click event for the other points :) (that s what i made)

[alexcheng1982]

Closing #2