Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
var StoneCairn = L.icon({ //Adding the StoneCairn icon
iconUrl: 'StoneCairn.png',
iconSize: [22, 30], // size of the icon
iconAnchor: [11, 15], // point of the icon which will correspond to marker's location
popupAnchor: [0, -15] // point from which the popup should open relative to the iconAnchor
});
var map = L.map('map', {
crs: L.CRS.Simple,
minZoom: -3
});
var yx = L.latLng;
var xy = function(x, y) {
if (L.Util.isArray(x)) {
return yx(x[1], x[0]);
}
return yx(y, x);
};
var bounds = [xy(0, 0), xy(2048, 2048)]; //set image size
var image = L.imageOverlay('PleasantValley.png', bounds).addTo(map); //map.jpg is the map file
//Add market to map, coords in first parenthesis
L.marker([1200, 1200], {icon: StoneCairn}).addTo(map).bindPopup(L.popup({minWidth:300, maxWidth:300}).setContent( //Info for marker
'<img src="C18.jpg" alt="" width="300" height="169">'+ //Img file
'<h1>#18 - ALEX "DANDA" VALERO</h1> <h3>'+ //Number and author
'<em>"I promised her wed build our house here".</em>'+ //Flavor text
'</h3> On a small stone next to the river')); //Directions to loadtion
//Alternative method of pins
//Location
var Javin = xy(1000, 1000);
//Info
var one = L.popup({minWidth:300, maxWidth:300}).setContent('<img src="StoneCairn.png" alt="" width="200" height="200" style="float:left;"> <h1>#999</h1> </br> <h2>AUTHOR</h2> </br><h5><em>DESCRIPTION</em></h5> </br> LOCATION');
//Attach to map
L.marker(Javin, {icon: StoneCairn}).addTo(map).bindPopup(one);
//Template for line between coords
//var travel = L.polyline([A, B]).addTo(map);
map.setView(xy(1024, 1024), 0.1); //start koordinater