113 lines
3.9 KiB
HTML
113 lines
3.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>L.CanvasIcon</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/>
|
||
|
|
<style type="text/css">
|
||
|
|
body {
|
||
|
|
margin:0;
|
||
|
|
padding:0 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
#description {
|
||
|
|
font-style:italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
#map {
|
||
|
|
top:120px;
|
||
|
|
bottom:0;
|
||
|
|
left:0;
|
||
|
|
right:0;
|
||
|
|
position:absolute;
|
||
|
|
background:#fff;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1><a href="http://github.com/sashakavun/leaflet-canvasicon">L.CanvasIcon</a></h1>
|
||
|
|
<p><em>Canvas Icon plugin for Leaflet library.</em> Check out <a href="https://github.com/sashakavun/leaflet-canvasicon">code</a>.</p>
|
||
|
|
<div id="map"></div>
|
||
|
|
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet-src.js"></script>
|
||
|
|
<script type="text/javascript" src="leaflet-canvasicon.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
(function () {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var map = L.map('map', {
|
||
|
|
zoom: 12,
|
||
|
|
center: [37.7630, -122.4435]
|
||
|
|
});
|
||
|
|
|
||
|
|
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright\">OpenStreetMap</a> contributors' }).addTo(map);
|
||
|
|
|
||
|
|
L.marker(
|
||
|
|
L.latLng([37.7930, -122.4035]),
|
||
|
|
{
|
||
|
|
icon: L.canvasIcon({
|
||
|
|
iconSize: [50, 50],
|
||
|
|
iconAnchor: [25, 25],
|
||
|
|
fillStyle: 'rgba(255,0,0,.5)',
|
||
|
|
drawIcon: function (icon, type) {
|
||
|
|
if (type == 'icon') {
|
||
|
|
var ctx = icon.getContext('2d');
|
||
|
|
var size = L.point(this.options.iconSize);
|
||
|
|
var center = L.point(Math.floor(size.x / 2), Math.floor(size.y / 2));
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(center.x, center.y, Math.min(center.x, center.y), 0, 2 * Math.PI);
|
||
|
|
ctx.fillStyle = this.options.fillStyle;
|
||
|
|
ctx.fill();
|
||
|
|
ctx.closePath();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
).bindPopup('I have a popup!').addTo(map).openPopup();
|
||
|
|
|
||
|
|
L.SquareIcon = L.CanvasIcon.extend({
|
||
|
|
options: {
|
||
|
|
iconSize: [70, 70],
|
||
|
|
iconAnchor: [35, 35]
|
||
|
|
},
|
||
|
|
_setIconStyles: function (icon, type) {
|
||
|
|
if (type == 'icon') {
|
||
|
|
var ctx = icon.getContext('2d');
|
||
|
|
var size = L.point(this.options.iconSize);
|
||
|
|
var center = L.point(Math.floor(size.x / 2), Math.floor(size.y / 2));
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(0, 0);
|
||
|
|
ctx.lineTo(size.x, 0);
|
||
|
|
ctx.lineTo(center.x, center.y);
|
||
|
|
ctx.lineTo(size.x, size.y);
|
||
|
|
ctx.lineTo(0, size.y);
|
||
|
|
ctx.lineTo(center.x, center.y);
|
||
|
|
ctx.lineTo(0, 0);
|
||
|
|
ctx.fillStyle = 'rgba(0,255,0,.5)';
|
||
|
|
ctx.fill();
|
||
|
|
ctx.closePath();
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(0, 0);
|
||
|
|
ctx.lineTo(0, size.y);
|
||
|
|
ctx.lineTo(center.x, center.y);
|
||
|
|
ctx.lineTo(size.x, size.y);
|
||
|
|
ctx.lineTo(size.x, 0);
|
||
|
|
ctx.lineTo(center.x, center.y);
|
||
|
|
ctx.lineTo(0, 0);
|
||
|
|
ctx.fillStyle = 'yellow';
|
||
|
|
ctx.fill();
|
||
|
|
ctx.closePath();
|
||
|
|
}
|
||
|
|
L.CanvasIcon.prototype._setIconStyles.apply(this, arguments);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
L.marker(L.latLng([37.683, -122.4536]))
|
||
|
|
.setIcon(new L.SquareIcon())
|
||
|
|
.bindPopup('I have nice popup too!')
|
||
|
|
.addTo(map);
|
||
|
|
|
||
|
|
}());
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|