Forum : Présentation façon RbnB avec open map street

popotte

Réponse acceptée

ah par contre la carte en gris c'est un probleme js, regardes dans l'inspecteur onglet "Console" :o

Grafikart

Le problème du vendor/autoload.php vient du fait que tu n'a pas installé les dependances PHP via composer.

popotte

C'est rare (ça ne m'est arrivé que deux fois en plusieurs années) mais il peut y avoir un problème avec l'installation de composer, suffit de supprimer le dossier vendor et de relancer un coup de composer install et pouf ça va mieux ;)

Jonathan Ramon

Auteur

Bonjour et merci pour vos reponses !

J'ai essayé d'installer le composer mais cela n'a pas eu d'effet, mais je n'ai pas supprimé le dossier vendor, il faut que j'essaye. Cependant, même en supprimant du code la fonction qui semblait poser probleme (celle qui genère des données aléatoirement) j'ai la carte qui ne s'affiche pas, cela fonctionne au début (juste lorsque l'on l'integre avec leaflet) mais je ne sais pas trop pourquoi, lorsque je tape la suite du code proposé, ma carte devient grise, est ce que vous auriez une idée du problème ?

popotte

ah non il faut supprimer le dossier vendor

Si tu essayes d'installer composer avec le dossier vendor composer va d'abord checker si le dossier vendor existe, il va constater qu'il existe déjà et du coup il ne fera rien :p

Jonathan Ramon

Auteur

Merci pour ta réponse !
Je crois que je n'avais pas bien compris le fonctionnement, je vais ressayer ce soir, mais est-ce que cela peut aussi expliqué que la carte s'affiche en gris ? J'ai juste les icones zoom +/-?

Jonathan Ramon

Auteur

j'édite parce que j'ai trouvé le problème ! Merci beaucoup !

merci pour ton aide ! Cela m'affiche ça mais je ne comprend pas trop le soucis :
VM7 leaflet.js:5

   Uncaught (in promise) TypeError: Cannot read properties of null (reading 'openPopup')
at i.openOn (VM7 leaflet.js:5:91959)
at new LeafletMarker (app.js:48:8)
at LeafletMap.addMarker (app.js:26:12)
at app.js:85:22
at Array.forEach (<anonymous>)
at initMap (app.js:84:55)

app.js:18

   Uncaught ReferenceError: resolve is not defined
at app.js:18:9
at y (vendor.js:6:373)
at HTMLScriptElement.i.onload.i.onerror.i.<computed> (vendor.js:6:907)

Jonathan Ramon

Auteur

Je me permets de reposter une question ici pour ne pas encombrer le forum.
Je souhaiterais rajouter une option pour fermer les popup agrandie sur ma carte au click (sur une croix ou sur la carte).
Malheuresement, lorsque j'utilise les caractérisiques de base ( closeButton: true ) cela entraine une supression totale de la popup alors que je souhaiterais juste fermer la version agrandie de la popup.
J'ai essayé sans succés et je ne vois pas comment faire, pourriez-vous m'aider ?
Je débute en codage et le js me pose problème...
Merci par avance.

popotte

Au click tu fais un event JS pouur passer en display none

Tu charges deux cartes, une minicarte et une carte agrandie, tu supprimes la carte agrandie et tu laisses la petite :)

Jonathan Ramon

Auteur

Je te remercie pour ta réponse mais ayant du mal avec le JS j'ai du mal à voir comment le mettre en forme. Le code actuel gère bien les popup avec notament une réduction d'une popup agrandie si on clique sur une seconde popup pour l'ouvrir mais je n'arrive pas soit à ajouter un bouton pour laisser la possibilité de réduire la popup agrandie soit à réduire la popup agrandie si on clique sur la carte. Mon soucis c'est qu'actuellement il n'y a aucune façon de réduire les popup agrandies sauf à cliquer sur une autre popup et c'est pas vraiment pratique.

