Application Technologies & Outils

Responsive design: Bootstrap & Leaflet

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).

capture_08222013_095741 Responsive design: Bootstrap & Leaflet
Responsive design: tablette

ifrzmej Responsive design: Bootstrap & Leaflet
Responsive design: mobile

Related Posts

8 comments

comments user
Carlo

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

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

      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
        comments user
        ABDOU DIOUCK

        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.
          comments user
          guitousson

          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
        comments user
        ABDOU DIOUCK

        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
          comments user
          guitousson

          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
comments user
guitousson

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

Comments are closed.

You May Have Missed