Skip to content

Commit 2cc472a

Browse files
JonnxJonnx
committed
feat(documentation): upgraded docs for animated icons
1 parent ec898f1 commit 2cc472a

File tree

9 files changed

+25584
-57
lines changed

9 files changed

+25584
-57
lines changed

‎app/Actions/FontAwesome/v6/CreateIcon.php

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,16 @@ public function handle(string $iconMarkup, string $markerColor, string $markerSi
1212
{
1313
return <<<EOD
1414
<svg fill="{$markerColor}" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="{$markerSize}" height="{$markerSize}">
15-
<!--! Generated with MapMarker.io - https://mapmarker.io License - https://www.mapmarker.io/license -->
16-
{$iconMarkup} {$labelMarkup}
15+
16+
<!--
17+
Generated with MapMarker.io
18+
https://mapmarker.io
19+
License: https://www.mapmarker.io/license
20+
-->
21+
22+
{$iconMarkup}
23+
24+
{$labelMarkup}
1725
</svg>
1826
EOD;
1927
}

‎app/Actions/FontAwesome/v6/GetLabelAnimationMarkup.php

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,13 @@ class GetLabelAnimationMarkup
1010

1111
const ANIMATION_BLINK = 'blink';
1212

13+
const ANIMATION_PING = 'ping';
14+
1315
const ANIMATION_PULSE = 'pulse';
1416

1517
const ANIMATIONS = [
1618
self::ANIMATION_BLINK,
19+
self::ANIMATION_PING,
1720
self::ANIMATION_PULSE,
1821
];
1922

@@ -89,6 +92,24 @@ public function handle(string $animation = null, string $animationDuration = '1s
8992
}
9093
</style>
9194
EOD;
95+
} elseif ($animation == self::ANIMATION_PING) {
96+
return <<<EOD
97+
<style>
98+
99+
@keyframes ping {
100+
0%, 5% {
101+
opacity: 1;
102+
}
103+
70%, 100% {
104+
opacity: 0;
105+
}
106+
}
107+
108+
.labelAnimation {
109+
animation: ping {$animationDuration} cubic-bezier(0, 0, 0.2, 1) infinite;
110+
}
111+
</style>
112+
EOD;
92113
}
93114

94115
return '';

