Catégorie : Technique web

Bootstrap 5: Les breackpoints

Voici les principaux breakpoints de bootstrap:


/* X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap*/

/* sm - Small devices (landscape phones, 576px and up)*/
@media screen and (min-width: 576px) {   }

/* md - Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {   }

/* lg - Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {   }

/* xl - X-Large devices (large desktops, 1200px and up)*/
@media screen and (min-width: 1200px) {   }

/* xxl - XX-Large devices (larger desktops, 1400px and up)*/
@media screen and (min-width: 1400px) {   }

MapBox: plusieurs markers personnalisés avec Infobox On Click

Le cosde est le même mais au moment de Convertir vos markers en un élément html :

<div id='map' style='width: 100%; height: 100vh'></div>
<script>
        mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
        
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/...',
        zoom: 13,
        center: [6.1430, 46.2048]
        });
        
        // Add zoom and rotation controls to the map.
        map.addControl(new mapboxgl.NavigationControl(),'bottom-right');

        var geojson ={
              type: 'FontaineCollection',
              features: [{
                  
                type: 'Fontaine',
                geometry: {
                  type: 'Point',
                  coordinates: [6.14091, 46.20634]
                },
                properties: {
                  title: 'Fontaine de Saint-Gervais',
                  description: 'Eglise de Saint-Gervais',
                  category:'potable'
                }
                
              },
               {
                type: 'Fontaine',
                geometry: {
                  type: 'Point',
                  coordinates: [6.14921, 46.20035 ]
                },
                properties: {
                  title: 'Fontaine du Bourg-de-Four',
                  description: 'Place du Bourg-de-Four',
                    category:'potable'
                }
               },
               {
                type: 'Fontaine',
                geometry: {
                  type: 'Point',
                  coordinates: [6.15237, 46.20413]
                },
                properties: {
                  title: 'Fontaine des 4 saisons',
                  description: 'Jardin anglais',
                 category:'non-potable'
                }
                
              }]
            }; 

        
        // add markers to map
        geojson.features.forEach(function(marker) {

          // create a HTML element for each feature
          var el = document.createElement('div');
          el.className = 'marker' + ' ' + marker.properties.category;

          // make a marker for each feature and add to the map
          new mapboxgl.Marker(el)
            .setLngLat(marker.geometry.coordinates)
            .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
            .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
            .addTo(map);
        });

        
</script>

Stylez le popup html dans votre css

.mapboxgl-popup {
  max-width: 200px;
}

.mapboxgl-popup-content {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

Référence: https://docs.mapbox.com/help/tutorials/custom-markers-gl-js/

MapBox: plusieurs markers personnalisés

Créer votre carte initiale

<div id='map' style='width: 100%; height: 100vh'></div>
<script>
        mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
        
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/...',
        zoom: 13,
        center: [6.1430, 46.2048]
        });
        
        // Add zoom and rotation controls to the map.
        map.addControl(new mapboxgl.NavigationControl(),'bottom-right');
        
</script>

Ajouter vos markers dans un Json
Noté l’ajout d’une catégorie

<div id='map' style='width: 100%; height: 100vh'></div>
<script>
        mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
        
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/...',
        zoom: 13,
        center: [6.1430, 46.2048]
        });
        
        // Add zoom and rotation controls to the map.
        map.addControl(new mapboxgl.NavigationControl(),'bottom-right');

 var geojson ={
              type: 'FontaineCollection',
              features: [{
                  
                type: 'Fontaine',
                geometry: {
                  type: 'Point',
                  coordinates: [6.14091, 46.20634]
                },
                properties: {
                  title: 'Fontaine de Saint-Gervais',
                  description: 'Eglise de Saint-Gervais',
                  category:'potable'
                }
                
              },
               {
                type: 'Fontaine',
                geometry: {
                  type: 'Point',
                  coordinates: [6.14921, 46.20035 ]
                },
                properties: {
                  title: 'Fontaine du Bourg-de-Four',
                  description: 'Place du Bourg-de-Four',
                    category:'potable'
                }
               },
               {
                type: 'Fontaine',
                geometry: {
                  type: 'Point',
                  coordinates: [6.15237, 46.20413]
                },
                properties: {
                  title: 'Fontaine des 4 saisons',
                  description: 'Jardin anglais',
                 category:'non-potable'
                }
                
              }]
            }; 

   

</script>

Convertissez vos markers en un éléments html 

<div id='map' style='width: 100%; height: 100vh'></div>
<script>
        mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
        
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/...',
        zoom: 13,
        center: [6.1430, 46.2048]
        });
        
        // Add zoom and rotation controls to the map.
        map.addControl(new mapboxgl.NavigationControl(),'bottom-right');

        var geojson ={
              type: 'FontaineCollection',
              features: [{
                  
                type: 'Fontaine',
                geometry: {
                  type: 'Point',
                  coordinates: [6.14091, 46.20634]
                },
                properties: {
                  title: 'Fontaine de Saint-Gervais',
                  description: 'Eglise de Saint-Gervais',
                  category:'potable'
                }
                
              },
               {
                type: 'Fontaine',
                geometry: {
                  type: 'Point',
                  coordinates: [6.14921, 46.20035 ]
                },
                properties: {
                  title: 'Fontaine du Bourg-de-Four',
                  description: 'Place du Bourg-de-Four',
                    category:'potable'
                }
               },
               {
                type: 'Fontaine',
                geometry: {
                  type: 'Point',
                  coordinates: [6.15237, 46.20413]
                },
                properties: {
                  title: 'Fontaine des 4 saisons',
                  description: 'Jardin anglais',
                 category:'non-potable'
                }
                
              }]
            }; 

        
        // add markers to map
        geojson.features.forEach(function(marker) {

          // create a HTML element for each feature
          var el = document.createElement('div');
          el.className = 'marker' + ' ' + marker.properties.category;

          // make a marker for each feature and add to the map
          new mapboxgl.Marker(el)
            .setLngLat(marker.geometry.coordinates)
            .addTo(map);
        });

        
</script>

Grâce à cet élément el.className = ‘marker’ + ‘ ‘ + marker.properties.category; la catégorie est passée comme classe supplémentaire… et donc il est possible d’attribuer un style différent

Stylez l’élément html dans votre css

.marker {
  background-image: url('images/VZA.svg');
  background-size: cover;
  background-color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}

.marker.non-potable{
    background-color: red;
}

Référence: https://docs.mapbox.com/help/tutorials/custom-markers-gl-js/

MapBox: un marker personnalisé

Créer votre carte initiale

<div id='map' style='width: 100%; height: 100vh'></div>
<script>
        mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
        
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/...',
        zoom: 13,
        center: [6.1430, 46.2048]
        });
        
        // Add zoom and rotation controls to the map.
        map.addControl(new mapboxgl.NavigationControl(),'bottom-right');
        
</script>

Ajouter votre marker dans un Json

<div id='map' style='width: 100%; height: 100vh'></div>
<script>
        mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
        
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/...',
        zoom: 13,
        center: [6.1430, 46.2048]
        });
        
        // Add zoom and rotation controls to the map.
        map.addControl(new mapboxgl.NavigationControl(),'bottom-right');


// Markers Json
var geojson = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [6.14091, 46.20634]
    },
    properties: {
      title: 'Fontaine',
      description: 'Saint-Gervais'
    }
  }]
};


</script>

Convertissez votre marker en un élément html 

<div id='map' style='width: 100%; height: 100vh'></div>
<script>
        mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
        
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/...',
        zoom: 13,
        center: [6.1430, 46.2048]
        });
        
        // Add zoom and rotation controls to the map.
        map.addControl(new mapboxgl.NavigationControl(),'bottom-right');

// Markers Json
var geojson = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [6.14091, 46.20634]
    },
    properties: {
      title: 'Fontaine',
      description: 'Saint-Gervais'
    }
  }]
};

// add markers to map
geojson.features.forEach(function(marker) {

  // create a HTML element for each feature
  var el = document.createElement('div');
  el.className = 'marker';

  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);
});

        
</script>

Stylez l’élément html dans votre css

.marker {
  background-image: url('images/VZA.svg');
  background-size: cover;
  background-color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}

Référence: https://docs.mapbox.com/help/tutorials/custom-markers-gl-js/

Intégrer une carte OpenStreetMap personnalisée avec Mapbox

1) Créer un compte sur mapbox.com

2) Choisissez le type d’API (Application Programming Interface)

3) Copier les liens des scripts et coller-les dans le header de votre fichier html

4) Copier le code d’intégration de votre carte dans le body de votre fichier html.

Vous pouver adapter le format de votre carte directement ici

Customisation

<script>
        mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/...',
        zoom: 13,
        center: [6.1430, 46.2048]
        });
</script>
  • mapboxgl.accessToken: Votre token personnel à restreindre sur l’url de publication
  • style: Lien sur votre style personnalisé
  • zoom: zoom!
  • center: Position de la carte au chargement

Ajouter une interface de navigation, positionnée en bas à droite

<script>
        mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/...',
        zoom: 13,
        center: [6.1430, 46.2048]
        });
        
        // Add zoom and rotation controls to the map.
        map.addControl(new mapboxgl.NavigationControl(),'bottom-right');
        
</script>

Ajouter un marker

<script>
        mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/...',
        zoom: 13,
        center: [6.1430, 46.2048]
        });
        
        // Add zoom and rotation controls to the map.
        map.addControl(new mapboxgl.NavigationControl(),'bottom-right');

        // Add markers to the map.
        var marker = new mapboxgl.Marker()
        .setLngLat([6.14091, 46.20634])
        .addTo(map);
        
</script>

Référence: https://docs.mapbox.com/mapbox-gl-js/api/