-
Notifications
You must be signed in to change notification settings - Fork 2
/
mapeditor.html
34 lines (30 loc) · 1.25 KB
/
mapeditor.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<body>
<canvas id="canvas" width="1500" height="1500">
</canvas><br/>
<textarea id="places" rows="50" cols="200"></textarea>
<img src="assets/neojakarta.svg" id="image" style="display: none;"/>
<script type="text/javascript">
var counter = 0;
window.onload = () => {
var canvas = document.getElementById('canvas');
var img = document.getElementById('image');
var places = document.getElementById('places');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 1500, 1500);
const onCanvasClicked = (e) => {
var cityName = prompt('City name');
cityName.replace(' ', '\n');
const x = e.offsetX;
const y = e.offsetY;
ctx.fillStyle = "black";
ctx.font = "20px sans-serif";
ctx.textAlign = 'center';
ctx.fillText(cityName.toUpperCase(), x, y+5);
places.value += '{"id":' + counter++ + ', "x": ' + x/1500*2000 + ', "y": ' + y/1500*2000 + ', "name": "' + cityName + '"},\n';
}
canvas.addEventListener('click', onCanvasClicked);
}
</script>
</body>
</html>