Im trying to use the OpenLayers library in my symfony application. Im using Webpack encore for managing my assets. I've used npm to download the OpenLayers library.
When im trying to use it inside a js file, only the first 'ol' class is available, the classes underneath it are not. In browser the ol.layer.Tile class is not recognised and throws an exception(Uncaught type error).
// map.js
require('../css/map.css');
const ol = require('ol');
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
//map.html.twig
{% extends '::base.html.twig' %}
{# STYLESHEETS-------------------------------------------------- #}
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('build/map.css') }}" rel="stylesheet" />
{#<link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet" type="text/css"/>#}
{% endblock %}
{# JAVASCRIPTS-------------------------------------------------- #}
{% block javascript %}
{{ parent() }}
{#<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>#}
<script src="{{ asset('build/map.js') }}"></script>
{% endblock %}
{# PAGE CONTENT-------------------------------------------------- #}
{% block title %}OpenLayers example{% endblock %}
{% block body %}
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
</body>
{% endblock %}
No need to add script tag if you are using require
`{#<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>#}`
You should require also Tile, View
var ol_Map = require('ol/map').default;
var ol_layer_Tile = require('ol/layer/tile').default;
var ol_source_OSM = require('ol/source/osm').default;
var ol_View = require('ol/view').default;
var map = new ol_Map({
target: 'map',
layers: [
new ol_layer_Tile({
source: new ol_source_OSM()
})
],
view: new ol_View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
See the document from OpenLayers http://openlayers.org/en/latest/doc/tutorials/browserify.html
Related
I'm using fullcalendar.js with Symfony 3.4 (as all the bundles are deprecated since version 3). The calendar itself is showing, when I hardcoded in js the events they're showing. But when i send my events with JSON they don't show themselves and the calendar is blank. However, the json source is in the correct format and indeed catched by my page (http 200 response). Here's my controller who got the data and send a JSON:
/**
* #Route("/calendrierFeed", name="calendrierFeed", methods={"GET"})
*/
public function feedAction()
{
$em = $this->getDoctrine()->getManager();
$aquariums = $em->getRepository('AppBundle\Entity\Aquarium')
->findBy(
array('user' => $this->getUser()->getId())
);
$events = $em->getRepository('AppBundle\Entity\Calendrier')
->findBy(array(
'aquarium' => $aquariums
));
$calendrier = array();
foreach ($events as $event) {
$e = array();
$e['id'] = $event->getId();
$e['title'] = $event->getTypeEntretiens() . " pour l'aquarium " . $event->getAquarium()->getNom();
$e['start'] = $event->getDateEntretiens();
if ($event->getRealise()) {
$e['color'] = 'green';
} else {
$e['color'] = 'red';
}
$e['allDay'] = true;
array_push($calendrier, $e);
}
return $this->json($calendrier);
}
Here's my twig template:
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('css/membre/fullcalendar.min.css') }}">
{% endblock %}
{% block body %}
<div id='calendar'></div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('js/membre/moment.min.js') }}"></script>
<script src="{{ asset('js/membre/jquery.min.js') }}"></script>
<script src="{{ asset('js/membre/fullcalendar.min.js') }}"></script>
<script src="{{ asset('js/membre/fr.js') }}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
events: '/calendrierFeed',
defaultView: 'month',
selectable:true,
selectHelper:true,
editable:true
});
});
</script>
{% endblock %}
And here's my JSON feed
[{"id":2,"title":"oui pour l\u0027aquarium 200L","start":{"date":"2018-02-12 00:00:00.000000","timezone_type":3,"timezone":"UTC"},"color":"red","allDay":true}]
Your date should be a string, not an object.
I checked in my json feed in my personnal project, I got it this way:
"start":"2018-02-13"
From the doc
The date/time an event begins. Required.
A Moment-ish input, like an ISO8601 string. Throughout the API this
will become a real Moment object.
This mean you should format your date
$e['start'] = $event->getDateEntretiens()->format('Y-m-d');
I use Symfony3 with Twig template and VueJs 2.
My symfony controller returns a Twig view with Articles component :
{% extends 'base.html.twig' %}
{% block body %}
<Articles></Articles>
{% endblock %}
And my Articles.vue component :
<template>
<section class="articleapp">
<header>
<h1>Mes articles</h1>
</header>
<div class="main">
<li class="article" v-for="article in articles">
{{ article.title }}
</li>
</ul>
</div>
</section>
</template>
<script>
export default {
data () {
return {
articles: [{title: "Voici le nom d'un article"}]
}
}
}
</script>
I would like translate my title "Mes articles" with Sf/Twig i18n like {{ "Mes articles"|trans({}, "") }} to benefit of translate catalogs.
With Single page component it's impossible.
But with X-Template, the problem can be resolve :
index.html.twig :
{% extends 'base.html.twig' %}
{% block title %}{{ "Mes posts"|trans({}, 'app') }}{% endblock %}
{% block body %}
<div id="app">
<post-form></post-form>
</div>
{% endblock %}
{% block components %}
{{ include("components/form.html.twig", {"form": form }) }}
{% endblock %}
components/form.html.twig :
<script id="post-form-template" type="text/x-template">
<div>
{{ "Mon formulaire"|trans({}, '') }}
{{ form(form) }}
<h1>${ greetings }</h1>
</div>
</script>
And my app.js :
import Vue from "vue";
import VueResource from "vue-resource"
Vue.use(VueResource);
Vue.component('post-form', {
delimiters: ['${', '}'],
template: '#post-form-template',
data: function () {
return {
greetings: 'Hello'
};
}
});
new Vue({
delimiters: ['${', '}'],
el: "#app"
});
I need to output data and fill my template throught custum function
this is my imports
<script src="{{ asset('bundles/.../handlebars/handlebars.js') }}"></script>
<script src="{{ asset('bundles/.../handlebars_helpers.js') }}"></script>
this is my template into twig page
<script id="di_template" type="text/x-handlebars-template">
{% verbatim %}
<h1>Title </h1>
Invoice {{ invoice.invoice_number }}
{% endverbatim %}
</script>
this my build Template Function
function buildTemplate(){
context = {
invoice: {
invoice_number: 'val1',
invoice_date: 'val2',
invoice_due_date: 'val3',
invoice_from_company: 'val4'
}
};
template = $('#di_template').html();
template_compiled = Handlebars.compile(template);
theCompiledHtml = template_compiled(context);
$invoice_preview.html(theCompiledHtml);
}
this my result
I've added some javascript code below to show some photos using a slide show jquery plugin.
//parent template
{% block javascripts %}
<script src="{{ asset('http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/canalonesfrontend/js/slides.min.jquery.js') }}" type="text/javascript"></script>
{% endblock %}
//child template
{% block javascripts %}
{{ parent() }}
$(function(){
$("#slides").slides();
});
{% endblock %}
The problem: the code is shown in the web page directly:
Some content
$(function(){ $("#slides").slides(); });
you have to wrap with <script></script> tag around your code
//child template
{% block javascripts %}
{{ parent() }}
<script type="text/javascript">
$(function(){
$("#slides").slides();
});
</script>
{% endblock %}
I hope you understood the problem!
In my twig file i have a JS method that needs a path to flash files located in web/bundles/bm/swf/.. I don't need to load a specific file just point the method to that path.
{% block javascripts %}
{{parent()}}
<script type="text/javascript" src="{{ asset('bundles/bm/js/soundmanager2.js') }}"></script>
<script>
soundManager.url = ''; < needs the path to web/bundles/bm/swf/
soundManager.onload = function() { }
</script>
{% endblock %}
Any idea?
{% block javascripts %}
{{parent()}}
<script type="text/javascript" src="{{ asset('bundles/bm/js/soundmanager2.js') }}"></script>
<script type="text/javascript">
soundManager.url = '{{ asset('bundles/bm/swf/')}}';
soundManager.onload = function() { }
</script>
{% endblock %}