Skip to content

Commit

Permalink
DEMO-252: Switch to OpenStreet maps on eZ Platform OE demo (ezsystems…
Browse files Browse the repository at this point in the history
  • Loading branch information
damianz5 committed Dec 19, 2018
1 parent 9f7105b commit e51bbfb
Show file tree
Hide file tree
Showing 7 changed files with 140 additions and 265 deletions.
273 changes: 9 additions & 264 deletions app/Resources/views/themes/tastefulplanet/full/place_list.html.twig
Expand Up @@ -19,270 +19,15 @@
</div>
</div>
{% else %}
<div id="map"></div>

<script>
{% autoescape 'js' %}
function initMap() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40, lng: 0},
zoom: 2,
styles: [
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.land_parcel",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "administrative.neighborhood",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
]
});
{% if places.searchHits|length > 0 %}
{% for place in places.searchHits %}
var location = new google.maps.LatLng(
{{ ez_field_value( place.valueObject, 'location' ).latitude }},
{{ ez_field_value( place.valueObject, 'location' ).longitude }}
);
var marker = new google.maps.Marker({
position: location,
map: map,
title: '{{ ez_render_field(place.valueObject, 'name') }}',
icon: {
url: "{{ asset('/images/map-marker.png', 'ezdesign') }}",
scaledSize: new google.maps.Size(20, 20),
anchor: new google.maps.Point(10,10)
}
});
markers.push(marker);
{% endfor %}
{% endif %}
}
{% endautoescape %}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<div class="container-fluid">
{% set map_container_id = 'map_container_id_' ~ random() %}
<div class="row map-container" id="{{ map_container_id }}"></div>

{% include '@ezdesign/parts/map.html.twig' with {
'map_container_id': map_container_id,
'contentArray': app_search_result_extract(places)
} only %}
</div>
{% endif %}

<div class="container">
Expand Down
10 changes: 9 additions & 1 deletion app/Resources/views/themes/tastefulplanet/pagelayout.html.twig
Expand Up @@ -13,6 +13,9 @@
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin="" />

{% block page_head %}
<title>{{ title|default('Home') }}</title>
Expand Down Expand Up @@ -49,10 +52,15 @@
'bundles/ezplatformadminuiassets/vendors/jquery/dist/jquery.min.js'
'bundles/ezplatformadminuiassets/vendors/popper.js/dist/umd/popper.min.js'
'bundles/ezplatformadminuiassets/vendors/bootstrap/dist/js/bootstrap.min.js'
'assets/js/placesMapLoader.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

{% block javascripts %}{% endblock %}
{% block javascripts %}
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
{% endblock %}
</body>
</html>
31 changes: 31 additions & 0 deletions app/Resources/views/themes/tastefulplanet/parts/map.html.twig
@@ -0,0 +1,31 @@
<div class="places_map_data" id="{{ map_container_id }}_map_data" hidden>
{% if contentArray|length > 0 %}
{% for content in contentArray %}
<span class="map_place"
data-lat="{{ ez_field_value( content, 'location' ).latitude }}"
data-lng="{{ ez_field_value( content, 'location' ).longitude }}"
data-name="{{ ez_render_field(content, "name")|striptags }}">
</span>
{% endfor %}
{% endif %}
</div>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
(function (global, doc) {
// if the page is not using iframe - load map
if (global === global.parent) {
global.mapLoader('#{{ map_container_id }}');
return;
}
// wait for DOM to be ready
let stateCheck = setInterval(() => {
if (doc.readyState === 'complete') {
clearInterval(stateCheck);
global.mapLoader('#{{ map_container_id }}');
}
}, 100);
})(window, document);
});
</script>
3 changes: 3 additions & 0 deletions app/config/services.yml
Expand Up @@ -68,6 +68,9 @@ services:
tags:
- { name: twig.extension }

AppBundle\Twig\SearchResultExtractorExtension:
tags:
- { name: twig.extension }

AppBundle\PremiumContent\HtmlRenderer: ~
AppBundle\User\UserGroups: ~
Expand Down
48 changes: 48 additions & 0 deletions src/AppBundle/Twig/SearchResultExtractorExtension.php
@@ -0,0 +1,48 @@
<?php
/**
* @copyright Copyright (C) eZ Systems AS. All rights reserved.
* @license For full copyright and license information view LICENSE file distributed with this source code.
*/
namespace AppBundle\Twig;

use eZ\Publish\API\Repository\Values\Content\Search\SearchHit;
use eZ\Publish\API\Repository\Values\Content\Search\SearchResult;
use Twig_Extension;
use Twig_Function;

/**
* Twig helper for extract SearchResult object and returns array
*/
class SearchResultExtractorExtension extends Twig_Extension
{
/**
* {@inheritdoc}
*/
public function getName()
{
return 'app.search_result_extract';
}

/**
* {@inheritdoc}
*/
public function getFunctions()
{
return [
new Twig_Function('app_search_result_extract', [$this, 'extractSearchResult'])
];
}

/**
* Returns extracted SearchResult object as array
*
* @param SearchResult $searchResult
* @return array
*/
public function extractSearchResult(SearchResult $searchResult): array
{
return array_map(function (SearchHit $searchHit) {
return $searchHit->valueObject;
}, $searchResult->searchHits);
}
}

0 comments on commit e51bbfb

Please sign in to comment.