Forum : OpenLayers dans Laravel (question basique)

Shark,

il y a 7 ans

Hello possible de voir le code du layout ainsi que ton include content ? Ca serait plus facile de te répondre :)

Julien Brault,

il y a 7 ans

Oui, bien sur, je suis honteux de n'y avoir pas pensé ...

Entre temps j'ai essayé plusieurs sites de cartes, et voici mon exemple avec le dernier : Here map (documentation)

Pour le header de mon application, j'ai conservé le App.blade.php installé par Laravel.

J'y ai ajouté les scripts de Here à mettre dans le header (mais c'est peut etre ca mon erreur, les scripts se mettent peut être ailleurs...).
Voir ci dessous les 2 insertions, au niveau des 2 balises , au début et à la fin du HEAD

<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="viewport" content="initial-scale=1.0, width=device-width" />  <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Cactus4') }}</title>  <script src="{{ asset('js/app.js') }}" defer></script>  <link rel="dns-prefetch" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">  <link href="{{ asset('css/app.css') }}" rel="stylesheet">  <script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script> <script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <nav class="navbar navbar-expand-md navbar-light navbar-laravel"> <div class="container"> <a class="navbar-brand" href="{{ url('/') }}"> {{ config('app.name', 'Cactus4') }} </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent">  <ul class="navbar-nav mr-auto"> </ul>  <ul class="navbar-nav ml-auto">  @guest <li class="nav-item"> <a class="nav-link" href="{{ route('login') }}">{{ __('Se connecter') }}</a> </li> <li class="nav-item"> @if (Route::has('register')) <a class="nav-link" href="{{ route('register') }}">{{ __('Nouveau PDG sur my-industry? Inscrits-toi') }}</a> @endif </li> @else <li class="nav-item dropdown"> <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> {{ Auth::user()->name }} <span class="caret"></span> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> {{ __('Logout') }} </a> <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> @csrf </form> </div> </li> @endguest </ul> </div> </div> </nav> <main class="py-4"> @yield('content') </main> </div> </body> </html>

J'ai créé une view
ville.blade.php
Dans laquelle j'ai la DIV de la carte, ainsi que son Script

@extends('layouts.app') @section('content') <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Villes</div> <div class="card-body"> <div style="width: 640px; height: 480px" id="mapContainer"></div> <script> // Initialize the platform object: var platform = new H.service.Platform({ 'app_id': 'devportal-demo-20180625', 'app_code': '9v2BkviRwi9Ot26kp2IysQ' }); // Obtain the default map types from the platform object var maptypes = platform.createDefaultLayers(); // Instantiate (and display) a map object: var map = new H.Map( document.getElementById('mapContainer'), maptypes.normal.map, { zoom: 10, center: { lng: 13.4, lat: 52.51 } }); </script> </div> </div> </div> </div> </div> @endsection

Mais voici le résultat : un cadre blanc, avec un icone de Here Maps

rueduphp,

il y a 7 ans

Bonjour,

peut-être un problème de droits ? Es-tu certain de tes credentials ?

var platform = new H.service.Platform({ 'app_id': 'devportal-demo-20180625', 'app_code': '9v2BkviRwi9Ot26kp2IysQ' });

Avec une page html classique, j'ai aussi un cadre blanc.

Julien Brault,

il y a 7 ans

J'ai tout recommencé de zéro.

Voici le code d'une page HTML qui affiche très bien la carte :

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, width=device-width" /> <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" /> <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script> </head> <body> <div id="map" style="width: 100%; height: 400px; background: grey" /> <script type="text/javascript" charset="UTF-8" > /** * Moves the map to display over Berlin * * @param {H.Map} map A HERE Map instance within the application */ function moveMapToBerlin(map){ map.setCenter({lat:52.5159, lng:13.3777}); map.setZoom(14); } /** * Boilerplate map initialization code starts below: */ //Step 1: initialize communication with the platform var platform = new H.service.Platform({ app_id: 'devportal-demo-20180625', app_code: '9v2BkviRwi9Ot26kp2IysQ', useHTTPS: true }); var pixelRatio = window.devicePixelRatio || 1; var defaultLayers = platform.createDefaultLayers({ tileSize: pixelRatio === 1 ? 256 : 512, ppi: pixelRatio === 1 ? undefined : 320 }); //Step 2: initialize a map - not specificing a location will give a whole world view. var map = new H.Map(document.getElementById('map'), defaultLayers.normal.map, {pixelRatio: pixelRatio}); //Step 3: make the map interactive // MapEvents enables the event system // Behavior implements default interactions for pan/zoom (also on mobile touch environments) var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); // Create the default UI components var ui = H.ui.UI.createDefault(map, defaultLayers); // Now use the map as required... moveMapToBerlin(map); </script> </body> </html>

