├── LICENSE
├── Leaflet.Marker.Parallax.js
├── README.md
└── examples
    ├── cloud.png
    ├── clouds.html
    ├── floating-labels.html
    ├── leaflet-parallaxmarker-demo-clouds-small.gif
    ├── leaflet.parallaxmarker.demo.floatinglabels.gif
    ├── leaflet.parallaxmarker.demo.minimumexample.gif
    ├── minimum-example.html
    └── sun.png


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Dag Jomar Mersland
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/Leaflet.Marker.Parallax.js:
--------------------------------------------------------------------------------
  1 | L.Marker.Parallax = L.Marker.extend({
  2 | 
  3 |     _initIcon: function () {
  4 |         L.Marker.prototype._initIcon.call(this);
  5 |         var anchor = this.options.icon.options.iconAnchor ? L.point(this.options.icon.options.iconAnchor) : L.point([0,0]);
  6 |         this.options.icon._originalOffset = L.point(-anchor.x, -anchor.y);
  7 | 
  8 |     },
  9 |     onAdd: function (e) {
 10 |         L.Marker.prototype.onAdd.call(this, e);
 11 | 
 12 |         this._map.on('move', this._onMapMove, this);
 13 |         this._map.on('zoomstart', this._onZoomStart, this);
 14 | 
 15 |         this._onMapMove();
 16 |     },
 17 | 
 18 |     onRemove: function (e) {
 19 | 
 20 |         this._map.off('move', this._onMapMove, this);
 21 |         this._map.off('zoomstart', this._onZoomStart, this);
 22 |         L.Marker.prototype.onRemove.call(this, e);
 23 | 
 24 |     },
 25 | 
 26 |     _onMapMove : function(e){
 27 |         var offsets = this._calculateOffsetFromOrigin();
 28 | 
 29 |         if(this._icon){
 30 |             this._updateIconOffset(offsets.centerOffset);
 31 |         }
 32 |     },
 33 | 
 34 |     _onZoomStart : function(e){
 35 |         var tempLatLng = this._calcLatLngFromOffset();
 36 |         var origLatLng = this.getLatLng();
 37 |         var origParallaxZoffset = this.options.parallaxZoffset;
 38 |         this.options.parallaxZoffset = 0;
 39 |         this.setLatLng(tempLatLng);
 40 | 
 41 |         map.once('zoomend', function(){ console.log('@ zoomend', tempLatLng, origLatLng); this.options.parallaxZoffset = origParallaxZoffset; this.setLatLng(origLatLng); this._onMapMove(); }, this);
 42 |     },
 43 | 
 44 |     _calcLatLngFromOffset: function(){
 45 |         var offsets = this._calculateOffsetFromOrigin();
 46 |         var parallax = this._calculateParallaxFromOffset(offsets.centerOffset);
 47 | 
 48 |         var containerPoint = offsets.containerPoint.add(parallax);
 49 |         var markerLatLng = this._map.containerPointToLatLng(containerPoint);
 50 | 
 51 |         console.log('@ containerPoint: ', containerPoint);
 52 | 
 53 |         console.log('@ got markerLatLng', markerLatLng);
 54 |         return markerLatLng;
 55 |     },
 56 | 
 57 |     _updateIconOffset: function(offset){
 58 | 
 59 |         if(!offset || ! this._icon){ return };
 60 | 
 61 |         var parallax = this._calculateParallaxFromOffset(offset);
 62 |         var originalOffset = this.options.icon._originalOffset;
 63 | 
 64 |         var newOffset = originalOffset.add(parallax);
 65 | 
 66 |         if (true) {
 67 |             this._icon.style.marginLeft = newOffset.x + 'px';
 68 |             this._icon.style.marginTop  = newOffset.y + 'px';
 69 |         }
 70 |     },
 71 | 
 72 |     //Find how much from the center of the map the marker is currently located
 73 |     _calculateOffsetFromOrigin: function(){
 74 |         if(!this._map){ return; };
 75 | 
 76 |         var latlng = this.getLatLng();
 77 |         var markerPoint = this._map.latLngToContainerPoint(latlng);
 78 |         var centerPoint = this._map.getSize().divideBy(2);
 79 |         //User centerPoint and markerPoint to calculate the distance from center
 80 | 
 81 |         var deltaX = (markerPoint.x - centerPoint.x);
 82 |         var deltaY = (markerPoint.y - centerPoint.y);
 83 | 
 84 |         var offset = {x: deltaX, y: deltaY};
 85 |         var containerPoint = markerPoint.add(offset);
 86 | 
 87 |         return {containerPoint: containerPoint, centerOffset: offset};
 88 |         // targetPoint = centerPoint.subtract([overlayWidth, 0]),
 89 |         // targetLatLng = map.containerPointToLatLng(centerPoint);
 90 |     },
 91 | 
 92 |     _calculateParallaxFromOffset: function(offset){
 93 |         var parallax = L.point([0,0]);
 94 | 
 95 |         if(!this.options.parallaxZoffset){
 96 |             return parallax;
 97 |         }
 98 | 
 99 | 
100 |         //Multiplies the delta x with a factor depending on the map z.
101 |         var z = this._map.getZoom();
102 | 
103 |         var constFactor = this.options.parallaxZoffset * 0.000001;
104 |         var moveFactor = constFactor * Math.pow(2, z);
105 | 
106 |         parallax.x = offset.x * moveFactor;
107 |         parallax.y = offset.y * moveFactor;
108 | 
109 | 
110 |         return parallax;
111 |     }
112 | });
113 | 
114 | L.Marker.parallax = function(latlng, opts){ return new L.Marker.Parallax(latlng, opts); };
115 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Leaflet.ParallaxMarker
 2 | 
 3 | Markers that move with a parallax effect in relation to the base map.
 4 | 
 5 | 
 6 | ## Demos / Examples
 7 | See demos/examples at [https://dagjomar.github.io/Leaflet.ParallaxMarker/](https://dagjomar.github.io/Leaflet.ParallaxMarker/).
 8 | 
 9 | 
10 | ![Screencapture GIF](examples/leaflet.parallaxmarker.demo.floatinglabels.gif)
11 | 
12 | ![Screencapture GIF](examples/leaflet-parallaxmarker-demo-clouds-small.gif)
13 | 
14 | 
15 | ## How to use
16 | 
17 | The option property `parallaxZoffset` determines **how much** of a parallax effect you want.
18 | A higher number, means more effect.
19 | 0 means it will be stationary on the map, as in no effect at all
20 | 
21 | #### Example
22 | 
23 | The following example will stack a bunch of markers on top of each other in the z-axis
24 | Notice that the offset doubles by a factor of 2 for a nice realistic effect
25 | 
26 | 
27 | ![Screencapture GIF](examples/leaflet.parallaxmarker.demo.minimumexample.gif)
28 | 
29 | ```
30 |     var center = {lat: 63.417103647850126, lng: 10.403537750244142};
31 | 
32 |     L.Marker.parallax(center,{ parallaxZoffset: 0}).addTo(map);
33 |     L.Marker.parallax(center,{ parallaxZoffset: 2}).addTo(map);
34 |     L.Marker.parallax(center,{ parallaxZoffset: 4}).addTo(map);
35 |     L.Marker.parallax(center,{ parallaxZoffset: 8}).addTo(map);
36 |     L.Marker.parallax(center,{ parallaxZoffset: 16}).addTo(map);
37 |     L.Marker.parallax(center,{ parallaxZoffset: 32}).addTo(map);
38 | ```
39 | 
40 | ## TODO
41 | - Make things work smoother on zoom animation


--------------------------------------------------------------------------------
/examples/cloud.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dagjomar/Leaflet.ParallaxMarker/20cbbcb8bf848e0ab2b7cac9c45bc048256f7558/examples/cloud.png


--------------------------------------------------------------------------------
/examples/clouds.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <title>Clouds | Leaflet.Marker.Parallax Demo</title>
 4 |     <meta name="author" content="Dag Jomar Mersland">
 5 |     <link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
 6 |     <script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
 7 |     <script src="../Leaflet.Marker.Parallax.js"></script>
 8 | 
 9 |     <style>
10 |         #map { width: 100%; height: 100%; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; }
11 | 
12 |     </style>
13 | </head>
14 | <body>
15 | 
16 | <div id="map"></div>
17 | 
18 | <script>
19 | 
20 |     var center = {lat: 63.417103647850126, lng: 10.403537750244142};
21 |     var map = L.map('map', {scrollWheelZoom: false, doubleClickZoom: false, boxZoom: false, touchZoom: false}).setView(center, 14);
22 | 
23 |     var basemap = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
24 |         tileSize: 256,
25 |         attribution: '<a href="https://www.mapzen.com/rights">Attribution</a>. Data &copy;<a href="https://openstreetmap.org/copyright">OSM</a> contributors.',
26 |         maxZoom : 19,
27 |         subdomains: 'abcd',
28 |         minZoom : 11,
29 |         zIndex: 1,
30 |         updateWhenIdle: false
31 |     }).addTo(map);
32 | 
33 | 
34 |     var cloudsMedium = [
35 |         {latlng: {lat: 63.42287395311381, lng: 10.387744903564455} },
36 |         {latlng:  {lat: 63.42425634961289, lng: 10.40782928466797} },
37 |         {latlng: {lat: 63.419648101985715, lng: 10.42302131652832} },
38 |         {latlng: {lat: 63.412811170054, lng: 10.414695739746096} },
39 |         {latlng: {lat: 63.411120890614214, lng: 10.387744903564455} },
40 |         {latlng:  {lat: 63.41911042483627, lng: 10.392723083496096} },
41 |         {latlng:  {lat: 63.41672916195147, lng: 10.378475189208986} },
42 |         {latlng:   {lat: 63.42928617415903, lng: 10.40456771850586} }
43 |     ]
44 | 
45 | 
46 |     for(var i = 0; i < cloudsMedium.length; i++){
47 |         var icon =  L.divIcon({className: 'parallax-cloud medium',  html: '<img src="cloud.png" width="152" height="84">', iconSize: [152, 84], iconAnchor: [76, 42]});
48 |         L.Marker.parallax(cloudsMedium[i].latlng,{icon: icon, parallaxZoffset: 2, opacity: 0.6}).addTo(map);
49 |     }
50 | 
51 |     var cloudsBig = [
52 |         {latlng: {lat: 63.417103647850126, lng: 10.403537750244142} },
53 |         {latlng: {lat: 63.42241313946417, lng: 10.41984558105469} },
54 |         {latlng: {lat: 63.41611461038977, lng: 10.427742004394533} },
55 |         {latlng: {lat: 63.427481682164895, lng: 10.387144088745119} },
56 |         {latlng: {lat: 63.409661023646464, lng: 10.39212226867676} },
57 |         {latlng: {lat: 63.413963576186994, lng: 10.37238121032715} }
58 |     ]
59 | 
60 |     for(var i = 0; i < cloudsBig.length; i++){
61 |         var icon =  L.divIcon({className: 'parallax-cloud big',  html: '<img src="sun.png" width="110" height="110">', iconSize: [200, 110], iconAnchor: [100, 55]});
62 |         L.Marker.parallax(cloudsBig[i].latlng,{icon: icon, parallaxZoffset: 10, opacity: 0.4}).addTo(map);
63 |     }
64 | 
65 | 
66 |     var cloudsHuge = [
67 |         {latlng:  {lat: 63.41100564066071, lng: 10.409631729125978} },
68 |         {latlng:  {lat: 63.42056981078019, lng: 10.370063781738281} },
69 |         {latlng:  {lat: 63.42602264811434, lng: 10.4205322265625} },
70 |     ]
71 | 
72 |     for(var i = 0; i < cloudsHuge.length; i++){
73 |         var icon =  L.divIcon({className: 'parallax-cloud huge',  html: '<img src="cloud.png" width="600" height="330">', iconSize: [600, 330], iconAnchor: [300, 165]});
74 |         L.Marker.parallax(cloudsHuge[i].latlng,{icon: icon, parallaxZoffset: 20, opacity: 0.3}).addTo(map);
75 |     }
76 | 
77 |     //map.setCenter(paraMarker.getLatLng());
78 |     // paraMarker.remove();
79 | 
80 | 
81 | </script>
82 | </body>
83 | </html>
84 | 