le code actuel est :

class LeafletMarker {
constructor (point, text, map) {
this.text = text
this.popup = L.popup({
autoClose: false,
closeOnEscapeKey: false,
closeOnClick: false,
closeButton: false,
className: 'marker',
maxWidth: 400

})
  .setLatLng(point)
  .setContent(text)
  .openOn(map)

}

setActive () {
this.popup.getElement().classList.add('is-active')
}

unsetActive () {
this.popup.getElement().classList.remove('is-active')
}

addEventListener (event, cb) {
this.popup.addEventListener('add', () => {
this.popup.getElement().addEventListener(event, cb)
})
}

setContent (text) {
this.popup.setContent(text)
this.popup.getElement().classList.add('is-expanded')
this.popup.update()
}

resetContent () {
this.popup.setContent(this.text)
this.popup.getElement().classList.remove('is-expanded')
this.popup.update()
}

}

const initMap = async function () {
let map = new LeafletMap()
let hoverMarker = null
let activeMarker = null
await map.load($map)
Array.from(document.querySelectorAll('.js-marker')).forEach((item) => {
let marker = map.addMarker(item.dataset.lat, item.dataset.lng, item.dataset.price + ' €')
item.addEventListener('mouseover', function () {
if (hoverMarker !== null) {
hoverMarker.unsetActive()
}
marker.setActive()
hoverMarker = marker
})
item.addEventListener('mouseleave', function () {
if (hoverMarker !== null) {
hoverMarker.unsetActive()
}
})
marker.addEventListener('click', function () {
if (activeMarker !== null) {
activeMarker.resetContent()
}
marker.setContent(item.innerHTML)
activeMarker = marker
})

})
map.center()
}

if ($map !== null) {
initMap()
}

popotte

Déjà je reposte le code en propre et ensuite de rep x)

class LeafletMarker {
  constructor (point, text, map) {
      this.text = text
      this.popup = L.popup({
        autoClose: false,
        closeOnEscapeKey: false,
        closeOnClick: false,
        closeButton: false,
        className: 'marker',
        maxWidth: 400
      })
      .setLatLng(point)
      .setContent(text)
      .openOn(map)
    }

    setActive () {
        this.popup.getElement().classList.add('is-active')
    }

    unsetActive () {
      this.popup.getElement().classList.remove('is-active')
    }

    addEventListener (event, cb) {
      this.popup.addEventListener('add', () => {
          this.popup.getElement().addEventListener(event, cb)
      })
    }

    setContent (text) {
      this.popup.setContent(text)
      this.popup.getElement().classList.add('is-expanded')
      this.popup.update()
    }

    resetContent () {
      this.popup.setContent(this.text)
      this.popup.getElement().classList.remove('is-expanded')
      this.popup.update()
    }
}

const initMap = async function () {
  let map = new LeafletMap()
  let hoverMarker = null
  let activeMarker = null

  await map.load($map)

  Array.from(document.querySelectorAll('.js-marker')).forEach((item) => {
        let marker = map.addMarker(item.dataset.lat, item.dataset.lng, item.dataset.price + ' €')
        item.addEventListener('mouseover', function () {

        if (hoverMarker !== null) {
            hoverMarker.unsetActive()
        }

        marker.setActive()
            hoverMarker = marker
        })

        item.addEventListener('mouseleave', function () {
            if (hoverMarker !== null) {
                hoverMarker.unsetActive()
            }
        })

        marker.addEventListener('click', function () {
            if (activeMarker !== null) {
                activeMarker.resetContent()
            }

            marker.setContent(item.innerHTML)
                activeMarker = marker
            })
        })

        map.center()
}

if ($map !== null) {
    initMap()
}

popotte

Ok alors deux solutions:

Soit en plus de retirer la class is-active tu ajoutes une class is-inactive qui servira a "annuler" les effets de active

