Leaflet Marker Popups

by knownasilya

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet-src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.9/leaflet.draw-src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.9/leaflet.draw.css">
<div id="map" style="width:500px;height:400px;"></div>

JavaScript

var map = L.map('map').setView([51.495, -0.09], 15);
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmLayer = new L.TileLayer(osmUrl, {
  maxZoom: 19,
  attribution: 'Map data © OpenStreetMap contributors'
});

map.addLayer(osmLayer);
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

//var marker1 = L.marker([51.497, -0.09],{title:"marker_1"}).addTo(map).bindPopup("Marker 1");
var drawPluginOptions = {
  position: 'topright',
  draw: {
    polyline: {
      shapeOptions: {
        color: '#f357a1',
        weight: 10
      }
    },
    polygon: {
      allowIntersection: false, // Restricts shapes to simple polygons
      drawError: {
        color: '#e1e100', // Color the shape will turn when intersects
        message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
      },
      shapeOptions: {
        color: '#bada55'
      }
    },
    circle: false, // Turns off this drawing tool
    rectangle: {
      shapeOptions: {
        clickable: false
      }
    },
    marker: {
    }
  },
  edit: {
    featureGroup: editableLayers, //REQUIRED!!
    remove: false
  }
};

// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw(drawPluginOptions);
map.addControl(drawControl);

var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
map.on('draw:created', function(e) {
  var type = e.layerType,
    layer = e.layer;

  editableLayers.addLayer(layer);
});

setTimeout(function () {
  /*
      // works
    	var latlng = new L.LatLng(51.497, -0.09);
    	marker1.fireEvent('click', {
      	latlng: latlng,
        layerPoint: map.latLngToLayerPoint(latlng),
    		containerPoint: map.latLngToContainerPoint(latlng)
      })

      // doesn't work
      var latlng2 = new L.LatLng(51.495, -0.083);
    	map.fireEvent('click', {
      	latlng: latlng2,
        layerPoint: map.latLngToLayerPoint(latlng2),
   ...