JSFiddle - React, Tailwind, and code Playground

by Justin Maat

HTML

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

CSS

#mapid { height: 280px; }

JavaScript

var mymap = L.map('mapid').setView(new L.LatLng(-23.550520, -46.633309), 8);
var tl = L.tileLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
        maxZoom: 18
    });

tl.addTo(mymap)

L.svg().addTo(mymap)

L.Map.include({

    _createElement: function (name) {
        return document.createElementNS(L.Path.SVG_NS, name);
    },

    addStripesPattern: function () {
//from http://jsfiddle.net/brunolellis/K5scK/
//        this._initPathRoot();
				var _container = this.getRenderer(this)._container
        this._defRoot = this._createElement('defs');

        var pattern = this._createElement('pattern');
        console.log('pattern', pattern)
        pattern.setAttribute('id', 'p1');
        pattern.setAttribute('patternUnits', 'userSpaceOnUse');
        pattern.setAttribute('width', '25');
        pattern.setAttribute('height', '25');

        var xlinkns = 'http://www.w3.org/1999/xlink';

        var pimage = this._createElement('image');
        pimage.setAttributeNS(xlinkns, 'xlink:href', 'http://www.binaryturf.com/myfiles/stripegen/sgen.php?f=10&s=15&c1=00b0d9&t=0&c2=ffffff');
        pimage.setAttribute('x', '0');
        pimage.setAttribute('y', '0');
        pimage.setAttribute('width', '25');
        pimage.setAttribute('height', '25');

			console.log('pimage', pimage)
        pattern.appendChild(pimage);
        console.log('_defRoot', this._defRoot);

			this._defRoot.appendChild(pattern);

				_container.appendChild(this._defRoot);
//        this._pathRoot.appendChild(_svgDefs);

    }

});



//////
mymap.addStripesPattern();

L.polygon([
    [-23.427089, -46.903848],
    [-23.427089, -46.230935],
    [-23.755561, -46.230935],
    [-23.755561, -46.903848]
], {

}).addTo(mymap);