Mojolicious-Plugin-Leafletjs
view release on metacpan or search on metacpan
Revision history for Mojolicious-Plugin-Leafletjs
0.004 2013-09-05 21:56:39 EDT
- Dont sanitize popup messages to allow for HTML
- fix missing semicolon in bindPopup
- Update deps list in cpanfile
0.003 2013-09-05 00:18:27 EDT
- Add circles
0.002 2013-09-04 23:03:23 EDT
- Add popups
0.001 2013-09-04 22:31:24 EDT
- Initial release
- Supports creating a map
- Supports adding markers
# In your template
<%= leaflet {
name => 'map1',
latitude => '35.9239',
longitude => '-78.4611',
zoomLevel => 18,
markers => [
{ name => 'marker1',
latitude => '35.9239',
longitude => '-78.4611',
popup => 'A new message tada!',
},
{ name => 'marker2',
latitude => '35.9235',
longitude => '-78.4610',
popup => 'A second popup here!',
}
],
}
%>
DESCRIPTION
Mojolicious::Plugin::Leafletjs is helpers for integrating simple maps
via leafletjs
HELPERS
name
Marker name
longitude
Longitude
latitude
Latitude
popup
A popup message
circles
Array of hashes containing the following key/value
name
Name of circle variable
longitude
longitude
eg/simple_map.pl view on Meta::CPAN
my $self = shift;
$self->render('index');
};
app->start;
__DATA__
@@ index.html.ep
% layout 'default';
% title 'Welcome';
<div><h1>Showing a simple map with markers, popups, and circles!</h1></div>
<div id="map"></div>
<%= leaflet {
name => 'map1',
latitude => '35.9239',
longitude => '-78.4611',
zoomLevel => 16,
markers => [
{ name => 'marker1',
latitude => '35.9239',
longitude => '-78.4611',
popup => '<h3>Header</h3>A new message tada!',
},
{ name => 'marker2',
latitude => '35.9235',
longitude => '-78.4610',
popup => 'A second popup here!',
}
],
circles => [
{ name => 'circly',
longitude => '-78.4611',
latitude => '35.9239',
color => 'red',
fillColor => '#f03',
fillOpacity => 0.5,
radius => 500,
lib/Mojolicious/Plugin/Leafletjs.pm view on Meta::CPAN
attribution =>
'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
. '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, '
. 'Imagery © <a href="http://cloudmade.com">CloudMade</a>',
markers => [
# Example
# { name => 'Stubby',
# longitude => undef,
# latitude => undef,
# popup => 'A new message here.',
# }
],
circles => [
# Example:
# { name => 'circly',
# longitude => undef,
# latitude => undef,
# color => 'red',
# fillColor => '#f03',
lib/Mojolicious/Plugin/Leafletjs.pm view on Meta::CPAN
%= javascript begin
var <%= $attrs->{name} %> = L.map('<%= $attrs->{cssid} %>').setView([<%= $attrs->{latitude} %>, <%= $attrs->{longitude} %>], <%= $attrs->{zoomLevel} %>);
L.tileLayer('<%= $attrs->{tileLayer} %>', {
maxZoom: <%= $attrs->{maxZoom} %>,
attribution: '<%== $attrs->{attribution} %>'
}).addTo(<%= $attrs->{name} %>);
% if (scalar @{$attrs->{markers}} > 0) {
% foreach my $marker (@{$attrs->{markers}}) {
var <%= $marker->{name} %> = L.marker([<%= $marker->{latitude} %>, <%= $marker->{longitude} %>]).addTo(<%= $attrs->{name} %>);
% if ($marker->{popup}) {
<%= $marker->{name} %>.bindPopup("<%== $marker->{popup} %>");
% }
% }
% }
% if (scalar @{$attrs->{circles}} > 0) {
% foreach my $circle (@{$attrs->{circles}}) {
var <%= $circle->{name} %> = L.circle([<%= $circle->{latitude} %>, <%= $circle->{longitude} %>], <%= $circle->{radius} %>, {
color: '<%= $circle->{color} %>',
fillColor: '<%= $circle->{fillColor} %>',
fillOpacity: <%= $circle->{fillOpacity} %>
lib/Mojolicious/Plugin/Leafletjs.pm view on Meta::CPAN
# In your template
<%= leaflet {
name => 'map1',
latitude => '35.9239',
longitude => '-78.4611',
zoomLevel => 18,
markers => [
{ name => 'marker1',
latitude => '35.9239',
longitude => '-78.4611',
popup => 'A new message tada!',
},
{ name => 'marker2',
latitude => '35.9235',
longitude => '-78.4610',
popup => 'A second popup here!',
}
],
}
%>
=head1 DESCRIPTION
Mojolicious::Plugin::Leafletjs is helpers for integrating simple maps via leafletjs
=head1 HELPERS
lib/Mojolicious/Plugin/Leafletjs.pm view on Meta::CPAN
Marker name
=item longitude
Longitude
=item latitude
Latitude
=item popup
A popup message
=back
=item circles
Array of hashes containing the following key/value
=over
=item name
share/public/leaflet.css view on Meta::CPAN
.leaflet-map-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-pane,
.leaflet-tile-container,
.leaflet-overlay-pane,
.leaflet-shadow-pane,
.leaflet-marker-pane,
.leaflet-popup-pane,
.leaflet-overlay-pane svg,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
.leaflet-container {
overflow: hidden;
share/public/leaflet.css view on Meta::CPAN
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
-moz-user-select: none;
}
.leaflet-tile-pane { z-index: 2; }
.leaflet-objects-pane { z-index: 3; }
.leaflet-overlay-pane { z-index: 4; }
.leaflet-shadow-pane { z-index: 5; }
.leaflet-marker-pane { z-index: 6; }
.leaflet-popup-pane { z-index: 7; }
/* control positioning */
.leaflet-control {
position: relative;
z-index: 7;
pointer-events: auto;
}
.leaflet-top,
share/public/leaflet.css view on Meta::CPAN
margin-left: 10px;
}
.leaflet-right .leaflet-control {
margin-right: 10px;
}
/* zoom and fade animations */
.leaflet-fade-anim .leaflet-tile,
.leaflet-fade-anim .leaflet-popup {
opacity: 0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-tile-loaded,
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
opacity: 1;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
-o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1);
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
}
.leaflet-zoom-anim .leaflet-tile,
share/public/leaflet.css view on Meta::CPAN
/* cursors */
.leaflet-clickable {
cursor: pointer;
}
.leaflet-container {
cursor: -webkit-grab;
cursor: -moz-grab;
}
.leaflet-popup-pane,
.leaflet-control {
cursor: auto;
}
.leaflet-dragging,
.leaflet-dragging .leaflet-clickable,
.leaflet-dragging .leaflet-container {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
}
share/public/leaflet.css view on Meta::CPAN
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
border: 4px solid rgba(0,0,0,0.3);
}
/* popup */
.leaflet-popup {
position: absolute;
text-align: center;
}
.leaflet-popup-content-wrapper {
padding: 1px;
text-align: left;
-webkit-border-radius: 12px;
border-radius: 12px;
}
.leaflet-popup-content {
margin: 13px 19px;
line-height: 1.4;
}
.leaflet-popup-content p {
margin: 18px 0;
}
.leaflet-popup-tip-container {
margin: 0 auto;
width: 40px;
height: 20px;
position: relative;
overflow: hidden;
}
.leaflet-popup-tip {
width: 17px;
height: 17px;
padding: 1px;
margin: -10px auto 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
background: white;
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
padding: 4px 4px 0 0;
text-align: center;
width: 18px;
height: 14px;
font: 16px/14px Tahoma, Verdana, sans-serif;
color: #c3c3c3;
text-decoration: none;
font-weight: bold;
background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover {
color: #999;
}
.leaflet-popup-scrolled {
overflow: auto;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
}
/* div icon */
.leaflet-div-icon {
background: #fff;
share/public/leaflet.js view on Meta::CPAN
/*
Leaflet, a JavaScript library for mobile-friendly interactive maps. http://leafletjs.com
(c) 2010-2013, Vladimir Agafonkin
(c) 2010-2011, CloudMade
*/
!function(t,e,i){var n=t.L,o={};o.version="0.6.4","object"==typeof module&&"object"==typeof module.exports?module.exports=o:"function"==typeof define&&define.amd&&define(o),o.noConflict=function(){return t.L=n,this},t.L=o,o.Util={extend:function(t){v...
},addTo:function(t){return t.addLayer(this),this},onRemove:function(t){this._container.parentNode.removeChild(this._container),t.off({viewreset:this._reset,moveend:this._update},this),this._animated&&t.off({zoomanim:this._animateZoom,zoomend:this._en...
o.DomUtil.addClass(t,"leaflet-vml-shape"),this.options.clickable&&o.DomUtil.addClass(t,"leaflet-clickable"),t.coordsize="1 1",this._path=this._createElement("path"),t.appendChild(this._path),this._map._pathRoot.appendChild(t)},_initStyle:function(){t...
},removeHooks:function(){o.DomEvent.off(this._map._container,"touchstart",this._onDown,this)},_onDown:function(t){if(t.touches){if(o.DomEvent.preventDefault(t),this._fireClick=!0,t.touches.length>1)return this._fireClick=!1,clearTimeout(this._holdTim...
( run in 3.385 seconds using v1.01-cache-2.11-cpan-364913b4093 )