Commit 7d63db50 authored by Raph El's avatar Raph El
Browse files

Ajout des tiles, et modif de la docs

parent 9ff75db6
# map
# Module MAP
## URL
http://maps.stamen.com/#toner/12/37.7706/-122.3782
https://stamen.com/work/maps-stamen-com/
http://www.thunderforest.com/maps/
#TODO
## TODO
- [ ] Init css et js avec map
- [x] Faire sur FormInMAP
- [ ] De maniere générale
- [ ] Parametrable a l'init
- [ ] Le faire en synchrone
- [ ] Intégration des GeoShape
- [ ] Faire en sort de changer de TileLayer
- [x] Test différent Tile
- [ ] Réutileser différent Tile en fct du parametre
- [ ] Changer de fond a tout moment
[ ] Init css avec map
#DOC
## DOC
`mapObj` sera l'objet qui va contenir tout les variables et toutes les méthodes pour instancier une map
## pré-requis
### pré-requis
Il faut charger les librairies suivant :
......@@ -29,7 +41,7 @@ Permet de crée un cluster sur la carte
```
## variable
### variable
`container` : va contenir l'id de la balise qui contiendra la map.
- Valeur par defaut :'mapContainer',
......@@ -40,21 +52,24 @@ Permet de crée un cluster sur la carte
`markerList` : [],
## Fonction
### Fonction
### init
### addElts
### clearMap
### addMarker
#### init
#### setTile
`setTile()` : Défini le fond de carte
#### addElts
#### clearMap
#### addMarker
`addMarker(params)` : Ajoute un marker sur la map
##### Parametre
###### Parametre
- `elt` : Objet contenant les informations sur l'icône
- `elt.geo.latitude` : la latitude de l'objet
- `elt.geo.longitude` : la longitude de l'objet
- `addPopUp` : Définie si oui on non on ajoute une popUp à l'icône. Prend deux valeurs `true` ou `false`. Par default `false`.
- `center` : Définie si oui on non on soite centrer la carte sur l'icône. Prend deux valeurs `true` ou `false`. Par default `false`.
- `opt` : Objet contenant les informations sur l'icon
### addPolygon
### addCircle
### addPopUp
### activeCluster
\ No newline at end of file
#### addPolygon
#### addCircle
#### addPopUp
#### activeCluster
......@@ -31,27 +31,7 @@ var mapObj = {
//creation de la carte
mapObj.map = L.map(mapObj.container, mapObj.mapOpt);
// création tpl
//L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(mapObj.map);
var accessToken = 'pk.eyJ1IjoiY29tbXVuZWN0ZXIiLCJhIjoiY2l6eTIyNTYzMDAxbTJ3bng1YTBsa3d0aCJ9.elyGqovHs-mrji3ttn_Yjw';
// Replace 'mapbox.streets' with your map id.
var mapboxTiles = L.tileLayer('https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=' + accessToken, {
attribution: '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
mapObj.map.addLayer(mapboxTiles);
// L.tileLayer('https://api.mapbox.com/styles/v4/{id}/{zoom}/{x}/{y}{@2x}.{format}?access_token={accessToken}',
// {
// accessToken: 'pk.eyJ1IjoiY29tbXVuZWN0ZXIiLCJhIjoiY2l6eTIyNTYzMDAxbTJ3bng1YTBsa3d0aCJ9.elyGqovHs-mrji3ttn_Yjw',
// id : 'mapbox.light',
// format : 'png',
// zoom : 0
// }).addTo(mapObj.map);
mapObj.setTile();
if(mapObj.activeCluster === true){
mapObj.markersCluster = new L.markerClusterGroup({
......@@ -63,6 +43,40 @@ var mapObj = {
setTimeout(function(){ mapObj.map.invalidateSize()}, 400);
},
setTile : function(){
//Noir et Blanc
L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>', //'Map tiles by <a href="http://stamen.com">Stamen Design</a>',
zIndex:1,
minZoom: 3,
maxZoom: 17
}).addTo(mapObj.map);
//Noir et Blanc Lite
// L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', {
// attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>', //'Map tiles by <a href="http://stamen.com">Stamen Design</a>',
// zIndex:1,
// minZoom: 3,
// maxZoom: 17
// }).addTo(mapObj.map);
//OSM
//L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(mapObj.map);
//MAPBOX
// var accessToken = 'pk.eyJ1IjoiY29tbXVuZWN0ZXIiLCJhIjoiY2l6eTIyNTYzMDAxbTJ3bng1YTBsa3d0aCJ9.elyGqovHs-mrji3ttn_Yjw';
// // Replace 'mapbox.streets' with your map id.
// var mapboxTiles = L.tileLayer('https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=' + accessToken, {
// attribution: '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
// });
// mapObj.map.addLayer(mapboxTiles);
//SATELITE
//L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {}).addTo(mapObj.map);
},
addElts : function (data, addPopUp = false){
$.each(data, function(k,v){
......@@ -209,7 +223,7 @@ var mapCustom = {
custom : {
getThumbProfil : function (data){
var imgProfilPath = assetPath + "/images/thumb/default.png";
var imgProfilPath = modules.map.assets + "/images/thumb/default.png";
if(typeof data.profilThumbImageUrl !== "undefined" && data.profilThumbImageUrl != "")
imgProfilPath = baseUrl + data.profilThumbImageUrl;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment