Map element

This commit is contained in:
Tony Air 2019-12-09 17:44:11 +07:00
parent 4490051b3e
commit e95892521e
3 changed files with 65 additions and 2 deletions

View File

@ -0,0 +1,56 @@
<h2 class="content-element__title">Find Location</h2>
<div
class="mapAPI-map-container"
data-map-zoom="12"
data-key=""
data-map-style="mapbox://styles/mapbox/streets-v9"
data-geojson="{&quot;type&quot;:&quot;MarkerCollection&quot;,&quot;features&quot;:[{&quot;id&quot;:4,&quot;type&quot;:&quot;Feature&quot;,&quot;icon&quot;:&quot;&lt;i class=\&quot;fas fa-map-marker-alt\&quot;&gt;&lt;\/i&gt;&quot;,&quot;properties&quot;:{&quot;content&quot;:&quot;&lt;div id=\&quot;MapPin4\&quot; data-id=\&quot;4\&quot; class=\&quot;location\&quot;&gt;\n &lt;div class=\&quot;fn\&quot;&gt;Office #1&lt;\/div&gt;\n &lt;div class=\&quot;addr\&quot;&gt;17 Lakeside Drive&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;d-none\&quot;&gt; U&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;dir-link\&quot;&gt;\n &lt;a href=\&quot;https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8827743,-74.4276612\&quot; target=\&quot;_blank\&quot;&gt;Get Directions &amp;raquo;&lt;\/a&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},&quot;geometry&quot;:{&quot;type&quot;:&quot;Point&quot;,&quot;coordinates&quot;:[-74.4276612,40.8827743]}},{&quot;id&quot;:3,&quot;type&quot;:&quot;Feature&quot;,&quot;icon&quot;:&quot;&lt;i class=\&quot;fas fa-map-marker-alt\&quot;&gt;&lt;\/i&gt;&quot;,&quot;properties&quot;:{&quot;content&quot;:&quot;&lt;div id=\&quot;MapPin3\&quot; data-id=\&quot;3\&quot; class=\&quot;location\&quot;&gt;\n &lt;div class=\&quot;fn\&quot;&gt;Office #2&lt;\/div&gt;\n &lt;div class=\&quot;addr\&quot;&gt;Flower Hill Cemetery&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;d-none\&quot;&gt; N&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;dir-link\&quot;&gt;\n &lt;a href=\&quot;https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.7884708,-74.0249253\&quot; target=\&quot;_blank\&quot;&gt;Get Directions &amp;raquo;&lt;\/a&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},&quot;geometry&quot;:{&quot;type&quot;:&quot;Point&quot;,&quot;coordinates&quot;:[-74.0249253,40.7884708]}},{&quot;id&quot;:2,&quot;type&quot;:&quot;Feature&quot;,&quot;icon&quot;:&quot;&lt;i class=\&quot;fas fa-map-marker-alt\&quot;&gt;&lt;\/i&gt;&quot;,&quot;properties&quot;:{&quot;content&quot;:&quot;&lt;div id=\&quot;MapPin2\&quot; data-id=\&quot;2\&quot; class=\&quot;location\&quot;&gt;\n &lt;div class=\&quot;fn\&quot;&gt;Office #3&lt;\/div&gt;\n &lt;div class=\&quot;addr\&quot;&gt;555 Phoenix Road&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;d-none\&quot;&gt; U&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;dir-link\&quot;&gt;\n &lt;a href=\&quot;https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8527479,-78.2475576\&quot; target=\&quot;_blank\&quot;&gt;Get Directions &amp;raquo;&lt;\/a&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},&quot;geometry&quot;:{&quot;type&quot;:&quot;Point&quot;,&quot;coordinates&quot;:[-78.2475576,40.8527479]}},{&quot;id&quot;:1,&quot;type&quot;:&quot;Feature&quot;,&quot;icon&quot;:&quot;&lt;i class=\&quot;fas fa-map-marker-alt\&quot;&gt;&lt;\/i&gt;&quot;,&quot;properties&quot;:{&quot;content&quot;:&quot;&lt;div id=\&quot;MapPin1\&quot; data-id=\&quot;1\&quot; class=\&quot;location\&quot;&gt;\n &lt;div class=\&quot;fn\&quot;&gt;Office #4&lt;\/div&gt;\n &lt;div class=\&quot;addr\&quot;&gt;15 East Hadley Road&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;d-none\&quot;&gt; U&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;dir-link\&quot;&gt;\n &lt;a href=\&quot;https:\/\/www.google.com\/maps\/dir\/Current+Location\/42.3297023,-72.5552186\&quot; target=\&quot;_blank\&quot;&gt;Get Directions &amp;raquo;&lt;\/a&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},&quot;geometry&quot;:{&quot;type&quot;:&quot;Point&quot;,&quot;coordinates&quot;:[-72.5552186,42.3297023]}}]}"
data-fly-to-marker="true"
data-fly-to-bounds="false"
>
<div class="mapAPI-map"></div>
</div>
<div class="locations">
<div class="row">
<div class="col-sm-3">
<div id="MapPin4" data-id="4" class="location">
<div class="fn">Office #1</div>
<div class="addr">17 Lakeside Drive</div>
<div class="d-none"> U</div>
<div class="dir-link">
<a href="https://www.google.com/maps/dir/Current+Location/40.8827743,-74.4276612" target="_blank">Get Directions &raquo;</a>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="MapPin3" data-id="3" class="location">
<div class="fn">Office #2</div>
<div class="addr">Flower Hill Cemetery</div>
<div class="d-none"> N</div>
<div class="dir-link">
<a href="https://www.google.com/maps/dir/Current+Location/40.7884708,-74.0249253" target="_blank">Get Directions &raquo;</a>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="MapPin2" data-id="2" class="location">
<div class="fn">Office #3</div>
<div class="addr">555 Phoenix Road</div>
<div class="d-none"> U</div>
<div class="dir-link">
<a href="https://www.google.com/maps/dir/Current+Location/40.8527479,-78.2475576" target="_blank">Get Directions &raquo;</a>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="MapPin1" data-id="1" class="location">
<div class="fn">Office #4</div>
<div class="addr">15 East Hadley Road</div>
<div class="d-none"> U</div>
<div class="dir-link">
<a href="https://www.google.com/maps/dir/Current+Location/42.3297023,-72.5552186" target="_blank">Get Directions &raquo;</a>
</div>
</div>
</div>
</div>
</div>

View File

@ -54,6 +54,13 @@
</div>
</section>
<!-- /Accordion List -->
<!-- Map Element -->
<section id="MapElement" class="element site__elements__mapelement">
<div class="element-container container">
<%= require('html-loader!./html/Elements/Map.html') %>
</div>
</section>
<!-- /Map Element -->
</main>
</div>
<footer id="Footer" class="footer site-footer">

View File

@ -78,8 +78,8 @@ const MultiSlider = (($) => {
// actions
ui.$elContainer.append(
'<div class="slider-actions">' +
'<a href="#" class="slider-prev"><i class="fas fa-chevron-left"></i></a>' +
'<a href="#" class="slider-next"><i class="fas fa-chevron-right"></i></a>' +
'<a href="#" class="slider-prev"><i class="fas fa-chevron-left"></i><b class="sr-only">Prev</b></a>' +
'<a href="#" class="slider-next"><i class="fas fa-chevron-right"></i><b class="sr-only">Next</b></a>' +
'</div>'
);