A Pen by akey.

index.html

<div id="mapArea"></div>

script.js

(function($)
{
  'use strict';

  // -------------------------------------------------------
  //  * * とりあえず変数
  // -------------------------------------------------------
  var areas = [
    {
      id: '1',
      url: 'https://yahoo.com',
      lat1: 35.689238,
      lng1: 139.687109,
      lat2: 35.729999,
      lng2: 139.717899
    },
    {
      id: '2',
      url: 'https://google.com',
      lat1: 35.697505,
      lng1: 139.582695,
      lat2: 35.706032,
      lng2: 139.717899
    }
  ];

  var styleSet1 = { color: "#333333", opacity: 1, fillOpacity: .2, weight: 2 };
  var styleSet2 = { color: "#333333", opacity: 1, fillOpacity: .6, weight: 2 };

  // -------------------------------------------------------

  /**
   * @class OSM
   */
  var OSM = function($dom, sizeObj) {
    this.$dom    = $dom;
    this.sizeObj = sizeObj;
    this.mapW    = sizeObj.width;
    this.mapH    = sizeObj.height;
    this.init.apply(this);
  };
  OSM.ID = 'akey.idonejem';
  OSM.DEFAULT_ZOOM = 13;
  OSM.prototype = {

    // マップの初期設定
    init: function() {

      // TODO: 抽出する
      var map = L.mapbox.map(this.$dom.attr('id'), OSM.ID);
      var layer = L.mapbox.tileLayer(OSM.ID);
      layer.addTo(map);

      layer.on('ready', function() {
        map.setZoom(OSM.DEFAULT_ZOOM);
        map.scrollWheelZoom.disable();
      });

      this.$dom.css(this.sizeObj);
      this.map = map;
    },

    // location に area を描画する
    addAreas: function(areas) {
      this.areas = new OSMArea(areas, this.map);
    }
  };


  /**
   * @class OSMArea
   */
  var OSMArea = function(areas, map) {
    this.rectangles = {};
    this.map = map;

    var _this = this;
    $.each(areas, function(index, area) {
      _this.createRectangle(area);

    });

    this.fitBounds(areas);
    this.attachEvent();
  };
  OSMArea.prototype = {

    // rectangle のマウスイベントを設定
    attachEvent: function() {
      $.each(this.rectangles, function(index, item) {
        $(item).on({
          'mouseover': function() {
            item.setStyle(styleSet2).bringToFront();
          },
          'mouseout': function() {
            item.setStyle(styleSet1).bringToBack();
          },
          'click': function() {
            window.location = item.url;
          }
        });
      });
    },

    fitBounds: function(areas) {
      var minLat = 90;
      var maxLat = 0;
      var minLng = 180;
      var maxLng = 0;

      $(areas).each(function(idx, area) {

        var lat1 = area.lat1;
        var lat2 = area.lat2;
        var lng1 = area.lng1;
        var lng2 = area.lng2;

        minLat = Math.min(minLat, lat1, lat2);
        maxLat = Math.max(maxLat, lat1, lat2);
        minLng = Math.min(minLng, lng1, lng2);
        maxLng = Math.max(maxLng, lng1, lng2);
      });

      var bounds = [[minLat, minLng], [maxLat, maxLng]];
      this.map.fitBounds(bounds);
    },

    // エリア領域をつくる
    createRectangle: function(area) {
      var southWest = L.latLng(area.lat1, area.lng1),
          northEast = L.latLng(area.lat2, area.lng2),
          bounds = L.latLngBounds(southWest, northEast);

      // エリアの領域を描画する
      this.rectangles[area.id] = L.rectangle(bounds, styleSet1);
      this.rectangles[area.id].url = area.url;
      this.rectangles[area.id].addTo(this.map);

      // エリア名のラベルをつける
      var label = L.DomUtil.create('div', 'label-overlay');
      this.map.getPanes().overlayPane.appendChild(label);
      $(label).text('エリア ' + area.id + 'の名前');

      this.map.on({
        'viewreset': function() {
          var pos = this.map.latLngToLayerPoint(southWest);
          // rectangle のボーダに合わせるために調整
          pos.x = pos.x - 1;
          L.DomUtil.setPosition(label, pos);
        },
        'zoomstart': function() {
          L.DomUtil.removeClass(label, 'init');
        },
        'zoomend': function() {
          L.DomUtil.addClass(label, 'init');
        }
      }, this);
    },
  };

  $(document).on({
    'ready': function() {
      var map = new OSM($('#mapArea'), { width: 800, height: 500 });
      map.addAreas(areas);
    }
  });

})(jQuery);

STUDY:-Mapbox.markdown

STUDY: Mapbox

A Pen by akey on CodePen.

License.

style.sass

@import "compass/css3"
.label-overlay
  position: absolute
  padding: 3px 7px
  background-color: #333
  color: white
  white-space: nowrap
  opacity: 0
  
  &.init
    opacity: 1