‎app/Actions/FontAwesome/v6/GetLabelMarkup.php

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ public function handle(Request $request, int $markerSize)
1313
{
1414
// GET LABEL
1515
$labelText = $request->get('label');
16-
$labelTextSize = $markerSize / 5;
16+
$labelTextSize = $markerSize / 4;
1717
$labelColor = '#'.$request->get('lc', 'D9534F');
1818
$labelFont = $request->get('lf', 'Arial');
1919
$labelFontColor = '#'.$request->get('lfc', 'FFF');
@@ -27,10 +27,10 @@ public function handle(Request $request, int $markerSize)
2727
$labelMarkup = '';
2828
if ($request->has('label')) {
2929
$labelMarkup = <<<EOD
30-
<!--! Icon Label -->
30+
<!-- Icon Label -->
3131
<svg x="60%" y="60%" width="40%" height="40%" viewbox="0 0 100 100" class="labelAnimation">
3232
<circle cx="50%" cy="50%" fill="{$labelColor}" r="50%" />
33-
<text x="50%" y="50%" fill="{$labelFontColor}" text-anchor="middle" dy=".3em" font-size="{$labelTextSize}" font-family="{$labelFont}">{$labelText}</text>
33+
<text x="50%" y="50%" fill="{$labelFontColor}" text-anchor="middle" dy=".33em" font-size="{$labelTextSize}" font-family="{$labelFont}">{$labelText}</text>
3434
{$labelAnimationMarkup}
3535
</svg>
3636
EOD;

‎public/css/app.css

Lines changed: 2176 additions & 1 deletion
Large diffs are not rendered by default.

‎public/js/app.js

Lines changed: 23099 additions & 2 deletions
Large diffs are not rendered by default.

‎resources/views/docs/integrations/bing-maps.blade.php

Lines changed: 124 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,42 +4,156 @@
44
<x-docs-layout>
55
<div class="grid grid-cols-3 gap-8">
66
<div class="col-span-3">
7-
<x-docs-box>
8-
<h2>Bing Maps Integration</h2>
7+
<x-docs-box class="mb-8">
8+
<h2 id="static-icons">
9+
<a href="#static-icons" class="no-underline">
10+
Bing Maps Integration
11+
</a>
12+
</h2>
913
<p>Here is a quick code sample that demonstrates how to use our map markers with Bing Maps.</p>
14+
15+
<p>
16+
<strong>Important for animated map markers: </strong>
17+
Bing Maps renders all shapes on an HTML 5 canvas which ends up flattening images and disables any animation
18+
they might have built in. <strong>In this case its likely only rendering the first frame of your animated image</strong>
19+
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>
20+
</p>
21+
1022
<div class="rounded-lg overflow-hidden">
11-
<div id="map-bing" style="height:200px"></div>
23+
<div id="map-bing-simple" style="height:400px"></div>
1224
</div>
1325
<script type="text/javascript">
1426
/* global Microsoft */
15-
function loadMapScenario() {
16-
var map = new Microsoft.Maps.Map(document.getElementById('map-bing'), {
27+
function loadBasicMapScenario() {
28+
var map = new Microsoft.Maps.Map(document.getElementById('map-bing-simple'), {
1729
credentials: '4Dwl9bv4EyWxxh5vxGrc~DQVhL9QibE1uVG3H0y3ESw~Atmr7fRt7VzikgATJcQAzGBsq-fs9Ac6xCv4yPh0ScskuqonEIFN_vGCjn606TiN',
1830
disableScrollWheelZoom: true
1931
});
20-
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
32+
33+
var loc = new Microsoft.Maps.Location(-25.34492034440821, 131.0329830613222);
34+
35+
var pushpin = new Microsoft.Maps.Pushpin(loc, {
2136
icon: '{{ config('app.url') }}/api/v3/font-awesome/v6/pin?icon=fa-solid+fa-star&size=50&hoffset=0&voffset=-1',
22-
anchor: new Microsoft.Maps.Point(12, 39)
37+
anchor: new Microsoft.Maps.Point(25, 50)
2338
});
2439
map.entities.push(pushpin);
40+
map.setView({ center: loc, zoom: 12 });
2541
2642
}
2743
</script>
28-
<script type="text/javascript" src='https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer>
29-
</script>
44+
3045
<pre>var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
3146
credentials: 'Your Bing Maps Key'
3247
});
3348

3449
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
3550
icon: '{{ config('app.url') }}/api/v3/font-awesome/v6/pin?icon=fa-solid+fa-star&size=50&hoffset=0&voffset=-1',
36-
anchor: new Microsoft.Maps.Point(12, 39)
51+
// define an anchor point at the bottom middle of pin markers to avoid visual shift during zooms
52+
// for non-pin style markers, you probably won't need this
53+
anchor: new Microsoft.Maps.Point(25, 50)
3754
});
3855

3956
map.entities.push(pushpin);</pre>
4057

4158
</x-docs-box>
59+
60+
<x-docs-box>
61+
<h2 id="animated-icons" class="mt-0">
62+
<a href="#animated-icons" class="no-underline">
63+
Bing Maps Animated Icons via HTML Pushpin
64+
</a>
65+
</h2>
66+
<p>Here is a quick code sample that demonstrates how to use our animated map markers with Bing Maps:</p>
67+
68+
<ol>
69+
<li>Initialize Bing Map</li>
70+
<li>Initialize Bing Map HtmlPushpinLayerModule Module</li>
71+
<li>Async Load MapMarker.io Icon</li>
72+
<li>Add Icon to HtmlPushpinLayer</li>
73+
<li>Add HtmlPushpinLayer to Bing Map</li>
74+
</ol>
75+
76+
<div class="rounded-lg overflow-hidden">
77+
<div id="map-bing-html-pushpin" style="height:400px"></div>
78+
</div>
79+
<script type="text/javascript">
80+
/* global Microsoft */
81+
function loadHtmlPushpinMap() {
82+
83+
var map = new Microsoft.Maps.Map(document.getElementById('map-bing-html-pushpin'), {
84+
credentials: '4Dwl9bv4EyWxxh5vxGrc~DQVhL9QibE1uVG3H0y3ESw~Atmr7fRt7VzikgATJcQAzGBsq-fs9Ac6xCv4yPh0ScskuqonEIFN_vGCjn606TiN',
85+
disableScrollWheelZoom: true
86+
});
87+
88+
// initalize map
89+
var loc = new Microsoft.Maps.Location(-25.34492034440821, 131.0329830613222);
90+
map.setView({ center: loc, zoom: 12 });
91+
92+
// fetch html pushpin layer module (source: https://samples.bingmapsportal.com/overlays/html-pushpin-layer)
93+
Microsoft.Maps.registerModule('HtmlPushpinLayerModule', 'https://samples.bingmapsportal.com//overlays/html-pushpin-layer/HtmlPushpinLayerModule.js');
94+
Microsoft.Maps.loadModule('HtmlPushpinLayerModule', function () {
95+
96+
// fetch marker
97+
const Http = new XMLHttpRequest();
98+
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';
99+
Http.open("GET", url);
100+
Http.send();
101+
102+
// marker loaded callbakc
103+
Http.onreadystatechange = function() {
104+
// marker available
105+
if(this.readyState == 4 && this.status == 200) {
106+
var pin = new HtmlPushpin(loc, Http.responseText, {anchor: new Microsoft.Maps.Point(25, 50)});
107+
layer = new HtmlPushpinLayer([pin]);
108+
map.layers.insert(layer);
109+
}
110+
}
111+
});
112+
113+
}
114+
</script>
115+
116+
<pre>var map = new Microsoft.Maps.Map(document.getElementById('map-bing-html-pushpin'), {
117+
credentials: 'Your Bing Maps Key',
118+
disableScrollWheelZoom: true
119+
});
120+
121+
// initalize map
122+
var loc = new Microsoft.Maps.Location(-25.34492034440821, 131.0329830613222);
123+
map.setView({ center: loc, zoom: 12 });
124+
125+
// fetch html pushpin layer module (source: https://samples.bingmapsportal.com/overlays/html-pushpin-layer)
126+
Microsoft.Maps.registerModule('HtmlPushpinLayerModule', 'https://samples.bingmapsportal.com//overlays/html-pushpin-layer/HtmlPushpinLayerModule.js');
127+
Microsoft.Maps.loadModule('HtmlPushpinLayerModule', function () {
128+
129+
// fetch marker
130+
const Http = new XMLHttpRequest();
131+
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';
132+
Http.open("GET", url);
133+
Http.send();
134+
135+
// marker loaded callbakc
136+
Http.onreadystatechange = function() {
137+
// marker available
138+
if(this.readyState == 4 && this.status == 200) {
139+
var pin = new HtmlPushpin(loc, Http.responseText, {anchor: new Microsoft.Maps.Point(25, 50)});
140+
layer = new HtmlPushpinLayer([pin]);
141+
map.layers.insert(layer);
142+
}
143+
}
144+
});</pre>
145+
146+
</x-docs-box>
42147
</div>
43148
</div>
149+
150+
{{-- INITALIZE ALL MAPS ON PAGE --}}
151+
<script type="text/javascript">
152+
function loadMapScenarios() {
153+
loadBasicMapScenario();
154+
loadHtmlPushpinMap();
155+
}
156+
</script>
157+
<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenarios" async defer></script>
44158
</x-docs-layout>
45159
@endsection

‎resources/views/docs/integrations/google-maps.blade.php

Lines changed: 53 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,43 +9,79 @@
99
<p>Here is a quick code sample that demonstrates how to use our map markers with Google Maps.</p>
1010

1111
<div class="rounded-lg overflow-hidden">
12-
<div id="map-google" style="height: 200px;"></div>
12+
<div id="map-google" style="height: 400px;"></div>
1313
</div>
1414
<script type="text/javascript">
1515
/* global google */
1616
function initMap() {
17-
var uluru = {
18-
lat: -25.363,
19-
lng: 131.044
20-
};
2117
var map = new google.maps.Map(document.getElementById('map-google'), {
22-
zoom: 4,
23-
center: uluru,
18+
zoom: 14,
19+
center: {
20+
lat: -25.34821975486428,
21+
lng: 131.0305958147815
22+
},
2423
scrollwheel: false,
2524
});
26-
var marker = new google.maps.Marker({
27-
position: uluru,
28-
icon: '{{ config('app.url') }}/api/v3/font-awesome/v6/pin?icon=fa-solid+fa-star&size=50&hoffset=0&voffset=-1',
25+
26+
var staticMarker = new google.maps.Marker({
27+
position: {
28+
lat: -25.34492034440821,
29+
lng: 131.0329830613222,
30+
},
31+
icon: {
32+
url:'{{ config('app.url') }}/api/v3/font-awesome/v6/pin?icon=fa-solid+fa-star&size=50&hoffset=0&voffset=-1',
33+
anchor: new google.maps.Point(25, 50),
34+
},
35+
map: map
36+
});
37+
38+
var animatedMarker = new google.maps.Marker({
39+
position: {
40+
lat: -25.35283491096011,
41+
lng: 131.02711967211738,
42+
},
43+
icon: {
44+
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',
45+
anchor: new google.maps.Point(25, 25),
46+
},
2947
map: map
3048
});
3149
}
3250
</script>
3351
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCtDklKj39S_87qAfy0NxxagiMsAHYiqhI&callback=initMap" async
3452
defer type="text/javascript"></script>
3553
<pre>function initMap() {
36-
var uluru = {lat: -25.363, lng: 131.044};
3754
var map = new google.maps.Map(document.getElementById('map-google'), {
38-
zoom: 4,
39-
center: uluru
55+
zoom: 14,
56+
center: {
57+
lat: -25.34821975486428,
58+
lng: 131.0305958147815
59+
},
60+
scrollwheel: false,
4061
});
4162

42-
// a more conventional map pin
43-
var marker = new google.maps.Marker({
44-
position: uluru,
45-
icon: '{{ config('app.url') }}/api/v3/font-awesome/v6/pin?icon=fa-solid+fa-star&size=50&hoffset=0&voffset=-1',
63+
var staticMarker = new google.maps.Marker({
64+
position: {
65+
lat: -25.34492034440821,
66+
lng: 131.0329830613222,
67+
},
68+
icon: {
69+
url:'{{ config('app.url') }}/api/v3/font-awesome/v6/pin?icon=fa-solid+fa-star&size=50&hoffset=0&voffset=-1',
70+
anchor: new google.maps.Point(25, 50),
71+
},
4672
map: map
4773
});
4874

75+
var animatedMarker = new google.maps.Marker({
76+
position: {
77+
lat: -25.35283491096011,
78+
lng: 131.02711967211738,
79+
},
80+
icon: {
81+
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',
82+
},
83+
map: map
84+
});
4985
}</pre>
5086

5187
</x-docs-box>

0 commit comments

Comments
 (0)