Soit tu optes pour une façon bien plus simple: Bootstrap ! Bootstrap a un système de modals très simple qui permets de s'ouvrir et se fermer, tu peux customiser les effets avec du JS (Bootstrap inclut jQuery, donc dans les event listenner tu as juste a faire $(element).modal.show() ou $(element).modal.hide())

Ca dépends, si c'est pour apprendre le JS optes pour la solution 1, si c'est un projet perso ou pro optes pour la solution 2 ^^

Jonathan Ramon

Auteur

Bonjour et merci beaucoup, heuresement que tu es la pour mes débuts sur JS, j'ai réussi à obtenir ce que je voulais grâce à tes conseils !

j'essaye maintenant de créer un menu déroulant pour afficher ou masquer certaines div avec la fonction .change(function(){ mais je ne sais pas trop pourquoi cela ne marche pas ... tu verrais un soucis à mon code ?

j'ai ce code en JS (PS : mon texte ne se met pas en mode code je ne sais pas pourquoi désolé :( )

ce code en html

<div menu>
<select>
<option>Choisissez la couleur</option>
<option value ="cinema">cinema</option>
<option value="bowling">bowling</option>
<option value="resto">resto</option>
</select>
</div>
</section>
<section>
<h1 style="padding-left: 30px;">Où acheter le meilleur <strong>chocopain</strong></h1>
<div class="container">
<div class="list">
<div class="item js-marker bowling" data-lat ="43.650812" data-lng ="3.543216" data-price="Cinéma" data-value=1>
<img src="https://via.placeholder.com/400x260" alt="">
<h4>3 barres de chocolat pour le prix de 2 !</h4>
<p>
Ici une petite description qui explique pourquoi c'est mieux ici
</p>
</div>
<div class="item js-marker bowling" data-lat ="43.651651" data-lng ="3.544081" data-price="Bowling" data-value=2>
<img src="https://via.placeholder.com/400x260" alt="">
<h4>3 barres de chocolat pour le prix de 2 !</h4>
<p>
Ici une petite description qui explique pourquoi c'est mieux ici
</p>
</div>
<div class="item js-marker resto" data-lat ="43.650051" data-lng ="3.544481" data-price="Escape game" data-value=3>
<img src="https://via.placeholder.com/400x260" alt="">
<h4>3 barres de chocolat pour le prix de 2 !</h4>
<p>
Ici une petite description qui explique pourquoi c'est mieux ici
</p>
</div>
</div>

et ça en CSS :

.item.bowling {
cursor: pointer;
margin-bottom: 2rem;
transition: box-shadow .3s;
padding: 0 20px;
}
.item.resto {
cursor: pointer;
margin-bottom: 2rem;
transition: box-shadow .3s;
padding: 0 20px;
}
.item.cinema {
cursor: pointer;
margin-bottom: 2rem;
transition: box-shadow .3s;
padding: 0 20px;
}

Merci par avance :(

popotte

Avec plaisir ;)

Okay alors je remet un coup de propre sur le code avant de rep :p

<script type="text/javascript">
$(document).ready(function(){
        $("select").change(function(){
                $(this).find("option:selected").each(function(){
                        var val = $(this).attr("value");
                        if(val){
                                $(".js-marker").not("." + val).hide();
                                $("." + val).show();
                        } else{
                                $(".js-marker resto").hide();
                        }
                });
        }).change();
});
</script>

ce code en html

<div menu>
        <select>
                <option>Choisissez la couleur</option>
                <option value ="cinema">cinema</option>
                <option value="bowling">bowling</option>
                <option value="resto">resto</option>
        </select>
</div>
</section>

