leaflet-playground

by dzul1983

HTML

<script src="https://unpkg.com/jquery@latest/dist/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.4.5/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/L.PixiOverlay.min.js"></script>
<div class="map"></div>

CSS

.map {
  width: 100%;
  height: 480px;
}

JavaScript

const duesseldorf = L.latLng(51.2277, 6.7735);
const osm = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

const map = L.map($('.map')[0], {
  center: duesseldorf,
  zoom: 13,
  layers: [osm]
});

map.addLayer(L.marker(duesseldorf));
map.on('click', e => {
  alert('clicked map')
});

var pixiOverlay = L.pixiOverlay(function(utils) {
  // your drawing code here
}, new PIXI.Container());

pixiOverlay.addTo(map);