Skip to content

Commit a12f43f

Browse files
JonnxJonnx
committed
feat(docs): added interation examples
bing, google mapbox
1 parent 477274e commit a12f43f

8 files changed

Lines changed: 173 additions & 8 deletions

File tree

‎app/Http/Controllers/DocumentationController.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ public function integrationsBingMaps()
2424
return view('docs.integrations.bing-maps');
2525
}
2626

27-
public function integrationGoogleMaps()
27+
public function integrationsGoogleMaps()
2828
{
2929
return view('docs.integrations.google-maps');
3030
}

‎app/View/Components/MarkerCreator.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ class MarkerCreator extends Component
4747
'name' => 'Text Color',
4848
'value' => 'FFF',
4949
'type' => 'text',
50-
'description' => 'The color of the text on the marker.',
50+
'description' => 'The main color of the marker.',
5151
],
5252
'background' => [
5353
'name' => 'Background Color',

‎public/css/app.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1324,6 +1324,9 @@ select {
13241324
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
13251325
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
13261326
}
1327+
.overflow-hidden {
1328+
overflow: hidden;
1329+
}
13271330
.rounded-lg {
13281331
border-radius: 0.5rem;
13291332
}

‎resources/views/components/docs-layout.blade.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<div class="mb-6">
99
<a href="/documentation" class="block mb-1">Getting Started</a>
1010
<a href="/documentation/versions" class="block mb-1">API Versions</a>
11+
<a href="/changelog" class="block mb-1">Changelog</a>
1112
</div>
1213

1314
<div class="mb-6">

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@extends('layouts.app-nav')
2+
3+
@section('content')
4+
<x-docs-layout>
5+
<div class="grid grid-cols-3 gap-8">
6+
<div class="col-span-3">
7+
<x-docs-box>
8+
<h2>Bing Maps Integration</h2>
9+
<p>Here is a quick code sample that demonstrates how to use our map markers with Bing Maps.</p>
10+
<div class="rounded-lg overflow-hidden">
11+
<div id="map-bing" style="height:200px"></div>
12+
</div>
13+
<script type="text/javascript">
14+
/* global Microsoft */
15+
function loadMapScenario() {
16+
var map = new Microsoft.Maps.Map(document.getElementById('map-bing'), {
17+
credentials: '4Dwl9bv4EyWxxh5vxGrc~DQVhL9QibE1uVG3H0y3ESw~Atmr7fRt7VzikgATJcQAzGBsq-fs9Ac6xCv4yPh0ScskuqonEIFN_vGCjn606TiN',
18+
disableScrollWheelZoom: true
19+
});
20+
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
21+
icon: '{{ config('app.url') }}/api/v2/font-awesome/v5/pin?icon=fa-star-solid&size=50&hoffset=0&voffset=-1',
22+
anchor: new Microsoft.Maps.Point(12, 39)
23+
});
24+
map.entities.push(pushpin);
25+
26+
}
27+
</script>
28+
<script type="text/javascript" src='https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer>
29+
</script>
30+
<pre>var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
31+
credentials: 'Your Bing Maps Key'
32+
});
33+
34+
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
35+
icon: '{{ config('app.url') }}/api/v2/font-awesome/v5/pin?icon=fa-star-solid&size=50&hoffset=0&voffset=-1',
36+
anchor: new Microsoft.Maps.Point(12, 39)
37+
});
38+
39+
map.entities.push(pushpin);</pre>
40+
41+
</x-docs-box>
42+
</div>
43+
</div>
44+
</x-docs-layout>
45+
@endsection

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
@extends('layouts.app-nav')
2+
3+
@section('content')
4+
<x-docs-layout>
5+
<div class="grid grid-cols-3 gap-8">
6+
<div class="col-span-3">
7+
<x-docs-box>
8+
<h2>Google Maps Integration</h2>
9+
<p>Here is a quick code sample that demonstrates how to use our map markers with Google Maps.</p>
10+
11+
<div class="rounded-lg overflow-hidden">
12+
<div id="map-google" style="height: 200px;"></div>
13+
</div>
14+
<script type="text/javascript">
15+
/* global google */
16+
function initMap() {
17+
var uluru = {
18+
lat: -25.363,
19+
lng: 131.044
20+
};
21+
var map = new google.maps.Map(document.getElementById('map-google'), {
22+
zoom: 4,
23+
center: uluru,
24+
scrollwheel: false,
25+
});
26+
var marker = new google.maps.Marker({
27+
position: uluru,
28+
icon: '{{ config('app.url') }}/api/v2/font-awesome/v5/pin?icon=fa-star-solid&size=50&hoffset=0&voffset=-1',
29+
map: map
30+
});
31+
}
32+
</script>
33+
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCtDklKj39S_87qAfy0NxxagiMsAHYiqhI&callback=initMap" async
34+
defer type="text/javascript"></script>
35+
<pre>function initMap() {
36+
var uluru = {lat: -25.363, lng: 131.044};
37+
var map = new google.maps.Map(document.getElementById('map-google'), {
38+
zoom: 4,
39+
center: uluru
40+
});
41+
42+
// a more conventional map pin
43+
var marker = new google.maps.Marker({
44+
position: uluru,
45+
icon: '{{ config('app.url') }}/api/v2/font-awesome/v5/pin?icon=fa-star-solid&size=50&hoffset=0&voffset=-1',
46+
map: map
47+
});
48+
49+
// a square icon whose center is on the lat / long
50+
var circle = new google.maps.Marker({
51+
position: {lat: 37.827125, lng: -122.422844},
52+
map: map,
53+
icon: {
54+
size: new google.maps.Size(120, 120),
55+
scaledSize: new google.maps.Size(60,60),
56+
url: 'https://cdn.mapmarker.io/api/v1/fa?size=120&icon=fa-bullseye&color=%23D33115',
57+
anchor: new google.maps.Point(30, 30),
58+
},
59+
title: "Alert",
60+
});
61+
62+
}</pre>
63+
64+
</x-docs-box>
65+
</div>
66+
</div>
67+
</x-docs-layout>
68+
@endsection

