code.nosvamosdetapas.com

I don’t like when a map is filled with markers covering all streets there. As there is no way to use vectorial icons for markers, I though I could write a sample which tries to emulate them.

So, we have the same icon in different sizes:

• : 8 pixels of width
• : 12 pixels of width
• : 16 pixels of width

Now, we only need to choose which icon we want depending on the zoom level. So, we’re going to add a callback function for zoom events:

GEvent.addListener(map, "zoomend", zoomCallback);

function zoomCallback() {
	document.getElementById("zoom").innerHTML = "Zoom: " + map.getZoom();
	initPoIs();
	showSelectedPois();
}

The initPoIs() method checks if some markers have been created previously, and then it updates them using the appropiate icon:

function initPoIs() {
  var blueIcon = new GIcon(G_DEFAULT_ICON);
  if (map.getZoom()>=16) {
    blueIcon.image = "http://.../mark16.png";
    blueIcon.iconSize = new GSize(16, 16);
    blueIcon.shadowSize = new GSize(30, 16);
    blueIcon.iconAnchor = new GPoint(3, 16);
    blueIcon.infoWindowAnchor = new GPoint(7, 2);
    blueIcon.infoShadowAnchor = new GPoint(14, 14);
  }
  else if (map.getZoom()>=14&&map.getZoom()<=15) {
    blueIcon.image = "http://.../mark12.png";
    blueIcon.iconSize = new GSize(12, 12);
    blueIcon.shadowSize = new GSize(20, 12);
    blueIcon.iconAnchor = new GPoint(5, 12);
    blueIcon.infoWindowAnchor = new GPoint(5, 2);
    blueIcon.infoShadowAnchor = new GPoint(10, 10);
  }
  else {
    blueIcon.image = "http://.../mark8.png";
    blueIcon.iconSize = new GSize(8, 8);
    blueIcon.shadowSize = new GSize(14, 8);
    blueIcon.iconAnchor = new GPoint(3, 8);
    blueIcon.infoWindowAnchor = new GPoint(3, 2);
    blueIcon.infoShadowAnchor = new GPoint(6, 6);
  }

  markerOptions = { icon:blueIcon };

  for (var i=0; i < pois.length; i++) {
    map.removeOverlay(pois[i]);
  }
  for (var i=0; i < poisinfo.length; i++) {
    pois[i]=new GMarker(new GLatLng(poisinfo[i][0],poisinfo[i][1]), markerOptions);
  }

}

And, the showSelectedPois() method adds markers to the pois array in the map:

function showSelectedPois() {
  for (var i=0; i < pois.length && overlay; i++) {
    var item=pois[i].getLatLng();
    if (overlay.getBounds().containsLatLng(item)) {
      map.addOverlay(pois[i]);
    }
  }
}

You can try this example or download the code!

Bookmark It