feat(documentation): upgraded docs for animated icons

mapmarker · Dec 17, 2023 · 2cc472a · 2cc472a
1 parent ec898f1
commit 2cc472a
Show file tree

Hide file tree

Showing 9 changed files with 25,584 additions and 57 deletions.
diff --git a/app/Actions/FontAwesome/v6/CreateIcon.php b/app/Actions/FontAwesome/v6/CreateIcon.php
@@ -12,8 +12,16 @@ public function handle(string $iconMarkup, string $markerColor, string $markerSi
     {
         return <<<EOD
         <svg fill="{$markerColor}" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="{$markerSize}" height="{$markerSize}">
-            <!--! Generated with MapMarker.io - https://mapmarker.io License - https://www.mapmarker.io/license -->
-            {$iconMarkup} {$labelMarkup}
+
+            <!--
+                Generated with MapMarker.io
+                https://mapmarker.io
+                License: https://www.mapmarker.io/license
+            -->
+
+            {$iconMarkup}
+
+            {$labelMarkup}
         </svg>
         EOD;
     }

diff --git a/app/Actions/FontAwesome/v6/GetLabelAnimationMarkup.php b/app/Actions/FontAwesome/v6/GetLabelAnimationMarkup.php
@@ -10,10 +10,13 @@ class GetLabelAnimationMarkup
 
     const ANIMATION_BLINK = 'blink';
 
+    const ANIMATION_PING = 'ping';
+
     const ANIMATION_PULSE = 'pulse';
 
     const ANIMATIONS = [
         self::ANIMATION_BLINK,
+        self::ANIMATION_PING,
         self::ANIMATION_PULSE,
     ];
 
@@ -89,6 +92,24 @@ public function handle(string $animation = null, string $animationDuration = '1s
                     }
                 </style>
             EOD;
+        } elseif ($animation == self::ANIMATION_PING) {
+            return  <<<EOD
+                <style>
+
+                    @keyframes ping {
+                        0%, 5% {
+                            opacity: 1;
+                        }
+                        70%, 100% {
+                            opacity: 0;
+                        }
+                    }
+
+                    .labelAnimation {
+                        animation: ping {$animationDuration} cubic-bezier(0, 0, 0.2, 1) infinite;
+                    }
+                </style>
+            EOD;
         }
 
         return '';

