Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.css" rel="stylesheet" type="text/css" />
<script src="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet-src.js"></script>
  <meta charset="utf-8">
  <title>Leaflet JS Bin</title>
  <style>
    #map {
      width:600px;
      height:400px;
    }
  </style>
</head>
<body>
  <div id='map'></div>
​
​
​
  <script>
   
    
    // Create a 'static' map pane
    L.Map.addInitHook(function(){
      this.createPane('static');
      this.getPane('static').style.zIndex = 675;
    });
    
    // Define a custom layer class
    L.Layer.StaticOverlay = L.Layer.extend({
      onAdd: function(map) {
        this._map = map;
        
        var pane = map.getPane('static');
        this._container = L.DomUtil.create('div');
​
        pane.appendChild(this._container);
​
        // styling, content, etc
        this._container.style.background = 'white';
        this._container.style.width = '100px';
        this._container.style.height = '50px';
        this._container.innerHTML = 'Hi!'
​
​
        map.on('move zoom viewreset zoomend moveend', this._update, this);
        
        this._update();
      },
​
      onRemove: function(map) {
        L.DomUtil.remove(this._container);
        map.off('move zoom viewreset zoomend moveend', this._update, this);
      },
​
      _update: function() {
        // Calculate the offset of the top-left corner of the map, relative to
        // the [0,0] coordinate of the DOM container for the map's main pane
​
        var offset = map.containerPointToLayerPoint([0, 0]);
        
        // Add some offset so our overlay appears more or less in the middle of the map
        offset = offset.add([340, 220]);
        
        L.DomUtil.setPosition(this._container, offset);
​
      }
    });
    
    
    
    ////////////////////////////////////////////
    
    
    
    
    var myCenter = new L.LatLng(50.5, 30.51);
    var map = new L.Map('map', {center: myCenter, zoom: 15});
​
    var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
    }).addTo(map);
​
    var marker = new L.Marker(myCenter);
    map.addLayer(marker);
    marker.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>");
​
    
    var static = new L.Layer.StaticOverlay().addTo(map);
    
    
    
    
​
  </script>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers