Leaflet DIVICON GROUP

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id='map'></div>

CSS

html, body {
		height: 100%;
		margin: 0;
}

#map {
    position: absolute;
		width: 100%;
		height: 100%;
    cursor: default;
}

#map div.pump {
  position: absolute;
   background: url("http://5.196.125.197/map/assets/img/markers/waterpump.png") no-repeat;
  cursor: default;
  width:50px;
  height:50px;
}

#map div.citiname {
  position: absolute;
  cursor: default;
}

#map div.citiname span {
  position: relative;
  white-space: nowrap;
  top: -0.5em;
  left: -50%;
  text-shadow: 1px 1px .5px #fff, -1px -1px .5px #fff, -1px 1px .5px #fff, 1px -1px .5px #fff;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  display: block;
  text-align: center
}

#map div.citiname span small:before {
  content: '\a';
  white-space: pre;
}

#map div.citiname span small {
  font-size: .9em;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff
}

#map div.citiname.light span {
  font-weight: 400;
  font-size: 14px;
  line-height: 14px
  visibility: visible;
}

#map div.citiname.medium span {
  font-weight: 700;
  font-size: 18px;
  line-height: 18px;
  visibility: visible;
}

#map div.citiname.heavy span {
  font-weight: 800;
  font-size: 20px;
  line-height: 20px;
  visibility: visible;
}

JavaScript

var dayz_staticUrl = 'http://static.dayzdb.com/';
 
  var b = .5859375 / 15.36,
        c = L.latLng([0, 0]);
        
    L.CRS.ChernarusPlusSatellite = L.Util.extend({}, L.CRS, {
        latLngToPoint: function(e, d) {
            var a = L.latLng([e.lat - c.lat, e.lng - c.lng]),
                a = this.projection.project(a),
                b = this.scale(d);
            return a = this.transformation._transform(a, b)
        },
        pointToLatLng: function(b, d) {
            var a = this.scale(d),
                a = this.transformation.untransform(b, a),
                a = this.projection.unproject(a);
            a.lat += c.lat;
            a.lng += c.lng;
            return a
        },
        projection: L.Projection.LonLat,
        transformation: new L.Transformation(b, 0, b, 0)
    })

	var pump = L.layerGroup();
  var citinameg = L.layerGroup();
  var citiname = [
    {12.8627, 6.72506,"<span>Chernogorsk<small>Черногорск</small></span>","citiname heavy",citiname},
    {13.2006, 10.3137,"<span>Elektrozavodsk<small>Электрозаводск</small></span>","citiname medium",citiname},
    {10.9905, 12.8025,"<span>Tulga<small>Тулга</small></span>","citiname hide",citiname},
    {9.02316, 13.3974,"<span>Solnichniy<small>Солнечный</small></span>","citiname medium",citiname},
    {6.26916, 12.014,"<span>Berezino<small>Березино</small></span>","citiname medium",citiname},
    {7.56633, 6.16901,"<span>Stary Sobor<small>Старый Собор</small></span>","citiname medium",citiname},
    {9.9386, 11.3338,"<span>Msta<small>Мста</small></span>","citiname hide",citiname},
    {9.97495, 10.2125,"<span>Staroye<small>Старое</small></span>","citiname hide",citiname},
    {8.7927, 9.72864,"<span>Shakhovka<small>Шаховка</small></span>","citiname hide",citiname},
    {8.72642, 11.2852,"<span>Dolina<small>Долина</small></span>","citiname hide",citiname},
    {8.17021, 12.131,"<span>Orlovets<small>Орловец</small></span>","citiname hide",citiname},
    {6.44562,...