‎resources/views/docs/integrations/mapbox.blade.php‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
@extends('layouts.app-nav')
2+
3+
@section('content')
4+
<x-docs-layout>
5+
<div class="grid grid-cols-3 gap-8">
6+
<div class="col-span-3">
7+
<x-docs-box>
8+
<h2>Mapbox Integration</h2>
9+
<p>Here is a quick code sample that demonstrates how to use our map markers with Mapbox.</p>
10+
11+
<script src='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js' type="text/javascript"></script>
12+
<link href='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />
13+
<div class="rounded-lg overflow-hidden">
14+
<div id="map-mapbox" style="height: 200px;"></div>
15+
</div>
16+
<script type="text/javascript">
17+
/* global mapboxgl */
18+
mapboxgl.accessToken =
19+
'pk.eyJ1Ijoiam9uYXN3ZWlnZXJ0IiwiYSI6ImNqNXZnN2l3NTAxbHQycW45NXAxNmxucmoifQ.9d8LgKdMikrFzwYb0qyeaQ';
20+
var map = new mapboxgl.Map({
21+
container: 'map-mapbox',
22+
style: 'mapbox://styles/mapbox/streets-v10',
23+
center: [-65.017, -16.457],
24+
zoom: 5
25+
});
26+
27+
map.scrollZoom.disable();
28+
29+
var markerElement = document.createElement('div');
30+
markerElement.style.backgroundImage =
31+
"url('{{ config('app.url') }}/api/v1/font-awesome/v5/pin?icon=fa-star-solid&size=50&hoffset=0&voffset=-1')";
32+
markerElement.style.width = '50px';
33+
markerElement.style.height = '50px';
34+
35+
var marker = new mapboxgl.Marker(markerElement, {
36+
offset: [-25, -50]
37+
})
38+
.setLngLat([-65.017, -16.457])
39+
.addTo(map);
40+
</script>
41+
<pre>var markerElement = document.createElement('div');
42+
markerElement.style.backgroundImage = "url('{{ config('app.url') }}/api/v1/font-awesome/v5/pin?icon=fa-star-solid&size=50&hoffset=0&voffset=-1')";
43+
markerElement.style.width = '50px';
44+
markerElement.style.height = '50px';
45+
46+
var marker = new mapboxgl.Marker(markerElement, {offset: [-25, 50]})
47+
.setLngLat([-65.017, -16.457])
48+
.addTo(map);
49+
</pre>
50+
</x-docs-box>
51+
</div>
52+
</div>
53+
</x-docs-layout>
54+
@endsection

‎resources/views/layouts/app-nav.blade.php‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,6 @@ class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md tex
4040
<a href="/documentation"
4141
class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Docs</a>
4242

43-
<a href="/changelog"
44-
class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Changelog</a>
45-
4643
<a href="https://status.mapmarker.io" target="_blank"
4744
class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">API
4845
Status</a>
@@ -70,9 +67,6 @@ class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-
7067
<a href="/documentation"
7168
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Docs</a>
7269

73-
<a href="/changelog"
74-
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Changelog</a>
75-
7670
<a href="https://status.mapmarker.io" target="_blank"
7771
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">API
7872
Status</a>

0 commit comments

Comments
 (0)