OpenStreetMap

This commit is contained in:
Michael RICOIS 2016-02-08 14:33:50 +00:00
parent 43dd339c63
commit 9f1c3a98d2
4 changed files with 1081 additions and 942 deletions

View File

@ -429,7 +429,7 @@ class IdentiteController extends Zend_Controller_Action
$this->view->AuthorizeGeocode = $userAccessEdition;
// --- Gestion source
$mapSource = 'google';
$mapSource = 'openstreetmap';
if ($mapSource == 'google') {
$this->view->headScript()->appendFile('http://maps.google.com/maps/api/js?sensor=false', 'text/javascript');
}
@ -497,20 +497,20 @@ class IdentiteController extends Zend_Controller_Action
$iconeMarqueur = $this->iconeDuMarqueur($etab->NafEtab, $etab->Siege, $etab->Actif);
$icone = '';
$icone = 'etab1.png';
if ( !empty($iconeMarqueur) ) {
$icone = 'http://'.$_SERVER['SERVER_NAME'].'/themes/default/images/maps/'.$iconeMarqueur;
$icone = $iconeMarqueur;
}
$gps = array();
if ( floatval($etab->GeoLatitude) != 0 && floatval($etab->GeoLongitude) != 0 ) {
$gps = array(
'lat' => $etab->GeoLatitude,
'lon' => $etab->GeoLongitude,
'lat' => $etab->GeoLatitude*1,
'lon' => $etab->GeoLongitude*1,
);
}
$marks[] = array(
'siret' => $siren.$etab->Nic,
'siret' => $siren.' '.$etab->Nic,
'address' => $adresse,
'title' => $titre,
'text' => $texte,

View File

@ -1,4 +1,4 @@
<div id="map" class="map">Préparation de la carte ...</div>
<div id="map" class="map"><div id="popup"></div></div>
<?php if ($this->source == 'google') {?>
<script type="text/javascript">
@ -29,7 +29,7 @@ function createMarker(m) {
map: map,
position: m.location,
title: m.title,
icon: m.icon,
icon: '/themes/default/images/maps/' + m.icon,
});
// --- Info Window
var infowindow = new google.maps.InfoWindow({
@ -133,57 +133,99 @@ $(document).ready(function(){
<?php if ($this->source == 'openstreetmap') {?>
<script type="text/javascript">
<?php echo 'var marks = '.$this->marks.';'?>
var zoneMarker;
var zoom = 6;
var FCenterLng = 1.87528;
var FCenterLat = 46.60611;
//--- Wait the document is ready
$(document).ready(function(){
// --- Create Markers
var listSource = {};
$.each(marks, function (i, item) {
if (item.gps.lat && item.gps.lon) {
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([item.gps.lon, item.gps.lat], 'EPSG:4326', 'EPSG:3857')),
name: item.siret,
text: item.text,
});
console.log(item.icon);
if (typeof listSource[item.icon] === 'undefined') {
listSource[item.icon] = new ol.source.Vector({});
}
var vectorSource = listSource[item.icon];
vectorSource.addFeature(iconFeature);
listSource[item.icon] = vectorSource;
}
});
// --- Create Layers
var rasterLayer = new ol.layer.Tile({ source: new ol.source.OSM() });
var listLayers = [rasterLayer];
console.log(listSource);
$.each(listSource, function (type, item) {
// --- Create Style
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: '/themes/default/images/maps/' + type
}))
});
var vectorLayer = new ol.layer.Vector({ source: item, style: iconStyle });
listLayers.push(vectorLayer);
});
// --- Load Map
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
layers: listLayers,
view: new ol.View({
center: ol.proj.transform([FCenterLng, FCenterLat], 'EPSG:4326', 'EPSG:3857'),
zoom: zoom
})
});
// --- Zone des markers
// --- Create Markers
$.each(marks, function (i, item){
if (item.gps.lat && item.gps.lon) {
// Popup
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(popup);
// display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
popup.setPosition(coord);
$(element).qtip({
content: {
title: feature.get('name'),
text: feature.get('text'),
},
position: { my: 'bottom center', at: 'top center', adjust: { y: -30 } },
style: { classes: 'qtip-light' }
})
$(element).qtip('api').show();
/*$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('name')
});
$(element).popover('show');*/
} else {
$(element).qtip('api').destroy();
/*$(element).popover('destroy');*/
}
});
});
function createMarker(m){
// --- Info Window, Create event marker
var icon = $('<img src="' + m.icon + '">');
//.tooltip({title: 'Hello, world!', trigger: 'click'})
// --- Marker options
var marker = new ol.Overlay({
position: ol.proj.transform([2, 46], 'EPSG:4326', 'EPSG:3857'),
element: icon
});
map.addOverlay(marker);
// --- Extend map by adding marker
//ol.control.ZoomToExtent ol.extent.boundingExtent
}
</script>
<?php }?>

View File

@ -1 +1 @@
.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:#95b9e6;background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-viewport .ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-control{position:absolute;background-color:#eee;background-color:rgba(255,255,255,.4);border-radius:4px;padding:2px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:#7b98bc;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:#4c6079;background-color:rgba(0,60,136,.7)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;width:24px;height:200px}.ol-zoomslider-thumb{position:absolute;background:#7b98bc;background:rgba(0,60,136,.5);border-radius:2px;cursor:pointer;height:10px;width:22px;margin:3px}.ol-touch .ol-zoomslider{top:5.5em;width:2.052em}.ol-touch .ol-zoomslider-thumb{width:1.8em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}
.ol-control,.ol-scale-line{position:absolute;padding:2px}.ol-box{box-sizing:border-box;border-radius:2px;border:2px solid #00f}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-viewport .ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-control{background-color:rgba(255,255,255,.4);border-radius:4px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:rgba(0,60,136,.7)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}

File diff suppressed because it is too large Load Diff