diff --git a/app/Actions/FontAwesome/v6/GetLabelMarkup.php b/app/Actions/FontAwesome/v6/GetLabelMarkup.php
@@ -13,7 +13,7 @@ public function handle(Request $request, int $markerSize)
     {
         // GET LABEL
         $labelText = $request->get('label');
-        $labelTextSize = $markerSize / 5;
+        $labelTextSize = $markerSize / 4;
         $labelColor = '#'.$request->get('lc', 'D9534F');
         $labelFont = $request->get('lf', 'Arial');
         $labelFontColor = '#'.$request->get('lfc', 'FFF');
@@ -27,10 +27,10 @@ public function handle(Request $request, int $markerSize)
         $labelMarkup = '';
         if ($request->has('label')) {
             $labelMarkup = <<<EOD
-            <!--! Icon Label -->
+            <!-- Icon Label -->
             <svg x="60%" y="60%" width="40%" height="40%" viewbox="0 0 100 100" class="labelAnimation">
                 <circle cx="50%" cy="50%" fill="{$labelColor}" r="50%" />
-                <text x="50%" y="50%" fill="{$labelFontColor}" text-anchor="middle" dy=".3em" font-size="{$labelTextSize}" font-family="{$labelFont}">{$labelText}</text>
+                <text x="50%" y="50%" fill="{$labelFontColor}" text-anchor="middle" dy=".33em" font-size="{$labelTextSize}" font-family="{$labelFont}">{$labelText}</text>
                 {$labelAnimationMarkup}
             </svg>
             EOD;

diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/resources/views/docs/integrations/bing-maps.blade.php b/resources/views/docs/integrations/bing-maps.blade.php
@@ -4,42 +4,156 @@
     <x-docs-layout>
         <div class="grid grid-cols-3 gap-8">
             <div class="col-span-3">
-                <x-docs-box>
-                    <h2>Bing Maps Integration</h2>
+                <x-docs-box class="mb-8">
+                    <h2 id="static-icons">
+                        <a href="#static-icons" class="no-underline">
+                            Bing Maps Integration
+                        </a>
+                    </h2>
                     <p>Here is a quick code sample that demonstrates how to use our map markers with Bing Maps.</p>
+
+                    <p>
+                        <strong>Important for animated map markers: </strong>
+                        Bing Maps renders all shapes on an HTML 5 canvas which ends up flattening images and disables any animation
+                        they might have built in. <strong>In this case its likely only rendering the first frame of your animated image</strong>
+                        which may be the reason why it can't be seen. The solution is to use an "HTML Pushpin": <a href="#animated-icons">Read more.</a>
+                    </p>
+
                     <div class="rounded-lg overflow-hidden">
-                        <div id="map-bing" style="height:200px"></div>
+                        <div id="map-bing-simple" style="height:400px"></div>
                     </div>
                     <script type="text/javascript">
                         /* global Microsoft */
-                        function loadMapScenario() {
-                            var map = new Microsoft.Maps.Map(document.getElementById('map-bing'), {
+                        function loadBasicMapScenario() {
+                            var map = new Microsoft.Maps.Map(document.getElementById('map-bing-simple'), {
                                 credentials: '4Dwl9bv4EyWxxh5vxGrc~DQVhL9QibE1uVG3H0y3ESw~Atmr7fRt7VzikgATJcQAzGBsq-fs9Ac6xCv4yPh0ScskuqonEIFN_vGCjn606TiN',
                                 disableScrollWheelZoom: true
                             });
-                            var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
+
+                            var loc = new Microsoft.Maps.Location(-25.34492034440821, 131.0329830613222);
+
+                            var pushpin = new Microsoft.Maps.Pushpin(loc, {
                                 icon: '{{ config('app.url') }}/api/v3/font-awesome/v6/pin?icon=fa-solid+fa-star&size=50&hoffset=0&voffset=-1',
-                                anchor: new Microsoft.Maps.Point(12, 39)
+                                anchor: new Microsoft.Maps.Point(25, 50)
                             });
                             map.entities.push(pushpin);
+                            map.setView({ center: loc, zoom: 12 });
 
                         }
                     </script>
-                    <script type="text/javascript" src='https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer>
-                    </script>
+
                     <pre>var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
     credentials: 'Your Bing Maps Key'
 });
 
 var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
     icon: '{{ config('app.url') }}/api/v3/font-awesome/v6/pin?icon=fa-solid+fa-star&size=50&hoffset=0&voffset=-1',
-    anchor: new Microsoft.Maps.Point(12, 39)
+    // define an anchor point at the bottom middle of pin markers to avoid visual shift during zooms
+    // for non-pin style markers, you probably won't need this
+    anchor: new Microsoft.Maps.Point(25, 50)
 });
 
 map.entities.push(pushpin);</pre>
 
                 </x-docs-box>
+
+                <x-docs-box>
+                    <h2 id="animated-icons" class="mt-0">
+                        <a href="#animated-icons" class="no-underline">
+                            Bing Maps Animated Icons via HTML Pushpin
+                        </a>
+                    </h2>
+                    <p>Here is a quick code sample that demonstrates how to use our animated map markers with Bing Maps:</p>
+
+                    <ol>
+                        <li>Initialize Bing Map</li>
+                        <li>Initialize Bing Map HtmlPushpinLayerModule Module</li>
+                        <li>Async Load MapMarker.io Icon</li>
+                        <li>Add Icon to HtmlPushpinLayer</li>
+                        <li>Add HtmlPushpinLayer to Bing Map</li>
+                    </ol>
+
+                    <div class="rounded-lg overflow-hidden">
+                        <div id="map-bing-html-pushpin" style="height:400px"></div>
+                    </div>
+                    <script type="text/javascript">
+                        /* global Microsoft */
+                        function loadHtmlPushpinMap() {
+
+                            var map = new Microsoft.Maps.Map(document.getElementById('map-bing-html-pushpin'), {
+                                credentials: '4Dwl9bv4EyWxxh5vxGrc~DQVhL9QibE1uVG3H0y3ESw~Atmr7fRt7VzikgATJcQAzGBsq-fs9Ac6xCv4yPh0ScskuqonEIFN_vGCjn606TiN',
+                                disableScrollWheelZoom: true
+                            });
+
+                            // initalize map
+                            var loc = new Microsoft.Maps.Location(-25.34492034440821, 131.0329830613222);
+                            map.setView({ center: loc, zoom: 12 });
+
+                            // fetch html pushpin layer module (source: https://samples.bingmapsportal.com/overlays/html-pushpin-layer)
+                            Microsoft.Maps.registerModule('HtmlPushpinLayerModule', 'https://samples.bingmapsportal.com//overlays/html-pushpin-layer/HtmlPushpinLayerModule.js');
+                            Microsoft.Maps.loadModule('HtmlPushpinLayerModule', function () {
+
+                                // fetch marker
+                                const Http = new XMLHttpRequest();
+                                const url='{{ config('app.url') }}/api/v3/font-awesome/v6/icon?size=50&icon=fa-solid%20fa-person-hiking&color=333&label=&labelAnimation=pulse&labelAnimationDuration=1s&lc=4CAF50';
+                                Http.open("GET", url);
+                                Http.send();
+
+                                //  marker loaded callbakc
+                                Http.onreadystatechange = function() {
+                                    // marker available
+                                    if(this.readyState == 4 && this.status == 200) {
+                                        var pin = new HtmlPushpin(loc, Http.responseText, {anchor: new Microsoft.Maps.Point(25, 50)});
+                                        layer = new HtmlPushpinLayer([pin]);
+                                        map.layers.insert(layer);
+                                    }
+                                }
+                            });
+
+                        }
+                    </script>
+
+                    <pre>var map = new Microsoft.Maps.Map(document.getElementById('map-bing-html-pushpin'), {
+    credentials: 'Your Bing Maps Key',
+    disableScrollWheelZoom: true
+});
+
+// initalize map
+var loc = new Microsoft.Maps.Location(-25.34492034440821, 131.0329830613222);
+map.setView({ center: loc, zoom: 12 });
+
+// fetch html pushpin layer module (source: https://samples.bingmapsportal.com/overlays/html-pushpin-layer)
+Microsoft.Maps.registerModule('HtmlPushpinLayerModule', 'https://samples.bingmapsportal.com//overlays/html-pushpin-layer/HtmlPushpinLayerModule.js');
+Microsoft.Maps.loadModule('HtmlPushpinLayerModule', function () {
+
+    // fetch marker
+    const Http = new XMLHttpRequest();
+    const url='{{ config('app.url') }}/api/v3/font-awesome/v6/icon?size=50&icon=fa-solid%20fa-person-hiking&color=333&label=&labelAnimation=pulse&labelAnimationDuration=1s&lc=4CAF50';
+    Http.open("GET", url);
+    Http.send();
+
+    //  marker loaded callbakc
+    Http.onreadystatechange = function() {
+        // marker available
+        if(this.readyState == 4 && this.status == 200) {
+            var pin = new HtmlPushpin(loc, Http.responseText, {anchor: new Microsoft.Maps.Point(25, 50)});
+            layer = new HtmlPushpinLayer([pin]);
+            map.layers.insert(layer);
+        }
+    }
+});</pre>
+
+                </x-docs-box>
             </div>
         </div>
+
+        {{-- INITALIZE ALL MAPS ON PAGE --}}
+        <script type="text/javascript">
+            function loadMapScenarios() {
+                loadBasicMapScenario();
+                loadHtmlPushpinMap();
+            }
+        </script>
+        <script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenarios" async defer></script>
     </x-docs-layout>
 @endsection
diff --git a/resources/views/docs/integrations/google-maps.blade.php b/resources/views/docs/integrations/google-maps.blade.php
@@ -9,43 +9,79 @@
                     <p>Here is a quick code sample that demonstrates how to use our map markers with Google Maps.</p>
 
                     <div class="rounded-lg overflow-hidden">
-                        <div id="map-google" style="height: 200px;"></div>
+                        <div id="map-google" style="height: 400px;"></div>
                     </div>
                     <script type="text/javascript">
                         /* global google */
                         function initMap() {
-                            var uluru = {
-                                lat: -25.363,
-                                lng: 131.044
-                            };
                             var map = new google.maps.Map(document.getElementById('map-google'), {
-                                zoom: 4,
-                                center: uluru,
+                                zoom: 14,
+                                center: {
+                                    lat: -25.34821975486428,
+                                    lng: 131.0305958147815
+                                },
                                 scrollwheel: false,
                             });
-                            var marker = new google.maps.Marker({
-                                position: uluru,
-                                icon: '{{ config('app.url') }}/api/v3/font-awesome/v6/pin?icon=fa-solid+fa-star&size=50&hoffset=0&voffset=-1',
+
+                            var staticMarker = new google.maps.Marker({
+                                position: {
+                                    lat: -25.34492034440821,
+                                    lng: 131.0329830613222,
+                                },
+                                icon: {
+                                    url:'{{ config('app.url') }}/api/v3/font-awesome/v6/pin?icon=fa-solid+fa-star&size=50&hoffset=0&voffset=-1',
+                                    anchor: new google.maps.Point(25, 50),
+                                },
+                                map: map
+                            });
+
+                            var animatedMarker = new google.maps.Marker({
+                                position: {
+                                    lat: -25.35283491096011,
+                                    lng: 131.02711967211738,
+                                },
+                                icon: {
+                                    url:'{{ config('app.url') }}/api/v3/font-awesome/v6/icon?size=50&icon=fa-solid%20fa-person-hiking&color=333&label=&labelAnimation=blink&labelAnimationDuration=1s&lc=4CAF50',
+                                    anchor: new google.maps.Point(25, 25),
+                                },
                                 map: map
                             });
                         }
                     </script>
                     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCtDklKj39S_87qAfy0NxxagiMsAHYiqhI&callback=initMap" async
                         defer type="text/javascript"></script>
                     <pre>function initMap() {
-    var uluru = {lat: -25.363, lng: 131.044};
     var map = new google.maps.Map(document.getElementById('map-google'), {
-        zoom: 4,
-        center: uluru
+        zoom: 14,
+        center: {
+            lat: -25.34821975486428,
+            lng: 131.0305958147815
+        },
+        scrollwheel: false,
     });
 
-    // a more conventional map pin
-    var marker = new google.maps.Marker({
-        position: uluru,
-        icon: '{{ config('app.url') }}/api/v3/font-awesome/v6/pin?icon=fa-solid+fa-star&size=50&hoffset=0&voffset=-1',
+    var staticMarker = new google.maps.Marker({
+        position: {
+            lat: -25.34492034440821,
+            lng: 131.0329830613222,
+        },
+        icon: {
+            url:'{{ config('app.url') }}/api/v3/font-awesome/v6/pin?icon=fa-solid+fa-star&size=50&hoffset=0&voffset=-1',
+            anchor: new google.maps.Point(25, 50),
+        },
         map: map
     });
 
+    var animatedMarker = new google.maps.Marker({
+        position: {
+            lat: -25.35283491096011,
+            lng: 131.02711967211738,
+        },
+        icon: {
+            url:'{{ config('app.url') }}/api/v3/font-awesome/v6/icon?size=50&icon=fa-solid%20fa-person-hiking&color=333&label=!&labelAnimation=blink&labelAnimationDuration=1s&lc=f56565',
+        },
+        map: map
+    });
 }</pre>
 
                 </x-docs-box>