Commit 2b759b65 authored by Raph El's avatar Raph El
Browse files

Modif map

parent 06d67250
......@@ -18,21 +18,21 @@ Différents url ou on peut trouver des designs pour les cartes
- [ ] Parametrable a l'init
- [ ] Le faire en synchrone
- [ ] Intégration des GeoShape
- [ ] Faire en sort de changer de TileLayer
- [x] 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
- [ ] Géré Mapbox quand c'est en prod
- [x] Réutileser différent Tile en fct du parametre
- [x] Changer de fond à tout moment
- [x] Géré Mapbox quand c'est en prod
- [ ] En fct des points sur la carte, géré le zoom , plus les points sont éloigner plus on dezoom sur la carte
- [ ] Afficher les informations sur le coté de la map et non plus en popup
- [ ] Rendre ça parametrable
- [ ]
- [x] Charger les éléments a l'init
## DOC
## DOC - Dev
`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 :
......@@ -50,7 +50,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',
......@@ -70,7 +70,7 @@ Permet de crée un cluster sur la carte
#### clearMap
#### addMarker
`addMarker(params)` : Ajoute un marker sur la map
###### Parametre
###### Paramètre
- `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
......@@ -82,3 +82,20 @@ Permet de crée un cluster sur la carte
#### addCircle
#### addPopUp
#### activeCluster
#### setTile
`addMarker(tile)` : Définie le fond de la carte
###### Paramètre
- `tile` : Peut prendre plusieurs valeur
+ `mapbox` : Affiche la carte de Maxbox préalable avoir charger les fichiers suivant:
* `https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js`
* `https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css`
+ `satelite` : Affiche la carte en vue satelite
+ `toner` : Affichage par default :, affiche la carte en nord et blanc
+ `toner-lite` : Version lite de `toner`
#### distanceTo
calcule la distance entre 2 point
#### getZoomByDistance
Donne le zoom idéal par rapport à la distance en les deux point les plus éloigner de la carte
#### setZoomByDistance
Modifie le zoom par rapport à la distance en les deux point les plus éloigner de la carte
......@@ -7,6 +7,8 @@ var mapObj = {
markersCluster : null,
markerList : [],
activeCluster : true,
activePopUp : false,
distanceToMax : 0,
mapOpt : {
dragging : true,
center: [0, 0],
......@@ -28,10 +30,15 @@ var mapObj = {
mapObj.mapOpt.dragging = ( (pInit != null && typeof pInit.dragging != "undefined") ? pInit.dragging : true );
mapObj.mapOpt.latLon = ( (pInit != null && typeof pInit.latLon != "undefined") ? pInit.latLon : [0, 0] );
mapObj.mapOpt.zoom = ( (pInit != null && typeof pInit.zoom != "undefined") ? pInit.zoom : 10 );
mapObj.activePopUp = ( (pInit != null && typeof pInit.activePopUp != "undefined") ? pInit.activePopUp : false );
//creation de la carte
mapObj.map = L.map(mapObj.container, mapObj.mapOpt);
// création tpl
mapObj.setTile();
var tile = ( (pInit != null && typeof pInit.tile != "undefined") ? pInit.tile : "toner" ) ;
mapObj.setTile(tile);
if(mapObj.activeCluster === true){
mapObj.markersCluster = new L.markerClusterGroup({
......@@ -41,46 +48,54 @@ var mapObj = {
});
}
if(pInit != null && typeof pInit.elts != "undefined"){
mapObj.addElts(pInit.elts);
}
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);
setTile : function(tile){
if(typeof tile != "undefined" && tile == "mapbox" && $('script[src="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js"]').length){
//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);
}else if(typeof tile != "undefined" && tile == "toner-lite"){
//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);
}else if(typeof tile != "undefined" && tile == "satelite"){
//SATELITE
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
}).addTo(mapObj.map);
}else{
//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);
}
//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){
addElts : function (data){
$.each(data, function(k,v){
mapObj.addMarker({ elt : v, addPopUp : addPopUp });
mapObj.addMarker({ elt : v });
});
if(mapObj.arrayBounds.length > 0){
......@@ -91,6 +106,7 @@ var mapObj = {
if( !isNaN(point.x) && !isNaN(point.y)){
console.log("POINT here", point);
mapObj.map.panTo([point.x, point.y]);
mapObj.setZoomByDistance();
}
}
......@@ -106,6 +122,25 @@ var mapObj = {
if(mapObj.markersCluster != null)
mapObj.markersCluster.clearLayers();
},
distanceTo : function(latLon){
if(mapObj.markerList.length > 0){
latLonObj = L.latLng(latLon[0], latLon[1]) ;
$.each(mapObj.markerList, function(){
var dist = latLonObj.distanceTo(this.getLatLng());
if(dist > mapObj.distanceToMax)
mapObj.distanceToMax = dist ;
});
}
},
getZoomByDistance : function(){
if(mapObj.distanceToMax > 9000000){
mapObj.mapOpt.zoom = 3 ;
}
},
setZoomByDistance : function(){
mapObj.getZoomByDistance();
mapObj.map.setZoom(mapObj.mapOpt.zoom);
},
addMarker : function(params){
//params elt, addPopUp, center=true opt = {}{
//console.log("addMarker", elt, params.addPopUp);
......@@ -130,12 +165,15 @@ var mapObj = {
params.opt = {} ;
params.opt.icon = myIcon ;
var latLon = [ params.elt.geo.latitude, params.elt.geo.longitude ] ;
var latLon =[params.elt.geo.latitude, params.elt.geo.longitude] ;
mapObj.distanceTo(latLon);
var marker = L.marker(latLon, params.opt );
mapObj.markerList.push(marker);
if(typeof params.addPopUp != "undefined" && params.addPopUp === true)
if(typeof mapObj.activePopUp != "undefined" && mapObj.activePopUp === true)
mapObj.addPopUp(marker, params.elt);
mapObj.arrayBounds.push(latLon);
......@@ -325,7 +363,7 @@ var mapCustom = {
popup += "<div class='popup-section'>";
popup += "<a href='"+url+"' target='_blank' class='item_map_list popup-marker' id='popup"+id+"'>";
popup += '<div class="btn btn-sm btn-more col-md-12">';
popup += '<i class="fa fa-hand-pointer-o"></i>trad.knowmore';
popup += '<i class="fa fa-hand-pointer-o"></i>'+trad.knowmore;
popup += '</div></a>';
popup += '</div>';
popup += '</div>';
......
......@@ -16,8 +16,8 @@ HtmlHelper::registerCssAndScriptsFiles($cssAnsScriptFilesModule, Yii::app()->get
?>
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<!-- <script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' /> -->
<style type="text/css">
......
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