Leaflet Minimal Test

by sszilvasi

HTML

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

CSS

#map { 
    height: 600px; 
}

JavaScript

var yx = L.latLng;

var xy = function(x, y) {
    if (L.Util.isArray(x)) {
        return yx(x[1], x[0]);
    }
    return yx(y, x);
};

// create the map
var map = L.map('map', {
center: [0.5, 0.5],
    /* zoom: 10, */
    crs: L.CRS.Simple
});

// create the image
var imageUrl = 'http://blackicemedia.com/presentations/2013-02-hires/img/awesome_tiger.svg',
    imageBounds = [[0, 0], [1, 1]];
    
L.imageOverlay(imageUrl, imageBounds).addTo(map);

var sol = L.latLng([ 0.0, 0.0 ]);
L.marker(sol).addTo(map);

var m = L.marker(L.latLng([0.0, 1.0])).addTo(map);

var polygon = L.polygon([
    xy([0.19, 0.08]),
    xy([0.03, 0.06]),
    xy([0.20, 0.047])
]).addTo(map);

var circle = L.circle([0.5, 0.5], 0.3, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);

circle.bindPopup("I am a circle.");
m.bindPopup("I am a marker.")

var popup = L.popup();

function onMapClick(e) {
    popup.setLatLng(e.latlng)
         .setContent("You clicked the map at " + e.latlng.toString())
         .openOn(map);
}

/* map.on('click', onMapClick); */

map.fitBounds(imageBounds)