--------------------------------------------------------------------------------
/examples/floating-labels.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 |     <title>Floating Label | Leaflet.Marker.Parallax Demo</title>
  4 |     <meta name="author" content="Dag Jomar Mersland">
  5 |     <link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
  6 |     <script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
  7 |     <script src="../Leaflet.Marker.Parallax.js"></script>
  8 | 
  9 |     <style>
 10 |         #map { width: 100%; height: 100%; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; }
 11 | 
 12 |         .parallax-marker.label{
 13 |             display: block;
 14 |             text-align: center;
 15 |             font-weight: bold;
 16 |             color: rgb(98, 56, 128);
 17 |             text-transform: uppercase;
 18 |             text-shadow: rgb(255, 255, 255) 1px 0px 1px, rgb(255, 255, 255) -1px 0px 1px, rgb(255, 255, 255) 0px -1px 1px, rgb(255, 255, 255) 0px 1px 1px;
 19 |         }
 20 |         .parallax-marker.label.huge{ font-size: 96px; color: rgba(185, 157, 185, 0.39); text-shadow: none;}
 21 |         .parallax-marker.label.big{ font-size: 24px; }
 22 |         .parallax-marker.label.medium{ font-size: 16px; color: rgb(121, 85, 125); font-weight: normal;}
 23 |         .parallax-marker.label.small{  font-size: 12px; text-transform: none; font-weight: normal; color: rgb(137, 128, 144); }
 24 |     </style>
 25 | </head>
 26 | <body>
 27 | 
 28 | <div id="map"></div>
 29 | 
 30 | <script>
 31 | 
 32 |     var center = {lat: 63.417103647850126, lng: 10.403537750244142};
 33 |     var map = L.map('map', {scrollWheelZoom: false, doubleClickZoom: false, boxZoom: false, touchZoom: false}).setView(center, 14);
 34 | 
 35 |     var basemap = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
 36 |         tileSize: 256,
 37 |         attribution: '<a href="https://www.mapzen.com/rights">Attribution</a>. Data &copy;<a href="https://openstreetmap.org/copyright">OSM</a> contributors.',
 38 |         maxZoom : 19,
 39 |         subdomains: 'abcd',
 40 |         minZoom : 11,
 41 |         zIndex: 1,
 42 |         updateWhenIdle: false
 43 |     }).addTo(map);
 44 | 
 45 |     map.on('click', function(e){ console.log('e', e.latlng);});
 46 | 
 47 |     var textMarkersBig = [
 48 |         {'html': 'Hello Map', latlng: {lat: 63.417103647850126, lng: 10.403537750244142} },
 49 |         {'html': 'How are you', latlng: {lat: 63.42241313946417, lng: 10.41984558105469} },
 50 |         {'html': 'I\'m fine', latlng: {lat: 63.41611461038977, lng: 10.427742004394533} },
 51 |         {'html': 'Floating Labels', latlng: {lat: 63.427481682164895, lng: 10.387144088745119} },
 52 |         {'html': 'Another one', latlng: {lat: 63.409661023646464, lng: 10.39212226867676} },
 53 |         {'html': 'Real Word Cloud', latlng: {lat: 63.413963576186994, lng: 10.37238121032715} }
 54 |     ]
 55 | 
 56 |     for(var i = 0; i < textMarkersBig.length; i++){
 57 |         var icon =  L.divIcon({className: 'parallax-marker label big', html: textMarkersBig[i].html, iconSize: [200, 36], iconAnchor: [100, 18]});
 58 |         L.Marker.parallax(textMarkersBig[i].latlng,{icon: icon, parallaxZoffset: 4}).addTo(map);
 59 |     }
 60 | 
 61 |     var textMarkersMedium = [
 62 |         {'html': 'The quick', latlng: {lat: 63.42287395311381, lng: 10.387744903564455} },
 63 |         {'html': 'Brown fox', latlng:  {lat: 63.42425634961289, lng: 10.40782928466797} },
 64 |         {'html': 'Jumps over', latlng: {lat: 63.419648101985715, lng: 10.42302131652832} },
 65 |         {'html': 'The lazy', latlng: {lat: 63.412811170054, lng: 10.414695739746096} },
 66 |         {'html': 'Dog', latlng: {lat: 63.411120890614214, lng: 10.387744903564455} },
 67 |         {'html': 'The Foxy Dog', latlng:  {lat: 63.41911042483627, lng: 10.392723083496096} },
 68 |         {'html': 'Crawls under', latlng:  {lat: 63.41672916195147, lng: 10.378475189208986} },
 69 |         {'html': 'The doggy horse', latlng:   {lat: 63.42928617415903, lng: 10.40456771850586} }
 70 |     ]
 71 | 
 72 | 
 73 |     for(var i = 0; i < textMarkersMedium.length; i++){
 74 |         var icon =  L.divIcon({className: 'parallax-marker label medium', html: textMarkersMedium[i].html, iconSize: [200, 36], iconAnchor: [100, 18]});
 75 |         L.Marker.parallax(textMarkersMedium[i].latlng,{icon: icon, parallaxZoffset: 1}).addTo(map);
 76 |     }
 77 | 
 78 | 
 79 |     var textMarkersSmall = [
 80 |         {'html': 'Azgard', latlng: {lat: 63.42533150079501, lng: 10.396499633789064} },
 81 |         {'html': 'Gotham', latlng: {lat: 63.42145308723281, lng: 10.411691665649416} },
 82 |         {'html': 'Hoth', latlng: {lat: 63.41864955068167, lng: 10.423364639282228} },
 83 |         {'html': 'Middle Earth', latlng: {lat: 63.414117226838805, lng: 10.41435241699219} },
 84 |         {'html': 'Winterfell', latlng: {lat: 63.41292641275144, lng: 10.397529602050783} },
 85 |         {'html': 'Oz', latlng:  {lat: 63.41085197333554, lng: 10.414524078369142} },
 86 |         {'html': 'Diagon Alley', latlng:   {lat: 63.42160669775066, lng: 10.37590026855469} },
 87 |         {'html': 'Hobbiton', latlng:  {lat: 63.42671377876622, lng: 10.411863327026369} },
 88 |         {'html': 'Moria', latlng:   {lat: 63.40923841670723, lng: 10.378475189208986} }
 89 |     ]
 90 | 
 91 |     for(var i = 0; i < textMarkersSmall.length; i++){
 92 |         var icon =  L.divIcon({className: 'parallax-marker label small', html: textMarkersSmall[i].html, iconSize: [200, 36], iconAnchor: [100, 18]});
 93 |         L.Marker.parallax(textMarkersSmall[i].latlng,{icon: icon, parallaxZoffset: 0.2}).addTo(map);
 94 |     }
 95 | 
 96 |     var textMarkersHuge = [
 97 |         {'html': 'Mordi', latlng:  {lat: 63.41100564066071, lng: 10.409631729125978} },
 98 |         {'html': 'Fardin', latlng:  {lat: 63.42056981078019, lng: 10.370063781738281} },
 99 |         {'html': 'Brordin', latlng:  {lat: 63.42602264811434, lng: 10.4205322265625} },
100 |     ]
101 | 
102 |     for(var i = 0; i < textMarkersHuge.length; i++){
103 |         var icon =  L.divIcon({className: 'parallax-marker label huge', html: textMarkersHuge[i].html, iconSize: [200, 36], iconAnchor: [100, 18]});
104 |         L.Marker.parallax(textMarkersHuge[i].latlng,{icon: icon, parallaxZoffset: 6}).addTo(map);
105 |     }
106 | 
107 | 
108 | </script>
109 | </body>
110 | </html>
111 | 


