DRAWING MAP
How to draw a map with the mouse using your browser in computer:
There are some steps as follows to do that:
STEP 1: Open your notepad
STEP 2: Copy the following code and paste it to your notepad
STEP 3: Save it in the name mapdrwaing.html
STEP 4: Now download any map image from anywhere or search google to find it
STEP 5: Name the downloaded image like image.png or image.svg etc
STEP 6: Keep the image file in your desktop
STEP 7: Now open the notepad and paste the name of your image in the red colored place
STEP 8: Save it and open it through any browser
STEP 9: Now it will show your downloaded image in the left side of your desktop and a blank place will create in the right side.
STEP 10: Now you can draw in the right side with your mouse as same as the image placed in the left side.
<!DOCTYPE html>
<html>
<head>
<title>Map Drawing with Mouse</title>
<style>
/* Add any CSS styles for the drawing area here */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#drawing-container {
position: relative;
margin-left: 20px; /* Adjust this value to add space between the image
and the drawing */
}
#drawing-svg {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Image</h2>
<!-- Embed the static SVG image using the <img> tag --> <img
src="capture7.png" alt="SVG Image" width="550" height="auto" id="svg-image">
<h2>Draw Here</h2>
<!-- Inline SVG for drawing -->
<svg id="drawing-svg"
width="550" height="550">
<!-- Your drawing content goes here -->
</svg>
<!-- Add any JavaScript code for interactivity -->
<script>
const drawingSvg = document.getElementById("drawing-svg");
let isDrawing =
false;
let lastX = 0;
let lastY = 0;
drawingSvg.addEventListener("mousedown", startDrawing);
drawingSvg.addEventListener("mousemove", draw);
drawingSvg.addEventListener("mouseup", stopDrawing);
drawingSvg.addEventListener("mouseleave", stopDrawing);
function
startDrawing(e) {
isDrawing = true;
lastX = e.offsetX;
lastY = e.offsetY;
}
function draw(e) {
if (!
isDrawing) return;
const x = e.offsetX;
const y = e.offsetY;
const line = document.createElementNS("http://www.w3.org/2000/svg",
"line");
line.setAttribute("x1", lastX);
line.setAttribute
("y1", lastY);
line.setAttribute("x2", x);
line.setAttribute("y2", y);
line.setAttribute("stroke", "black");
line.setAttribute("stroke-width", "2");
drawingSvg.appendChild
(line);
lastX = x;
lastY = y;
}
function
stopDrawing() {
isDrawing = false;
}
</script>
</body>
</html>
0 Comments