Skip to content

GitLab

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

Modif map

parent 06d67250
Hide whitespace changes
Inline Side-by-side
README.md
View file @ 2b759b65
...@@ -18,21 +18,21 @@ Différents url ou on peut trouver des designs pour les cartes ...@@ -18,21 +18,21 @@ Différents url ou on peut trouver des designs pour les cartes
- [ ] Parametrable a l'init - [ ] Parametrable a l'init
- [ ] Le faire en synchrone - [ ] Le faire en synchrone
- [ ] Intégration des GeoShape - [ ] Intégration des GeoShape
- [ ] Faire en sort de changer de TileLayer - [x] Faire en sort de changer de TileLayer
- [x] Test différent Tile - [x] Test différent Tile
- [ ] Réutileser différent Tile en fct du parametre - [x] Réutileser différent Tile en fct du parametre
- [ ] Changer de fond a tout moment - [x] Changer de fond à tout moment
- [ ] Géré Mapbox quand c'est en prod - [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 - [ ] 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 - [ ] Afficher les informations sur le coté de la map et non plus en popup
- [ ] Rendre ça parametrable - [ ] 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 `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 : Il faut charger les librairies suivant :
...@@ -50,7 +50,7 @@ Permet de crée un cluster sur la carte ...@@ -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. `container` : va contenir l'id de la balise qui contiendra la map.
- Valeur par defaut :'mapContainer', - Valeur par defaut :'mapContainer',
...@@ -70,7 +70,7 @@ Permet de crée un cluster sur la carte ...@@ -70,7 +70,7 @@ Permet de crée un cluster sur la carte
#### clearMap #### clearMap
#### addMarker #### addMarker
`addMarker(params)` : Ajoute un marker sur la map `addMarker(params)` : Ajoute un marker sur la map
###### Parametre ###### Paramètre
- `elt` : Objet contenant les informations sur l'icône - `elt` : Objet contenant les informations sur l'icône
- `elt.geo.latitude` : la latitude de l'objet - `elt.geo.latitude` : la latitude de l'objet
- `elt.geo.longitude` : la longitude de l'objet - `elt.geo.longitude` : la longitude de l'objet
...@@ -82,3 +82,20 @@ Permet de crée un cluster sur la carte ...@@ -82,3 +82,20 @@ Permet de crée un cluster sur la carte
#### addCircle #### addCircle
#### addPopUp #### addPopUp
#### activeCluster #### 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
assets/js/map.js
View file @ 2b759b65
...@@ -7,6 +7,8 @@ var mapObj = { ...@@ -7,6 +7,8 @@ var mapObj = {
markersCluster : null, markersCluster : null,
markerList : [], markerList : [],
activeCluster : true, activeCluster : true,
activePopUp : false,
distanceToMax : 0,
mapOpt : { mapOpt : {
dragging : true, dragging : true,
center: [0, 0], center: [0, 0],
...@@ -28,10 +30,15 @@ var mapObj = { ...@@ -28,10 +30,15 @@ var mapObj = {
mapObj.mapOpt.dragging = ( (pInit != null && typeof pInit.dragging != "undefined") ? pInit.dragging : true ); 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.latLon = ( (pInit != null && typeof pInit.latLon != "undefined") ? pInit.latLon : [0, 0] );
mapObj.mapOpt.zoom = ( (pInit != null && typeof pInit.zoom != "undefined") ? pInit.zoom : 10 ); 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 //creation de la carte
mapObj.map = L.map(mapObj.container, mapObj.mapOpt); mapObj.map = L.map(mapObj.container, mapObj.mapOpt);
// création tpl // création tpl
mapObj.setTile(); var tile = ( (pInit != null && typeof pInit.tile != "undefined") ? pInit.tile : "toner" ) ;
mapObj.setTile(tile);
if(mapObj.activeCluster === true){ if(mapObj.activeCluster === true){
mapObj.markersCluster = new L.markerClusterGroup({ mapObj.markersCluster = new L.markerClusterGroup({
...@@ -41,46 +48,54 @@ var mapObj = { ...@@ -41,46 +48,54 @@ var mapObj = {
}); });
} }
if(pInit != null && typeof pInit.elts != "undefined"){
mapObj.addElts(pInit.elts);
}
setTimeout(function(){ mapObj.map.invalidateSize()}, 400); setTimeout(function(){ mapObj.map.invalidateSize()}, 400);
}, },
setTile : function(){ setTile : function(tile){
//Noir et Blanc
L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', { if(typeof tile != "undefined" && tile == "mapbox" && $('script[src="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js"]').length){
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>', //MAPBOX
zIndex:1, var accessToken = 'pk.eyJ1IjoiY29tbXVuZWN0ZXIiLCJhIjoiY2l6eTIyNTYzMDAxbTJ3bng1YTBsa3d0aCJ9.elyGqovHs-mrji3ttn_Yjw';
minZoom: 3, // Replace 'mapbox.streets' with your map id.
maxZoom: 17 var mapboxTiles = L.tileLayer('https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=' + accessToken, {
}).addTo(mapObj.map); attribution: '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
//Noir et Blanc Lite mapObj.map.addLayer(mapboxTiles);
// L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', { }else if(typeof tile != "undefined" && tile == "toner-lite"){
// 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>', //Noir et Blanc Lite
// zIndex:1, L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', {
// minZoom: 3, 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>',
// maxZoom: 17 // zIndex:1,
// }).addTo(mapObj.map); // 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 //OSM
//L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(mapObj.map); //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){ $.each(data, function(k,v){
mapObj.addMarker({ elt : v, addPopUp : addPopUp }); mapObj.addMarker({ elt : v });
}); });
if(mapObj.arrayBounds.length > 0){ if(mapObj.arrayBounds.length > 0){
...@@ -91,6 +106,7 @@ var mapObj = { ...@@ -91,6 +106,7 @@ var mapObj = {
if( !isNaN(point.x) && !isNaN(point.y)){ if( !isNaN(point.x) && !isNaN(point.y)){
console.log("POINT here", point); console.log("POINT here", point);
mapObj.map.panTo([point.x, point.y]); mapObj.map.panTo([point.x, point.y]);
mapObj.setZoomByDistance();
} }
} }
...@@ -106,6 +122,25 @@ var mapObj = { ...@@ -106,6 +122,25 @@ var mapObj = {
if(mapObj.markersCluster != null) if(mapObj.markersCluster != null)
mapObj.markersCluster.clearLayers(); 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){ addMarker : function(params){
//params elt, addPopUp, center=true opt = {}{ //params elt, addPopUp, center=true opt = {}{
//console.log("addMarker", elt, params.addPopUp); //console.log("addMarker", elt, params.addPopUp);
...@@ -130,12 +165,15 @@ var mapObj = { ...@@ -130,12 +165,15 @@ var mapObj = {
params.opt = {} ; params.opt = {} ;
params.opt.icon = myIcon ; 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 ); var marker = L.marker(latLon, params.opt );
mapObj.markerList.push(marker); 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.addPopUp(marker, params.elt);
mapObj.arrayBounds.push(latLon); mapObj.arrayBounds.push(latLon);
...@@ -325,7 +363,7 @@ var mapCustom = { ...@@ -325,7 +363,7 @@ var mapCustom = {
popup += "<div class='popup-section'>"; popup += "<div class='popup-section'>";
popup += "<a href='"+url+"' target='_blank' class='item_map_list popup-marker' id='popup"+id+"'>"; 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 += '<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></a>';
popup += '</div>'; popup += '</div>';
popup += '</div>'; popup += '</div>';
......
views/co/index.php
View file @ 2b759b65
...@@ -16,8 +16,8 @@ HtmlHelper::registerCssAndScriptsFiles($cssAnsScriptFilesModule, Yii::app()->get ...@@ -16,8 +16,8 @@ HtmlHelper::registerCssAndScriptsFiles($cssAnsScriptFilesModule, Yii::app()->get
?> ?>
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script> <!-- <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' /> <link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' /> -->
<style type="text/css"> <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