Responsive design: Bootstrap & Leaflet

le

Aujourd’hui, je viens vous présenter ma dernière réalisation: une solution pertinente et opensource pour construire des applications  cartographiques responsive design en html5 . Cette application est construite essentiellement avec Bootstrap 3 et Leaflet. Ce modèle dispose des fonctionnalités très intuitives tels que le plein écran, une barre de navigation, une barre de recherche et une minimap.

Les données(Réseau star accessible sur l’ Open data de  Rennes Métropole) sont directement chargées en Geojson et alimentent la fonctionnalité élégante de recherche multicouches avec saisie semi-automatique utilisant typeahead.js

Intégration également de popups et de contrôles personnalisés pour activer la visibilité des couches de données  au niveau de la légende

L’application est évidemment responsive design et s’adapte automatiquement à tous les écrans (desktop, tablette et mobile).

Responsive design
Responsive design: tablette

Responsive design
Responsive design: mobile

8 commentaires Ajouter un commentaire

  1. Carlo dit :

    Bonjour et merci pour votre article.
    Sauriez-vous s’il est possible de faire de même pour la ville de Londres?

    1. ABDOU DIOUCK dit :

      Bonjour
      Oui évidemment il faut juste avoir les données qu’il faut pour les afficher sur la carte

      1. guitousson dit :

        Bonjour Abdou,
        Je trouve ton design simple et efficace !
        Je suis en train de monter un site web (pour l’association shakin provence) :
        http://shakinprovence.meteor.com
        pour l’instant le design n’existe pas :).
        Est-ce possible de partager des bribes de ton design bootstrap 3 ?
        ps: j’en profite pour te demander à tout hasard si tu savais où je pourrais trouver des données de densité de population à l’échelle nationale mais qui soit plus précis que le niveau département (100 m2 par exemple).
        Merci d’avance
        Amicalement
        Jean-Guillaume

        1. ABDOU DIOUCK dit :

          Bjr dsl pour le retard
          Oui pourquoi pas vous voulais faire de la carto?
          Je ne sais pas ou vous êtes sinon pour la france les données de population (RGP)sont disponibles à l’échelle des communes sur le site de l’INSEE gratuitement sinon payantes à l’échelle de lIRIS.
          Tu peux également carroyer tes données de population par communes par 100m2.

          1. guitousson dit :

            Bonjour Abdou,
            Merci pour ton retour.
            Oui effectivement je fais de la carto pour identifier les startups de la région.
            http://shakinbase.meteor.com/
            Je n’ai pas vraiment d’habillage bootstrap pour présenter la carto. J’aimerais par exemple proposer des filtres via le menu comme tu le fais dans ton design.
            Je viens d’envoyer une demande à l’INSEE.
            C’est quoi l’IIRIS ?
            Bien à toi
            Jean-Guillaume

        2. ABDOU DIOUCK dit :

          Vous pouvez les telecharger depuis ici
          http://www.insee.fr/fr/themes/theme.asp?theme=2
          Sinon l’iris est une unité statistique d’une maille de 2000hts
          voici la définition de l’insee
          http://www.insee.fr/fr/methodes/default.asp?page=definitions/iris.htm
          sinon pour bootstrap vous pouvez prendre ce template http://diouck.esy.es//bootstrap_Accident_rennes.rar

          1. guitousson dit :

            Bonjour Abdou,
            Super ! Merci beaucoup pour ces informations.
            Je ne connaissais pas le thème bootleaf. il est vraiment idéal pour de la carto.
            Je vais essayer d’aller chercher de l’information sur la densité auprès de l’INSEE mais j’avoue que je ne trouve pas super évident à trouver pour un novice.
            Amicalement
            Jean-Guillaume

  2. guitousson dit :

    désolé l’url est celle-ci :
    shakinbase.meteor.com
    Jean-Guillaume

Laisser un commentaire