HandiToit carto

Exemple d'affichage des cartes HandiToit Provence

by Nicolas Lips

HTML

<div>
  <h4>
    Démo cartographie HandiToit
  </h4>
  <div>
    <h5>
      Département du 13
    </h5>
    <div id="map13" style="height:300px">
    </div>
  </div>
  <div>
    <h5>
      Département du 83
    </h5>
    <div id="map83" style="height:300px">
    </div>
  </div>
  <div>
    <h5>
      Département du 84
    </h5>
    <div id="map84" style="height:300px">
    </div>
  </div>
  <div>
    <h5>
      Département du 06
    </h5>
    <div id="map06" style="height:300px">
    </div>
  </div>
  <div>
    <h5>
      Département du 04 et 05
    </h5>
    <div id="map0405" style="height:300px">
    </div>
  </div>
</div>
<!-- Plugin jQuery pour l'affichage d'une carte HandiToit -->
<script src="https://handitoittest.azurewebsites.net/bundles/handiToitCarto"></script>
<!-- API GoogleMaps
ATTENTION : le paramètre Key passé ici est temporaire. A terme, on utilisera la clé du compte Google Masp de HandiToit -->
<!-- Le paramètre "callback" correspond à la fonction à appellée une fois l'API G>oogel Maps chargée -->
<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD8QNRTsgxH_wPPp6YAiWtiCmmM2-8Qwpc&amp;callback=initMap">


</script>

CSS

.handiToitCartoInfoWindow div.nomCommune {
  font-weight: bold;
}

.handiToitCartoInfoWindow div.total {
  padding-top: 0.5em;
  width: 17em;
  float: left;
}

.handiToitCartoInfoWindow div.total .legend {
  margin-top: 0.5em;
}

.handiToitCartoInfoWindow div.labelQualite {
  padding-top: 0.5em;
  width: 17em;
  float: left;
}

.handiToitCartoInfoWindow div.labelQualite .legend {
  margin-top: 0.5em;
}

.handiToitCartoInfoWindow .repartition {
  clear: both;
}

.handiToitCartoInfoWindow .repartition ul.petit {
  padding-top: 0.5em;
  width: 17em;
  float: left;
}

.handiToitCartoInfoWindow .repartition ul.grand {
  padding-top: 0.5em;
  width: 17em;
  float: left;
}

.handiToitCartoInfoWindow .repartition ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.handiToitCartoInfoWindow .repartition ul li {
  margin-top: 0.5em;
}

JavaScript

// fonction d'initialisation des cartes appellés une fois l'API Google Maps chargée
function initMap() {
  // url du serveur (à terme on utilisera le serveur de production)
  var appUrl = "https://handitoittest.azurewebsites.net";

  // handiToitCarto est un plugin jQuery qui prend en paramètres :
  // - appUrl : URL de l'applicaition où chercger les données
  // - departements : objet décrivant les départements à chargé (ne fonctionne qu'avec les départements de la région PACA). Chaque nom de propriété correspond au numéro de département (sous forme d'une chaîne de caractère). La valeur est un objet qui contient la propriété "color" et correspond à la couleur dans laquelle doit êrte fait le tracé pour les communes du département.

  // carte du 13
  $("#map13").handiToitCarto(appUrl, {
    "13": {
      color: "navy"
    }
  });
  // carte du 83
  $("#map83").handiToitCarto(appUrl, {
    "83": {
      color: "green"
    }
  });
  // carte du 84
  $("#map84").handiToitCarto(appUrl, {
    "84": {
      color: "orange"
    }
  });
  // carte du 06
  $("#map06").handiToitCarto(appUrl, {
    "06": {
      color: "blue"
    }
  });
  // carte du 04 et 05
  $("#map0405").handiToitCarto(appUrl, {
    "04": {
      color: "black"
    },
    "05": {
      color: "red"
    }
  });
}