<section>
        <h1 style="padding-left: 30px;">Où acheter le meilleur <strong>chocopain</strong></h1>
        <div class="container">
                <div class="list">
                        <div class="item js-marker bowling" data-lat ="43.650812" data-lng ="3.543216" data-price="Cinéma" data-value=1>
                                <img src="https://via.placeholder.com/400x260" alt="">
                                <h4>3 barres de chocolat pour le prix de 2 !</h4>

                                <p>
                                        Ici une petite description qui explique pourquoi c'est mieux ici
                                </p>
                        </div>

                        <div class="item js-marker bowling" data-lat ="43.651651" data-lng ="3.544081" data-price="Bowling" data-value=2>
                                <img src="https://via.placeholder.com/400x260" alt="">
                                <h4>3 barres de chocolat pour le prix de 2 !</h4>

                                <p>
                                        Ici une petite description qui explique pourquoi c'est mieux ici
                                </p>
                        </div>

                        <div class="item js-marker resto" data-lat ="43.650051" data-lng ="3.544481" data-price="Escape game" data-value=3>
                                <img src="https://via.placeholder.com/400x260" alt="">
                                <h4>3 barres de chocolat pour le prix de 2 !</h4>

                                <p>
                                        Ici une petite description qui explique pourquoi c'est mieux ici
                                </p>
                        </div>
                </div>

et ça en CSS :

.item.bowling {
cursor: pointer;
margin-bottom: 2rem;
transition: box-shadow .3s;
padding: 0 20px;
}
.item.resto {
cursor: pointer;
margin-bottom: 2rem;
transition: box-shadow .3s;
padding: 0 20px;
}
.item.cinema {
cursor: pointer;
margin-bottom: 2rem;
transition: box-shadow .3s;
padding: 0 20px;
}

popotte

Mmmmh je vois pas trop :/

Si tes divs sont des modals alors faudrait changer c'est lignes:

$(".js-marker").not("." + val).modal.hide();
$("." + val).modal.show();

Jonathan Ramon

Auteur

Merci pour ta réponse mais ça ne marche pas :( mais je ne comprends pas ce qui me bloque.

popotte

Bon déjà y'a quelques trucs qui clochent :o

$(".js-marker resto").hide();

En gros ça ne ferme que la div resto, mais si c'est une autre div qui est ouverte alors la ca fermera pas

<div class="item js-marker bowling" data-lat ="43.650812" data-lng ="3.543216" data-price="Cinéma" data-value=1>
                                <img src="https://via.placeholder.com/400x260" alt="">
                                <h4>3 barres de chocolat pour le prix de 2 !</h4>

                                <p>
                                        Ici une petite description qui explique pourquoi c'est mieux ici
                                </p>
                        </div>

                        <div class="item js-marker bowling" data-lat ="43.651651" data-lng ="3.544081" data-price="Bowling" data-value=2>
                                <img src="https://via.placeholder.com/400x260" alt="">
                                <h4>3 barres de chocolat pour le prix de 2 !</h4>

                                <p>
                                        Ici une petite description qui explique pourquoi c'est mieux ici
                                </p>
                        </div>

les deux div ont la class bowling, si tu selectionnes cinema ca reagira pas, et si tu selectionne bowling ton code saura pas lequel afficher :p

Jonathan Ramon

Auteur

EDIT : c'est bon c'etait effectivement une petite coquille :) merci ! ça avance ça avance !

Prochain objectif : masquer également les marqueurs associés sur la carte ^^"

J'ai modifié depuis effectivement :) mais j'ai l'impression que quoi que je fasse rien ne se ferme, j'ai jamais eu la moindre réaction du code alors que celui de base que recupéré fonctionne sur un autre HTML donc je comprends pas.

Jonathan Ramon

Auteur

bonjour,
est-ce que tu sais s'il est possible de definir une condition d'affichage qui dépendent d'un point géographique. Par exemple si la personne choisie une ville, seule les marqueurs dans cette ville + eventuellement 5 10 ou 20 km s'affichent? je me suis aperçu que si je faisais pas ça ça allait vite etre la pagaille mais j'ai vraiment rien trouvé d'équivalent sur internet.

Présentation façon RbnB avec open map street

19 réponses