--------------------------------------------------------------------------------
/examples/leaflet-parallaxmarker-demo-clouds-small.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dagjomar/Leaflet.ParallaxMarker/20cbbcb8bf848e0ab2b7cac9c45bc048256f7558/examples/leaflet-parallaxmarker-demo-clouds-small.gif


--------------------------------------------------------------------------------
/examples/leaflet.parallaxmarker.demo.floatinglabels.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dagjomar/Leaflet.ParallaxMarker/20cbbcb8bf848e0ab2b7cac9c45bc048256f7558/examples/leaflet.parallaxmarker.demo.floatinglabels.gif


--------------------------------------------------------------------------------
/examples/leaflet.parallaxmarker.demo.minimumexample.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dagjomar/Leaflet.ParallaxMarker/20cbbcb8bf848e0ab2b7cac9c45bc048256f7558/examples/leaflet.parallaxmarker.demo.minimumexample.gif


--------------------------------------------------------------------------------
/examples/minimum-example.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <title>Floating Label | Leaflet.Marker.Parallax Demo</title>
 4 |     <meta name="author" content="Dag Jomar Mersland">
 5 |     <link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
 6 |     <script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
 7 |     <script src="../Leaflet.Marker.Parallax.js"></script>
 8 | 
 9 |     <style>