Voici mon app.blade.php, puis le ville.blade.php

APP.BLADE.PHP:

<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="viewport" content="initial-scale=1.0, width=device-width" />  <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Cactus4') }}</title>  <script src="{{ asset('js/app.js') }}" defer></script>  <link rel="dns-prefetch" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">  <link href="{{ asset('css/app.css') }}" rel="stylesheet">  <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" /> <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script> </head> <body> <div id="app"> <nav class="navbar navbar-expand-md navbar-light navbar-laravel"> <div class="container"> <a class="navbar-brand" href="{{ url('/') }}"> {{ config('app.name', 'Cactus4') }} </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent">  <ul class="navbar-nav mr-auto"> </ul>  <ul class="navbar-nav ml-auto">  @guest <li class="nav-item"> <a class="nav-link" href="{{ route('login') }}">{{ __('Se connecter') }}</a> </li> <li class="nav-item"> @if (Route::has('register')) <a class="nav-link" href="{{ route('register') }}">{{ __('Nouveau PDG sur my-industry? Inscrits-toi') }}</a> @endif </li> @else <li class="nav-item dropdown"> <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> {{ Auth::user()->name }} <span class="caret"></span> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> {{ __('Logout') }} </a> <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> @csrf </form> </div> </li> @endguest </ul> </div> </div> </nav> <main class="py-4"> @yield('content') </main> </div> </body> </html>

VILLE.BLADE.PHP

@extends('layouts.app') @section('content') <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Villes</div> <div class="card-body"> <div id="map" style="width: 100%; height: 400px; background: grey" /> <script type="text/javascript" charset="UTF-8" > /** * Moves the map to display over Berlin * * @param {H.Map} map A HERE Map instance within the application */ function moveMapToBerlin(map){ map.setCenter({lat:52.5159, lng:13.3777}); map.setZoom(14); } /** * Boilerplate map initialization code starts below: */ //Step 1: initialize communication with the platform var platform = new H.service.Platform({ app_id: 'devportal-demo-20180625', app_code: '9v2BkviRwi9Ot26kp2IysQ', useHTTPS: true }); var pixelRatio = window.devicePixelRatio || 1; var defaultLayers = platform.createDefaultLayers({ tileSize: pixelRatio === 1 ? 256 : 512, ppi: pixelRatio === 1 ? undefined : 320 }); //Step 2: initialize a map - not specificing a location will give a whole world view. var map = new H.Map(document.getElementById('map'), defaultLayers.normal.map, {pixelRatio: pixelRatio}); //Step 3: make the map interactive // MapEvents enables the event system // Behavior implements default interactions for pan/zoom (also on mobile touch environments) var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); // Create the default UI components var ui = H.ui.UI.createDefault(map, defaultLayers); // Now use the map as required... moveMapToBerlin(map); </script> </div> </div> </div> </div> </div> @endsection

Cette fois, je n'ai plus un cadre blanc, mais un cadre gris XD

Shark,

il y a 7 ans

As tu essayer de mettre l'init de la map dans ton ville.blade ?

@extends('layouts.app') @section('title', 'Carte') @section('content') <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=TON_API_KEY&callback=initMap"> </script> @endsection

Julien Brault,

il y a 7 ans

Oui même résultat...

Sinon je me demandais... Est ce que ca peut venir du STYLE #map dans le HEAD qui ferait "doublon" avec une classe du CSS qui s'appellerait map ?

Julien Brault,

il y a 7 ans

Bon j'ai repris d'anciens commits pour reprendre encore...

je suis peut etre sur une piste, j'ai effacé mon dernier message pour pas que vous cherchiez pour rien... Je reviens dès que j'en saurais plus sur mes tests

OpenLayers dans Laravel (question basique)

Comment le "traduire" en Laravel?

7 réponses