Image map how to implement?

C

CliverQwerty2019-12-17 18:54:43

css

CliverQwerty, 2019-12-17 18:54:43

The task is to create a map of some kind of area, such that it is with scaling, then if you want to look closer - zoom in (farther away - away). The whole thing needs to be implemented on the site (html, css, svg, js), I'm zero in this matter. Can you please tell me through which development environment to do all this? And how to do all this (or at least where to get the source)? I ask for advice.
upd: of course I understand, there is a lot of information on the Internet, but I would like to discuss it with people who have actually experienced this.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

Max, 2019-12-17
@TeeRision

I have not come across this, she is generally a beginner, but I saw the code for this in the book "Web Programming for Dummies" by Nikhil Abraham, there is an example of creating an application for a fictional restaurant "McDuck", which would bind the user to a certain cafe, considered the distance between the user and the restaurant (Because of the Gaversine theorem) and indicates the time needed to move, and if the distance that can be overcome in less than 5 minutes, the client is issued a coupon

<!DOCTYPE html>
<html>
<head>
   <title> McDuck's </title>
</head>
<body>
   <h1>McDuck's Local Offers</h1>
   <div id="geodisplay"></div>
   <div id="effect"></div>
</body>
</html>

body {
 text-align: center;
 background: white;
}
h1, h2, h3, p{
 font-family: Sans-Serif;
 color: black;
}
p{
 font-size: 1em;
}

function getLocation() {
 if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition
(showLocation);
  }
}

function showLocation(position) {
  var mcduckslat=40.735383; // "40.735383" идет как первое значение, которое идет после "@" в адресной строке Google Maps
  var mcduckslon=-74.002994 //"-74.002994" идет как второе значение, после первого и запятой
  var currentpositionlat=position.coords.latitude;
  var cureentpositionlon=position.coords.longitude;
  // Вычисление расстояния между текущим расположением и расположением ресторана
 var distance=getDistanceFromLatLonInMiles(mcduckslat, mcduckslon, currentpositionlat, currentpositionlon);

document.getElemtById("geodisplay").innerHTML="Latitude: "+currentpositionlon;
// Формула гаверсинуса для вычисления расстояния между точками сферы