10 |         #map { width: 100%; height: 100%; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; }
11 | 
12 |         .parallax-marker.label{
13 |             display: block;
14 |             text-align: center;
15 |             font-weight: bold;
16 |             color: rgb(98, 56, 128);
17 |             text-transform: uppercase;
18 |             text-shadow: rgb(255, 255, 255) 1px 0px 1px, rgb(255, 255, 255) -1px 0px 1px, rgb(255, 255, 255) 0px -1px 1px, rgb(255, 255, 255) 0px 1px 1px;
19 |         }
20 |         .parallax-marker.label.huge{ font-size: 96px; color: rgba(185, 157, 185, 0.39); text-shadow: none;}
21 |         .parallax-marker.label.big{ font-size: 24px; }
22 |         .parallax-marker.label.medium{ font-size: 16px; color: rgb(121, 85, 125); font-weight: normal;}
23 |         .parallax-marker.label.small{  font-size: 12px; text-transform: none; font-weight: normal; color: rgb(137, 128, 144); }
24 |     </style>
25 | </head>
26 | <body>
27 | 
28 | <div id="map"></div>
29 | 
30 | <script>
31 | 
32 |     var center = {lat: 63.417103647850126, lng: 10.403537750244142};
33 |     var map = L.map('map', {scrollWheelZoom: false, doubleClickZoom: false, boxZoom: false, touchZoom: false}).setView(center, 14);
34 | 
35 |     var basemap = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
36 |         tileSize: 256,
37 |         attribution: '<a href="https://www.mapzen.com/rights">Attribution</a>. Data &copy;<a href="https://openstreetmap.org/copyright">OSM</a> contributors.',
38 |         maxZoom : 19,
39 |         subdomains: 'abcd',
40 |         minZoom : 11,
41 |         zIndex: 1,
42 |         updateWhenIdle: false
43 |     }).addTo(map);
44 | 
45 |     /*
46 |         The option property `parallaxZoffset` determines HOW MUCH of a parallax effect you want.
47 |         A higher number, means more effect.
48 |         0 means it will be stationary on the map, as in no effect at all
49 |     */
50 | 
51 |     /*
52 |         The following example will stack a bunch of markers on top of each other in the z-axis
53 |         Notice that the offset doubles by a factor of 2 for a nice realistic effect
54 |     */
55 |     L.Marker.parallax(center,{ parallaxZoffset: 0}).addTo(map);
56 |     L.Marker.parallax(center,{ parallaxZoffset: 2}).addTo(map);
57 |     L.Marker.parallax(center,{ parallaxZoffset: 4}).addTo(map);
58 |     L.Marker.parallax(center,{ parallaxZoffset: 8}).addTo(map);
59 |     L.Marker.parallax(center,{ parallaxZoffset: 16}).addTo(map);
60 |     L.Marker.parallax(center,{ parallaxZoffset: 32}).addTo(map);
61 | 
62 | 
63 | </script>
64 | </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/examples/sun.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dagjomar/Leaflet.ParallaxMarker/20cbbcb8bf848e0ab2b7cac9c45bc048256f7558/examples/sun.png


--------------------------------------------------------------------------------