GeoCovid v2

geocovid.fr est un site web qui affiche, à partir de votre géolocalisation, une Google map circulaire de 100km 1km autour de votre position.

 

Géolocalisation

Comment géolocaliser le visiteur sur votre site ?

le code javascript

function maPosition(position) {
lat = position.coords.latitude;
long = position.coords.longitude;
window.location.href=”https://www.geocovid.fr/carte.php?lat=”+lat+”&long=”+long;
}

if ( navigator.geolocation ) {
// L’API est disponible
navigator.geolocation.getCurrentPosition(maPosition);
}

A noter que la géolocalisation avec javascript n’est pas très précise. La position peut varier de plus d’un kilomètre. Pour la 1ère version de geocovid (une carte de 100km autour d’un point) ça allait mais sur cette application c’est un peu gênant…

 

Une Google map circulaire

Affichage d’une Google map centrée sur la géolocalisation
avec comme marker une personne qui promène un chien.
La carte prendra place dans le div map de la page.

le code javascript

(function ($) {
“use strict”; // Start of use strict
var marker_auto;
window.initMap = function() {
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 16,
center: {lat: lat , lng: long }
});
var image=”https://www.geocovid.fr/images/voiture2.png”;
marker_auto = new google.maps.Marker({
map: map,
draggable: true,
icon: image,
position: {lat: lat, lng: long}
});
}
}(jQuery));

CSS

#map {
position:relative;
width: 1170px;
height: 1170px;
border-radius: 100%;
border: 3px black solid;
}

Avec le zoom à 16, une carte de 1170px de diamètre correspondra à 2km à vol d’oiseau soit 1km de rayon.