Basic map with Leaflet.js and OpenStreetMap

Leaflet is an an open-source JavaScript library for mobile-friendly interactive maps http://leafletjs.com/ Here data is provided by OpenStreetMap

by kzima

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.2.0/svg.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
<div id="map"></div>
<script>
L.Map.prototype.__latLngToLayerPoint = function (latlng) { // (LatLng)
    var projectedPoint = this.project(L.latLng(latlng));//._round();
    return projectedPoint._subtract(this.getPixelOrigin());
};

L.Map.prototype.___getNewPixelOrigin = function (center, zoom) {
    var viewHalf = this.getSize()._divideBy(2);
    return this.project(center, zoom)._subtract(viewHalf)._add(this._getMapPanePos());//._round();
};
// -- from leaflet 1.0 to get this working right on  v 0.7 too
L.Map.prototype.__getZoomScale = function (toZoom, fromZoom) {
    var crs = this.options.crs;
    fromZoom = fromZoom === undefined ? this._zoom : fromZoom;
    return crs.scale(toZoom) / crs.scale(fromZoom);
};


L.SVGScaleOverlay = L.Class.extend({
    options: {
        pane: 'overlayPane',
        nonBubblingEvents: [],  // Array of events that should not be bubbled to DOM parents (like the map)
        // how much to extend the clip area around the map view (relative to its size)
        // e.g. 0.1 would be 10% of map view in each direction; defaults to clip with the map view
        padding: 0
    },

    isLeafletVersion1: function () {
        return L.Layer ? true : false;
    },
    initialize: function (options) {
        L.setOptions(this, options);
        L.stamp(this);
    },

    // ----------------------------------------------------------------------------------
    getScaleDiff:function(zoom) {
        var zoomDiff = this._groundZoom - zoom;
        var scale = (zoomDiff < 0 ?...

CSS

#map {
  height: 400px;
  width: 400px;
  border: 1px sold #ccc;
}

JavaScript

// center of the map
var center = [-33.8650, 151.2094];

// Create the map
/* var map = L.map('map', {renderer: L.canvas(), preferCanvas: true}).setView(center, 3);
var myRenderer = L.canvas({ padding: 0.5 });
var line = L.polyline( center, { renderer: myRenderer } );

// Set up the OSM layer
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map);

// add a marker in the given location
L.marker(center).addTo(map);  */

  var lmap = new  L.map('map').setView([50.00, 14.44], 9)
                        .addLayer(L.tileLayer("http://{s}.sm.mapstack.stamen.com/(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/{z}/{x}/{y}.png"));
            var circles;
            var svgOverlay = L.SvgScaleOverlay();
            var radius = 3;
 
           
            //------------------------------------------------------------
            svgOverlay.onInitData = function () {
            this._svg.id = "drawing";
            SVG.prepare();
            var draw = SVG.get("drawing");
            window.rect = draw.rect(100, 100);
            var myGroup=mySVG.group()

myGroup.add(rect)
                /* if (!circles) {
                    var g = d3.select(this._g);
                    circles = g.selectAll("circle")
                                    .data(data)
                                    .enter().append('circle');
                    // -- opacity based on grouping optimization in point data
                    circles.style("fill-opacity", 0.8);
                    circles.style("fill", "rgba(255,116,116, 0.5)")
                }
                
                
                circles.each(function (d) {
                    var elem = d3.select(this);
                    var point = lmap.project(L.latLng(new L.LatLng(d[0], d[1])))._subtract(lmap.getPixelOrigin());
                    //var point = lmap.latLngToLayerPoint(new L.LatLng(d.geometry.coordinates[1], d.geometry.coordinates[0]));
               ...