inital commit
This commit is contained in:
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
20230330_143536-cropped.jpg
|
||||
asci.txt
|
||||
20230330_143536.jpg
|
||||
tiles/
|
||||
10
README.MD
Normal file
10
README.MD
Normal file
@ -0,0 +1,10 @@
|
||||
# Whats on my Laptop?
|
||||
A little application to show others what the stickers on your laptop mean.
|
||||
Build using only static HTML, CSS and JavaScript. Utilizes Leaflet.js for showing the device.
|
||||
|
||||
## How to use
|
||||
1. Take a picture of your laptop with the stickers on it.
|
||||
2. Run tools/createtiles.sh (you have to edit the script to fit your needs)
|
||||
3. (optional) Delete orginal picture
|
||||
4. Update image resoluton in index.html
|
||||
5. (optional) Update metadata in index.html
|
||||
380
data/points.json
Normal file
380
data/points.json
Normal file
@ -0,0 +1,380 @@
|
||||
{
|
||||
"aoi": [
|
||||
{
|
||||
"points": [
|
||||
{
|
||||
"lat": -37.7255859375,
|
||||
"lng": 155.9580078125
|
||||
},
|
||||
{
|
||||
"lat": -37.25,
|
||||
"lng": 166
|
||||
},
|
||||
{
|
||||
"lat": -36.859375,
|
||||
"lng": 166.41015625
|
||||
},
|
||||
{
|
||||
"lat": -35.2578125,
|
||||
"lng": 166.36328125
|
||||
},
|
||||
{
|
||||
"lat": -35.2109375,
|
||||
"lng": 166.4921875
|
||||
},
|
||||
{
|
||||
"lat": -37.12109375,
|
||||
"lng": 167.87109375
|
||||
},
|
||||
{
|
||||
"lat": -37.2109375,
|
||||
"lng": 168.578125
|
||||
},
|
||||
{
|
||||
"lat": -35.52734375,
|
||||
"lng": 174.34765625
|
||||
},
|
||||
{
|
||||
"lat": -34.875,
|
||||
"lng": 175.0625
|
||||
},
|
||||
{
|
||||
"lat": -34.3203125,
|
||||
"lng": 175.15234375
|
||||
},
|
||||
{
|
||||
"lat": -33.7734375,
|
||||
"lng": 175
|
||||
},
|
||||
{
|
||||
"lat": -32.78125,
|
||||
"lng": 174.50390625
|
||||
},
|
||||
{
|
||||
"lat": -26.296875,
|
||||
"lng": 171.1484375
|
||||
},
|
||||
{
|
||||
"lat": -25.97265625,
|
||||
"lng": 170.69140625
|
||||
},
|
||||
{
|
||||
"lat": -25.9765625,
|
||||
"lng": 169.86328125
|
||||
},
|
||||
{
|
||||
"lat": -26.35546875,
|
||||
"lng": 169.359375
|
||||
},
|
||||
{
|
||||
"lat": -27,
|
||||
"lng": 168.875
|
||||
},
|
||||
{
|
||||
"lat": -27.7734375,
|
||||
"lng": 168.4375
|
||||
},
|
||||
{
|
||||
"lat": -27.3984375,
|
||||
"lng": 167.89453125
|
||||
},
|
||||
{
|
||||
"lat": -27.25,
|
||||
"lng": 167.3125
|
||||
},
|
||||
{
|
||||
"lat": -27.2890625,
|
||||
"lng": 166.77734375
|
||||
},
|
||||
{
|
||||
"lat": -27.4375,
|
||||
"lng": 166.5
|
||||
},
|
||||
{
|
||||
"lat": -27.62890625,
|
||||
"lng": 166.0234375
|
||||
},
|
||||
{
|
||||
"lat": -27.453125,
|
||||
"lng": 165.74609375
|
||||
},
|
||||
{
|
||||
"lat": -26.9609375,
|
||||
"lng": 165.7578125
|
||||
},
|
||||
{
|
||||
"lat": -26.6875,
|
||||
"lng": 165.625
|
||||
},
|
||||
{
|
||||
"lat": -26.37890625,
|
||||
"lng": 165.22265625
|
||||
},
|
||||
{
|
||||
"lat": -26.42578125,
|
||||
"lng": 164.0234375
|
||||
},
|
||||
{
|
||||
"lat": -26.798828125,
|
||||
"lng": 155.57421875
|
||||
},
|
||||
{
|
||||
"lat": -26.810546875,
|
||||
"lng": 155.27734375
|
||||
},
|
||||
{
|
||||
"lat": -26.970703125,
|
||||
"lng": 155.00390625
|
||||
},
|
||||
{
|
||||
"lat": -27.322265625,
|
||||
"lng": 154.791015625
|
||||
},
|
||||
{
|
||||
"lat": -37.4375,
|
||||
"lng": 155.4375
|
||||
},
|
||||
{
|
||||
"lat": -37.7236328125,
|
||||
"lng": 155.9541015625
|
||||
}
|
||||
],
|
||||
"title": "TypeScript Loves Prisma",
|
||||
"description": "TypeScript Loves Prisma, a love which shall never end!"
|
||||
},
|
||||
{
|
||||
"points": [
|
||||
{
|
||||
"lat": -58.462890625,
|
||||
"lng": 165.0546875
|
||||
},
|
||||
{
|
||||
"lat": -58.359375,
|
||||
"lng": 165.609375
|
||||
},
|
||||
{
|
||||
"lat": -58.34765625,
|
||||
"lng": 166.109375
|
||||
},
|
||||
{
|
||||
"lat": -58.4375,
|
||||
"lng": 166.6171875
|
||||
},
|
||||
{
|
||||
"lat": -59.51171875,
|
||||
"lng": 167.63671875
|
||||
},
|
||||
{
|
||||
"lat": -61.5390625,
|
||||
"lng": 169.73828125
|
||||
},
|
||||
{
|
||||
"lat": -61.73046875,
|
||||
"lng": 169.89453125
|
||||
},
|
||||
{
|
||||
"lat": -61.7578125,
|
||||
"lng": 170.107421875
|
||||
},
|
||||
{
|
||||
"lat": -61.421875,
|
||||
"lng": 171.0390625
|
||||
},
|
||||
{
|
||||
"lat": -61.3984375,
|
||||
"lng": 172.328125
|
||||
},
|
||||
{
|
||||
"lat": -61.548828125,
|
||||
"lng": 173.14453125
|
||||
},
|
||||
{
|
||||
"lat": -61.71875,
|
||||
"lng": 173.890625
|
||||
},
|
||||
{
|
||||
"lat": -62.7109375,
|
||||
"lng": 175.1953125
|
||||
},
|
||||
{
|
||||
"lat": -63.609375,
|
||||
"lng": 175.7890625
|
||||
},
|
||||
{
|
||||
"lat": -64.4609375,
|
||||
"lng": 176.1015625
|
||||
},
|
||||
{
|
||||
"lat": -65.25,
|
||||
"lng": 176.375
|
||||
},
|
||||
{
|
||||
"lat": -66.1953125,
|
||||
"lng": 176.3515625
|
||||
},
|
||||
{
|
||||
"lat": -67.3046875,
|
||||
"lng": 176.0859375
|
||||
},
|
||||
{
|
||||
"lat": -67.6796875,
|
||||
"lng": 175.859375
|
||||
},
|
||||
{
|
||||
"lat": -69.9375,
|
||||
"lng": 178.0234375
|
||||
},
|
||||
{
|
||||
"lat": -70.6875,
|
||||
"lng": 178.7109375
|
||||
},
|
||||
{
|
||||
"lat": -71.953125,
|
||||
"lng": 178.79296875
|
||||
},
|
||||
{
|
||||
"lat": -72.5,
|
||||
"lng": 178.484375
|
||||
},
|
||||
{
|
||||
"lat": -79.328125,
|
||||
"lng": 169.234375
|
||||
},
|
||||
{
|
||||
"lat": -79.5546875,
|
||||
"lng": 168.82421875
|
||||
},
|
||||
{
|
||||
"lat": -79.55078125,
|
||||
"lng": 168.33203125
|
||||
},
|
||||
{
|
||||
"lat": -79.375,
|
||||
"lng": 167.453125
|
||||
},
|
||||
{
|
||||
"lat": -78.765625,
|
||||
"lng": 166.5
|
||||
},
|
||||
{
|
||||
"lat": -74.484375,
|
||||
"lng": 161.41015625
|
||||
},
|
||||
{
|
||||
"lat": -73.5,
|
||||
"lng": 161.07421875
|
||||
},
|
||||
{
|
||||
"lat": -69.625,
|
||||
"lng": 161.908203125
|
||||
},
|
||||
{
|
||||
"lat": -68.69921875,
|
||||
"lng": 161.04296875
|
||||
},
|
||||
{
|
||||
"lat": -67.59375,
|
||||
"lng": 160.5859375
|
||||
},
|
||||
{
|
||||
"lat": -66.47265625,
|
||||
"lng": 160.5390625
|
||||
},
|
||||
{
|
||||
"lat": -65.345703125,
|
||||
"lng": 160.8671875
|
||||
},
|
||||
{
|
||||
"lat": -64.234375,
|
||||
"lng": 161.671875
|
||||
},
|
||||
{
|
||||
"lat": -63.72265625,
|
||||
"lng": 162.412109375
|
||||
},
|
||||
{
|
||||
"lat": -63.404296875,
|
||||
"lng": 163.193359375
|
||||
},
|
||||
{
|
||||
"lat": -60.42578125,
|
||||
"lng": 163.828125
|
||||
},
|
||||
{
|
||||
"lat": -59.2109375,
|
||||
"lng": 164.1875
|
||||
},
|
||||
{
|
||||
"lat": -58.462890625,
|
||||
"lng": 165.0478515625
|
||||
}
|
||||
],
|
||||
"title": "Funny Prisma",
|
||||
"description": "Look! Its the Prisma Logo with googly eyes! :D"
|
||||
},
|
||||
{
|
||||
"points": [{"lat":-68.7734375,"lng":136.966796875},{"lat":-68.5859375,"lng":137.216796875},{"lat":-68.453125,"lng":137.53125},{"lat":-68.529296875,"lng":137.986328125},{"lat":-68.6953125,"lng":138.3984375},{"lat":-68.796875,"lng":139.859375},{"lat":-68.6953125,"lng":141.484375},{"lat":-68.375,"lng":143.0703125},{"lat":-66.9296875,"lng":146.875},{"lat":-66.046875,"lng":148.453125},{"lat":-65.109375,"lng":149.7421875},{"lat":-63.140625,"lng":151.75},{"lat":-62.1640625,"lng":152.5},{"lat":-61.0859375,"lng":153.0078125},{"lat":-59.2890625,"lng":153.84375},{"lat":-58.375,"lng":154.1953125},{"lat":-57.390625,"lng":154.40625},{"lat":-56.6015625,"lng":154.65625},{"lat":-54.34375,"lng":154.8359375},{"lat":-53.1875,"lng":154.7265625},{"lat":-52.75,"lng":154.4921875},{"lat":-52.34375,"lng":154.2734375},{"lat":-51.7421875,"lng":153.6796875},{"lat":-50.65625,"lng":153.6796875},{"lat":-50.265625,"lng":153.8203125},{"lat":-49.5234375,"lng":154.953125},{"lat":-49.234375,"lng":156.4609375},{"lat":-49.6328125,"lng":157.296875},{"lat":-50.1015625,"lng":157.75},{"lat":-51.734375,"lng":158.2265625},{"lat":-52.9375,"lng":158.6875},{"lat":-53.75,"lng":159.046875},{"lat":-54.359375,"lng":159.640625},{"lat":-55.90625,"lng":160.171875},{"lat":-57.78125,"lng":160.9375},{"lat":-60.078125,"lng":161.2265625},{"lat":-62.4375,"lng":161.46875},{"lat":-66.3125,"lng":160.65625},{"lat":-69.9609375,"lng":158.796875},{"lat":-72.7265625,"lng":156.40625},{"lat":-74.6328125,"lng":153.5234375},{"lat":-75.828125,"lng":150.4453125},{"lat":-76.40625,"lng":147.203125},{"lat":-76.2734375,"lng":144.75},{"lat":-75.78125,"lng":142.4921875},{"lat":-74.1875,"lng":138.5546875},{"lat":-72.3203125,"lng":135.984375},{"lat":-71.609375,"lng":135.625},{"lat":-69.8203125,"lng":136.484375},{"lat":-68.765625,"lng":136.96875}],
|
||||
"title": "Bannana",
|
||||
"description": "It's a bannana for scale! Thanks Linus!"
|
||||
}, {
|
||||
"points": [{"lat":-86.765625,"lng":134.34375},{"lat":-86.5546875,"lng":144.29296875},{"lat":-87.39453125,"lng":145.01953125},{"lat":-87.203125,"lng":147.5234375},{"lat":-87.0625,"lng":149.46875},{"lat":-86.80078125,"lng":152.3359375},{"lat":-85.51953125,"lng":152.796875},{"lat":-84.5625,"lng":165.65625},{"lat":-84.8046875,"lng":166.2734375},{"lat":-85.71875,"lng":166.40625},{"lat":-85.6484375,"lng":168.7265625},{"lat":-81.7109375,"lng":169.0625},{"lat":-80.7578125,"lng":169.625},{"lat":-80.1328125,"lng":170.53125},{"lat":-80.0078125,"lng":174.171875},{"lat":-80.6171875,"lng":175.3046875},{"lat":-82.4375,"lng":176.0390625},{"lat":-84.609375,"lng":176.0390625},{"lat":-88.8125,"lng":176.53125},{"lat":-93,"lng":176.8125},{"lat":-94.515625,"lng":176.9453125},{"lat":-95.7890625,"lng":176.8046875},{"lat":-96.25,"lng":170.375},{"lat":-94.0703125,"lng":169.8828125},{"lat":-92.1484375,"lng":169.7265625},{"lat":-91.75,"lng":169.390625},{"lat":-91.859375,"lng":168.75},{"lat":-93.0546875,"lng":167.484375},{"lat":-92.6484375,"lng":164.546875},{"lat":-91.796875,"lng":163.6484375},{"lat":-92.1171875,"lng":157.8046875},{"lat":-92.078125,"lng":155.9765625},{"lat":-93.46875,"lng":154.7890625},{"lat":-93.7890625,"lng":152.46875},{"lat":-93.390625,"lng":151.2734375},{"lat":-92.8125,"lng":150.7734375},{"lat":-92.90625,"lng":147.7734375},{"lat":-92.953125,"lng":140.90625},{"lat":-93.75,"lng":135.0703125},{"lat":-93.4609375,"lng":134.3046875},{"lat":-86.78125,"lng":134.25}],
|
||||
"title": "Blackmagicdesign",
|
||||
"description": "Makers of the best video editing software in the world!"
|
||||
},
|
||||
{
|
||||
"points": [{"lat":-53.8671875,"lng":139.578125},{"lat":-54.0703125,"lng":139.9375},{"lat":-53.9140625,"lng":140.8671875},{"lat":-53.4375,"lng":141.5234375},{"lat":-42.8359375,"lng":149.1484375},{"lat":-42.3125,"lng":149.3359375},{"lat":-41.796875,"lng":149.296875},{"lat":-41.296875,"lng":149.125},{"lat":-40.6875,"lng":148.546875},{"lat":-38.4609375,"lng":145.3984375},{"lat":-37.9375,"lng":145.0859375},{"lat":-35.7578125,"lng":142.2734375},{"lat":-35.1328125,"lng":141.296875},{"lat":-34.453125,"lng":141.1328125},{"lat":-32.9921875,"lng":139.609375},{"lat":-32.1875,"lng":138.25},{"lat":-31.8671875,"lng":137.5},{"lat":-30.984375,"lng":136.609375},{"lat":-30.578125,"lng":135.953125},{"lat":-30.4921875,"lng":135.3828125},{"lat":-29.5,"lng":134.25},{"lat":-28.4296875,"lng":132.5625},{"lat":-26.671875,"lng":130.265625},{"lat":-26.283203125,"lng":129.3515625},{"lat":-26.4375,"lng":128.328125},{"lat":-25.9296875,"lng":127.60546875},{"lat":-25.5,"lng":126.69140625},{"lat":-25.5703125,"lng":125.3671875},{"lat":-26.1015625,"lng":124.2109375},{"lat":-26.87109375,"lng":123.505859375},{"lat":-27.734375,"lng":123.09375},{"lat":-30.046875,"lng":121.1484375},{"lat":-31.5625,"lng":119.8203125},{"lat":-32.1875,"lng":119.59375},{"lat":-33.05078125,"lng":119.701171875},{"lat":-33.6640625,"lng":119.234375},{"lat":-36.859375,"lng":116.8125},{"lat":-37.6328125,"lng":116.484375},{"lat":-38.4453125,"lng":116.546875},{"lat":-39.234375,"lng":117.1328125},{"lat":-39.515625,"lng":117.6640625},{"lat":-39.474609375,"lng":118.611328125},{"lat":-39.310546875,"lng":118.947265625},{"lat":-39.734375,"lng":119.3359375},{"lat":-40.5390625,"lng":120.234375},{"lat":-41.359375,"lng":121.2890625},{"lat":-42.8203125,"lng":123.6640625},{"lat":-42.984375,"lng":124.390625},{"lat":-42.8359375,"lng":125.046875},{"lat":-43.90625,"lng":126.4765625},{"lat":-44.6015625,"lng":126.6171875},{"lat":-45.109375,"lng":126.90625},{"lat":-47.9375,"lng":130.6875},{"lat":-50.6875,"lng":134.5390625},{"lat":-50.7890625,"lng":135.1796875},{"lat":-53.75,"lng":139.2734375}],
|
||||
"title": "Computer Components",
|
||||
"description": "Some assorted computer components."
|
||||
},
|
||||
{
|
||||
"points": [{"lat":-50.6875,"lng":128},{"lat":-51.296875,"lng":130.328125},{"lat":-52.46875,"lng":132.65625},{"lat":-54.109375,"lng":135.21875},{"lat":-56.015625,"lng":137.328125},{"lat":-57.046875,"lng":137.78125},{"lat":-60.171875,"lng":138.25},{"lat":-60.53515625,"lng":138.14453125},{"lat":-60.84375,"lng":138.3671875},{"lat":-61.41796875,"lng":138.453125},{"lat":-62.28515625,"lng":138.37109375},{"lat":-62.9453125,"lng":138.02734375},{"lat":-63.84765625,"lng":137.9296875},{"lat":-64.671875,"lng":137.7578125},{"lat":-66.63671875,"lng":137.28515625},{"lat":-67.55859375,"lng":136.87890625},{"lat":-67.83203125,"lng":136.3515625},{"lat":-67.87890625,"lng":135.71484375},{"lat":-68.1015625,"lng":134.453125},{"lat":-68.359375,"lng":133.63671875},{"lat":-68.734375,"lng":133.5703125},{"lat":-69.52734375,"lng":133.6953125},{"lat":-70.33984375,"lng":133.87890625},{"lat":-70.84765625,"lng":133.8671875},{"lat":-71.09375,"lng":133.8359375},{"lat":-71.2734375,"lng":133.64453125},{"lat":-71.35546875,"lng":133.2421875},{"lat":-71.25,"lng":132.9375},{"lat":-70.921875,"lng":132.640625},{"lat":-68.84765625,"lng":132.5546875},{"lat":-69.3828125,"lng":130.140625},{"lat":-69.55078125,"lng":128.72265625},{"lat":-69.125,"lng":127.5625},{"lat":-65.90625,"lng":123.78125},{"lat":-64.08203125,"lng":122.3203125},{"lat":-62.125,"lng":121.5625},{"lat":-61.6171875,"lng":121.28125},{"lat":-60.921875,"lng":121.28125},{"lat":-59.75,"lng":121.375},{"lat":-57.359375,"lng":121.796875},{"lat":-52.75,"lng":123.671875},{"lat":-51.3359375,"lng":125.0078125},{"lat":-50.8359375,"lng":125.703125},{"lat":-50.6484375,"lng":126.6875},{"lat":-50.6796875,"lng":127.921875}],
|
||||
"title": "Nanoleaf",
|
||||
"description": "Yes, I know I made a mistake while applying the sticker. Yes it also bothers me."
|
||||
},
|
||||
{
|
||||
"points": [{"lat":-39.9609375,"lng":116.388671875},{"lat":-39.763671875,"lng":117.234375},{"lat":-39.82421875,"lng":118.0390625},{"lat":-40.244140625,"lng":118.734375},{"lat":-40.828125,"lng":119.2265625},{"lat":-56.3125,"lng":120.9375},{"lat":-57.4375,"lng":120.8046875},{"lat":-58.2734375,"lng":120.1953125},{"lat":-58.7734375,"lng":118.9609375},{"lat":-58.71875,"lng":117.40625},{"lat":-58.2578125,"lng":108.5859375},{"lat":-58.12890625,"lng":107.66015625},{"lat":-57.71875,"lng":106.9453125},{"lat":-57.125,"lng":106.4140625},{"lat":-56.234375,"lng":106.23828125},{"lat":-49.984375,"lng":104.82421875},{"lat":-49.12109375,"lng":105.01953125},{"lat":-48.62109375,"lng":105.30078125},{"lat":-39.98828125,"lng":116.32421875}],
|
||||
"title": "Holographic Prisma Logo",
|
||||
"description": "A really cool looking holographic Prisma Logo sticker."
|
||||
},
|
||||
{
|
||||
"points": [{"lat":-58.859375,"lng":110.09375},{"lat":-59.3125,"lng":111.953125},{"lat":-60.56640625,"lng":113.72265625},{"lat":-61.515625,"lng":114.640625},{"lat":-62.59375,"lng":115.21875},{"lat":-65.046875,"lng":115.90625},{"lat":-66.953125,"lng":115.65625},{"lat":-68.75,"lng":114.9375},{"lat":-70.140625,"lng":113.90625},{"lat":-71.203125,"lng":112.453125},{"lat":-71.75,"lng":110.9375},{"lat":-71.984375,"lng":109.09375},{"lat":-71.8125,"lng":107.46875},{"lat":-71.265625,"lng":106.109375},{"lat":-70.3125,"lng":104.703125},{"lat":-69.140625,"lng":103.65625},{"lat":-66.375,"lng":102.6875},{"lat":-64.390625,"lng":102.640625},{"lat":-62.453125,"lng":103.296875},{"lat":-60.453125,"lng":104.984375},{"lat":-59.1875,"lng":107.125},{"lat":-58.875,"lng":109.765625}],
|
||||
"title": "Digital Ocean Logo",
|
||||
"description": "A Digital Ocean logo sticker. I won this from the Hacktoberfest!"
|
||||
},
|
||||
{
|
||||
"points": [{"lat":-46.4609375,"lng":88.3203125},{"lat":-49.46875,"lng":93.21875},{"lat":-52.734375,"lng":98.1953125},{"lat":-53.671875,"lng":98.8515625},{"lat":-54.78125,"lng":99.0625},{"lat":-66.7109375,"lng":96.3515625},{"lat":-67.96875,"lng":94.9765625},{"lat":-68.2578125,"lng":93.8046875},{"lat":-68.0234375,"lng":92.359375},{"lat":-61.6328125,"lng":82.5078125},{"lat":-60.375,"lng":81.8359375},{"lat":-59.28125,"lng":81.8125},{"lat":-47.96875,"lng":84.65625},{"lat":-46.6796875,"lng":85.9609375},{"lat":-46.3671875,"lng":87.1328125},{"lat":-46.4765625,"lng":88.1171875}],
|
||||
"title": "Hacktoberfest No. 8",
|
||||
"description": "A Hacktoberfest sticker. I won this from the Hacktoberfest!"
|
||||
},
|
||||
{
|
||||
"points": [{"lat":-67.453125,"lng":87.59375},{"lat":-68.8125,"lng":89.203125},{"lat":-71.578125,"lng":92.5},{"lat":-66.671875,"lng":96.390625},{"lat":-66.15625,"lng":96.984375},{"lat":-66.109375,"lng":97.921875},{"lat":-70.3125,"lng":103.09375},{"lat":-71.078125,"lng":103.578125},{"lat":-71.796875,"lng":103.609375},{"lat":-77.0625,"lng":99.3125},{"lat":-81.125,"lng":104.4375},{"lat":-81.78125,"lng":104.765625},{"lat":-82.421875,"lng":104.578125},{"lat":-87.91796875,"lng":100.32421875},{"lat":-88.21875,"lng":99.515625},{"lat":-88.0625,"lng":98.71875},{"lat":-74.75,"lng":82.421875},{"lat":-73.921875,"lng":81.8125},{"lat":-73.015625,"lng":81.875},{"lat":-67.71875,"lng":86.078125},{"lat":-67.35546875,"lng":86.77734375},{"lat":-67.44921875,"lng":87.5078125}],
|
||||
"title": "WASD",
|
||||
"description": "A WASD sticker."
|
||||
},
|
||||
{
|
||||
"points": [{"lat":-35.982421875,"lng":90.90625},{"lat":-28.578125,"lng":108.375},{"lat":-28.828125,"lng":109.703125},{"lat":-29.578125,"lng":110.421875},{"lat":-32.8125,"lng":111.96875},{"lat":-33.4375,"lng":112.171875},{"lat":-34.125,"lng":111.96875},{"lat":-35.03125,"lng":112.953125},{"lat":-36.109375,"lng":113.40625},{"lat":-37.90625,"lng":112.6875},{"lat":-38.455078125,"lng":112.650390625},{"lat":-38.6396484375,"lng":112.87109375},{"lat":-39.546875,"lng":113.0390625},{"lat":-40.078125,"lng":113.0078125},{"lat":-40.6015625,"lng":112.8671875},{"lat":-41.6875,"lng":112.4375},{"lat":-48.78125,"lng":95.859375},{"lat":-48.6875,"lng":95.046875},{"lat":-48.1875,"lng":94.546875},{"lat":-37.765625,"lng":90.23046875},{"lat":-36.177734375,"lng":90.83984375}],
|
||||
"title": "Right to Repair",
|
||||
"description": "A Right to Repair sticker. The most important right there is in the new digital world."
|
||||
},
|
||||
{
|
||||
"points": [{"lat":-74.640625,"lng":63.65625},{"lat":-74.265625,"lng":64.546875},{"lat":-74.203125,"lng":65.859375},{"lat":-74.828125,"lng":67.5625},{"lat":-74.015625,"lng":69.390625},{"lat":-73.87890625,"lng":70.62109375},{"lat":-74.0625,"lng":71.78125},{"lat":-74.5234375,"lng":72.6484375},{"lat":-74.125,"lng":73.15625},{"lat":-73.59375,"lng":73.609375},{"lat":-73.4140625,"lng":74.3359375},{"lat":-73.40625,"lng":75.3359375},{"lat":-72.5234375,"lng":76.09375},{"lat":-72.171875,"lng":77.0859375},{"lat":-72.4375,"lng":78.3359375},{"lat":-73.1328125,"lng":79.09375},{"lat":-72.890625,"lng":80.1328125},{"lat":-73.1875,"lng":81.265625},{"lat":-73.53125,"lng":81.953125},{"lat":-75.2421875,"lng":82.9296875},{"lat":-77.5625,"lng":83.1015625},{"lat":-78.1015625,"lng":82.984375},{"lat":-78.6875,"lng":82.2890625},{"lat":-78.859375,"lng":81.578125},{"lat":-80.359375,"lng":81.515625},{"lat":-80.9609375,"lng":82.1171875},{"lat":-81.484375,"lng":83.109375},{"lat":-81.96875,"lng":83.3984375},{"lat":-83.44921875,"lng":83.38671875},{"lat":-84.15625,"lng":82.93359375},{"lat":-84.7421875,"lng":81.91796875},{"lat":-86.50390625,"lng":82.03515625},{"lat":-87.0625,"lng":83.015625},{"lat":-87.9296875,"lng":83.7578125},{"lat":-89.73828125,"lng":83.84375},{"lat":-91.4765625,"lng":83.6796875},{"lat":-92.09375,"lng":83.3359375},{"lat":-92.421875,"lng":82.3515625},{"lat":-92.3359375,"lng":81.1875},{"lat":-92.0546875,"lng":80.3515625},{"lat":-92.2734375,"lng":79.953125},{"lat":-92.9453125,"lng":79.25},{"lat":-93.1796875,"lng":78.296875},{"lat":-93.0859375,"lng":77.3515625},{"lat":-92.611328125,"lng":76.755859375},{"lat":-92.609375,"lng":75.529296875},{"lat":-91.98046875,"lng":74.634765625},{"lat":-92.248046875,"lng":74.375},{"lat":-92.59375,"lng":74.171875},{"lat":-93.0078125,"lng":73.5390625},{"lat":-93.234375,"lng":72.28125},{"lat":-93.125,"lng":70.982421875},{"lat":-92.689453125,"lng":69.869140625},{"lat":-93.3984375,"lng":68.5546875},{"lat":-93.71875,"lng":67.171875},{"lat":-93.2265625,"lng":65.640625},{"lat":-92.09375,"lng":64.296875},{"lat":-91.8359375,"lng":63.4609375},{"lat":-91.1328125,"lng":62.9609375},{"lat":-89.9765625,"lng":62.8359375},{"lat":-89.578125,"lng":62.9765625},{"lat":-88.46875,"lng":63.0078125},{"lat":-87.9453125,"lng":63.3671875},{"lat":-87.40625,"lng":63.4765625},{"lat":-86.6171875,"lng":63.9140625},{"lat":-86.1875,"lng":64.9609375},{"lat":-85.671875,"lng":65.359375},{"lat":-85.390625,"lng":65.0546875},{"lat":-85.078125,"lng":64.2734375},{"lat":-83.984375,"lng":63.8125},{"lat":-82.9453125,"lng":63.8515625},{"lat":-82.3359375,"lng":64.3046875},{"lat":-81.9140625,"lng":65.125},{"lat":-80.796875,"lng":65.09375},{"lat":-79.703125,"lng":64.8359375},{"lat":-79.4921875,"lng":64.53125},{"lat":-79.328125,"lng":63.7265625},{"lat":-78.4609375,"lng":63.265625},{"lat":-75.4375,"lng":63.1015625},{"lat":-74.6875,"lng":63.6171875}],
|
||||
"title": "Hacktoberfest \"H\"",
|
||||
"description": "A Hacktoberfest sticker. I won this from the Hacktoberfest! Yaay."
|
||||
},
|
||||
{
|
||||
"points": [{"lat":-41.875,"lng":59.375},{"lat":-39.9765625,"lng":59.484375},{"lat":-37.5859375,"lng":60.8046875},{"lat":-36.8828125,"lng":61.5234375},{"lat":-35.96875,"lng":63.96875},{"lat":-35.5625,"lng":65.0546875},{"lat":-35.328125,"lng":65.8125},{"lat":-35.390625,"lng":66.71875},{"lat":-34.640625,"lng":67.2578125},{"lat":-34.0703125,"lng":68.5},{"lat":-33.390625,"lng":70.359375},{"lat":-32.2421875,"lng":70.484375},{"lat":-31.453125,"lng":70.984375},{"lat":-30.5859375,"lng":72.03125},{"lat":-30.1484375,"lng":73.3203125},{"lat":-29.875,"lng":74.3828125},{"lat":-30.15625,"lng":75.515625},{"lat":-29.8359375,"lng":76.0234375},{"lat":-29.640625,"lng":76.7109375},{"lat":-29.703125,"lng":77.4921875},{"lat":-29.9375,"lng":78.2109375},{"lat":-28.4375,"lng":78.03125},{"lat":-27.0078125,"lng":78.6484375},{"lat":-26.078125,"lng":80},{"lat":-25.953125,"lng":81.25},{"lat":-25.4375,"lng":82.125},{"lat":-25.0078125,"lng":82.78125},{"lat":-24.90625,"lng":83.65625},{"lat":-25.09375,"lng":84.5859375},{"lat":-25.4375,"lng":85.375},{"lat":-26.1015625,"lng":86.0703125},{"lat":-27,"lng":86.375},{"lat":-27.859375,"lng":86.5234375},{"lat":-28.75,"lng":86.3125},{"lat":-28.9609375,"lng":86.109375},{"lat":-33.6875,"lng":85.28125},{"lat":-34.859375,"lng":85.4765625},{"lat":-35.875,"lng":85.2890625},{"lat":-36.875,"lng":84.6171875},{"lat":-37.5,"lng":83.6875},{"lat":-37.6875,"lng":82.21875},{"lat":-38.6484375,"lng":81.0703125},{"lat":-38.84375,"lng":79.78125},{"lat":-39.65625,"lng":78.8125},{"lat":-40.2890625,"lng":77.1015625},{"lat":-40.828125,"lng":75.40625},{"lat":-40.6640625,"lng":74.28125},{"lat":-41.3359375,"lng":74.03125},{"lat":-42.6484375,"lng":71.3984375},{"lat":-43.875,"lng":68.5625},{"lat":-45.1875,"lng":65.8125},{"lat":-45.546875,"lng":64.2890625},{"lat":-45.3359375,"lng":62.6640625},{"lat":-44.484375,"lng":60.734375},{"lat":-42,"lng":59.4375}],
|
||||
"title": "curl.//",
|
||||
"description": "The seemingly most important lib there is. Curl. <a href='https://imgs.xkcd.com/comics/dependency.png> A fitting xkcd comic</a>."
|
||||
},
|
||||
{
|
||||
"points": [{"lat":-70.34375,"lng":61.8515625},{"lat":-69.4375,"lng":61.453125},{"lat":-68.0859375,"lng":61.8203125},{"lat":-62.1328125,"lng":67.1484375},{"lat":-61.5546875,"lng":68.1484375},{"lat":-61.1015625,"lng":69.3984375},{"lat":-60.609375,"lng":70.0078125},{"lat":-60.0546875,"lng":70.1796875},{"lat":-58.578125,"lng":71.8515625},{"lat":-57.65625,"lng":73.34375},{"lat":-57.546875,"lng":73.8828125},{"lat":-57.75,"lng":74.3828125},{"lat":-55.40625,"lng":76.7890625},{"lat":-54.90625,"lng":76.953125},{"lat":-51.3828125,"lng":80.84375},{"lat":-50.5859375,"lng":82.171875},{"lat":-50.640625,"lng":82.9140625},{"lat":-50.9375,"lng":83.5},{"lat":-52.015625,"lng":83.4375},{"lat":-53.234375,"lng":82.703125},{"lat":-56.9453125,"lng":79.0234375},{"lat":-57.21875,"lng":78.5},{"lat":-59.625,"lng":76.3125},{"lat":-60.8203125,"lng":76.34375},{"lat":-62.3203125,"lng":75.078125},{"lat":-63.640625,"lng":73.7109375},{"lat":-63.9453125,"lng":73.1015625},{"lat":-64.5,"lng":72.6875},{"lat":-65.3046875,"lng":72.3671875},{"lat":-65.7578125,"lng":72.1640625},{"lat":-66.203125,"lng":71.9140625},{"lat":-71.5546875,"lng":65.984375},{"lat":-71.859375,"lng":65.3125},{"lat":-72.0625,"lng":64.5},{"lat":-72.0546875,"lng":63.65625},{"lat":-71.59375,"lng":63.0078125},{"lat":-70.375,"lng":61.875}],
|
||||
"title": "LTT Screwdriver",
|
||||
"description": "A screwdriver from the lttstore.com"
|
||||
},
|
||||
{
|
||||
"points": [{"lat":-89.0625,"lng":102},{"lat":-87.19921875,"lng":102.7890625},{"lat":-85.69921875,"lng":106.25},{"lat":-85.328125,"lng":106.5},{"lat":-82.796875,"lng":112.4375},{"lat":-82.046875,"lng":112.859375},{"lat":-81.65625,"lng":113.4375},{"lat":-81.078125,"lng":113.796875},{"lat":-78.890625,"lng":119.59375},{"lat":-78.9375,"lng":120.328125},{"lat":-79.0859375,"lng":120.48046875},{"lat":-78.921875,"lng":121.28515625},{"lat":-78.5078125,"lng":121.4609375},{"lat":-78.1484375,"lng":122.26171875},{"lat":-77.62890625,"lng":121.99609375},{"lat":-76.984375,"lng":121.88671875},{"lat":-76.53125,"lng":122.09375},{"lat":-76.19921875,"lng":122.515625},{"lat":-76.0078125,"lng":123.046875},{"lat":-76.078125,"lng":123.57421875},{"lat":-76.4140625,"lng":124.03515625},{"lat":-76.80078125,"lng":124.2421875},{"lat":-82.99609375,"lng":126.7265625},{"lat":-84.171875,"lng":127.26171875},{"lat":-84.54296875,"lng":128.05859375},{"lat":-85.28515625,"lng":128.53515625},{"lat":-86.19921875,"lng":128.3203125},{"lat":-86.6953125,"lng":127.6640625},{"lat":-88.75390625,"lng":126.76171875},{"lat":-96.8984375,"lng":106.58984375},{"lat":-96.05859375,"lng":104.515625},{"lat":-89.12109375,"lng":101.96484375}],
|
||||
"title": "GPU",
|
||||
"description": "A GPU."
|
||||
}
|
||||
]
|
||||
}
|
||||
2925
gdal2tiles.py
Normal file
2925
gdal2tiles.py
Normal file
File diff suppressed because it is too large
Load Diff
181
index.html
Normal file
181
index.html
Normal file
@ -0,0 +1,181 @@
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>Whats On My Laptop - TheGreydiamond</title>
|
||||
<meta name="description" content="Whats On My Laptop - TheGreydiamond">
|
||||
<meta name="author" content="TheGreydiamond">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
|
||||
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
|
||||
crossorigin="" />
|
||||
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
|
||||
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
|
||||
crossorigin=""></script>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
|
||||
crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<script src="./rastercoords.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton"></script>
|
||||
<script src="static/leaflet-editable-polyline.js"> </script>
|
||||
|
||||
<meta property="og:title" content="Whats On My Laptop - TheGreydiamond">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://staging.thegreydiamond.de/projects/whats_on_my_laptop/">
|
||||
<meta property="og:description"
|
||||
content="Did you ever wonder what the stickers on my Laptop meant? Now you can find out!">
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 100%;
|
||||
background-color: rgb(221, 221, 221);
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<script src="./watermark.js"></script>
|
||||
<script>
|
||||
function download_file(name, contents, mime_type) {
|
||||
mime_type = mime_type || "text/plain";
|
||||
|
||||
var blob = new Blob([contents], { type: mime_type });
|
||||
|
||||
var dlink = document.createElement('a');
|
||||
dlink.download = name;
|
||||
dlink.href = window.URL.createObjectURL(blob);
|
||||
dlink.onclick = function (e) {
|
||||
// revokeObjectURL needs a delay to work properly
|
||||
var that = this;
|
||||
setTimeout(function () {
|
||||
window.URL.revokeObjectURL(that.href);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
dlink.click();
|
||||
dlink.remove();
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
// Check if url parameter is set
|
||||
var urlParams = new URLSearchParams(window.location.search);
|
||||
var isEdit = urlParams.get('edit') == "true" ? true : false
|
||||
|
||||
var map = L.map('map', {
|
||||
zoomControl: true,
|
||||
crs: L.CRS.Simple
|
||||
}).setView([0, 0], 13);
|
||||
|
||||
|
||||
/***
|
||||
* Change this to your resolution!!!
|
||||
*/
|
||||
|
||||
var img = [
|
||||
4000, // original width of image (here from `example/karta.jpg`)
|
||||
1848 // original height of image
|
||||
]
|
||||
|
||||
// assign map and image dimensions
|
||||
var rc = new L.RasterCoords(map, img)
|
||||
// set max zoom Level (might be `x` if gdal2tiles was called with `-z 0-x` option)
|
||||
map.setMaxZoom(rc.zoomLevel())
|
||||
// all coordinates need to be unprojected using the `unproject` method
|
||||
// set the view in the lower right edge of the image
|
||||
map.setView(rc.unproject([img[0], img[1]]), 2)
|
||||
|
||||
myPolyLines = []
|
||||
var polylineOptions = {
|
||||
// The user can add new polylines by clicking anywhere on the map:
|
||||
newPolylines: true,
|
||||
newPolylineConfirmMessage: 'Add a new polyline here?',
|
||||
// Show editable markers only if less than this number are in map bounds:
|
||||
maxMarkers: 100
|
||||
}
|
||||
|
||||
|
||||
// Fetch the points.JSON file
|
||||
$.getJSON("data/points.json", function (data) {
|
||||
data = data["aoi"]
|
||||
for (elemnt in data) {
|
||||
importantPoints = []
|
||||
//debugger;
|
||||
for (point in data[elemnt].points) {
|
||||
|
||||
transformedCoords = [data[elemnt].points[point].lat, data[elemnt].points[point].lng]
|
||||
importantPoints.push(transformedCoords)
|
||||
}
|
||||
if(isEdit) {
|
||||
var newPolyline = L.Polyline.PolylineEditor(importantPoints, polylineOptions)
|
||||
} else {
|
||||
newPolyline = new L.Polyline(importantPoints, {
|
||||
color: 'red',
|
||||
weight: 3,
|
||||
opacity: 0.5,
|
||||
smoothFactor: 1,
|
||||
fill: true
|
||||
});
|
||||
newPolyline.bindPopup("<b>" + data[elemnt].title + "</b><br>" + data[elemnt].description)
|
||||
}
|
||||
|
||||
|
||||
myPolyLines.push(newPolyline)
|
||||
newPolyline.addTo(map)
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
function exportPolylines(arrayIndex) {
|
||||
console.log(JSON.stringify(myPolyLines[arrayIndex].getLatLngs()))
|
||||
|
||||
// download_file("polyline.json", JSON.stringify(myPolyLines[arrayIndex].getLatLngs()))
|
||||
}
|
||||
|
||||
|
||||
|
||||
L.tileLayer('./tiles/{z}/{x}/{y}.png', {
|
||||
noWrap: true,
|
||||
bounds: rc.getMaxBounds(),
|
||||
maxNativeZoom: rc.zoomLevel()
|
||||
}).addTo(map)
|
||||
|
||||
points = []
|
||||
|
||||
map.on("click", function handleClickEvent(ev) {
|
||||
console.log(ev.latlng)
|
||||
points.push(ev.latlng)
|
||||
// console.log("[" + ev.latlng.lat + ", " + ev.latlng.lng + "]")
|
||||
//console.log(points)
|
||||
console.log(JSON.stringify(points))
|
||||
})
|
||||
|
||||
|
||||
map.attributionControl.addAttribution('Whats on my Laptop © <a href="https://thegreydiamond.de">TheGreydiamond</a>');
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
90
rastercoords.js
Normal file
90
rastercoords.js
Normal file
@ -0,0 +1,90 @@
|
||||
/**
|
||||
* leaflet plugin for plain image map projection
|
||||
* @copyright 2016- commenthol
|
||||
* @license MIT
|
||||
*/
|
||||
/* globals define */
|
||||
/* eslint no-var:off */
|
||||
|
||||
;(function (factory) {
|
||||
var L
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD
|
||||
define(['leaflet'], factory)
|
||||
} else if (typeof module !== 'undefined') {
|
||||
// Node/CommonJS
|
||||
L = require('leaflet')
|
||||
module.exports = factory(L)
|
||||
} else {
|
||||
// Browser globals
|
||||
if (typeof window.L === 'undefined') {
|
||||
throw new Error('Leaflet must be loaded first')
|
||||
}
|
||||
factory(window.L)
|
||||
}
|
||||
}(function (L) {
|
||||
/**
|
||||
* L.RasterCoords
|
||||
* @param {L.map} map - the map used
|
||||
* @param {Array} imgsize - [ width, height ] image dimensions
|
||||
* @param {Number} [tilesize] - tilesize in pixels. Default=256
|
||||
*/
|
||||
L.RasterCoords = function (map, imgsize, tilesize) {
|
||||
this.map = map
|
||||
this.width = imgsize[0]
|
||||
this.height = imgsize[1]
|
||||
this.tilesize = tilesize || 256
|
||||
this.zoom = this.zoomLevel()
|
||||
if (this.width && this.height) {
|
||||
this.setMaxBounds()
|
||||
}
|
||||
}
|
||||
|
||||
L.RasterCoords.prototype = {
|
||||
/**
|
||||
* calculate accurate zoom level for the given image size
|
||||
*/
|
||||
zoomLevel: function () {
|
||||
return Math.ceil(
|
||||
Math.log(
|
||||
Math.max(this.width, this.height) /
|
||||
this.tilesize
|
||||
) / Math.log(2)
|
||||
)
|
||||
},
|
||||
/**
|
||||
* unproject `coords` to the raster coordinates used by the raster image projection
|
||||
* @param {Array} coords - [ x, y ]
|
||||
* @return {L.LatLng} - internal coordinates
|
||||
*/
|
||||
unproject: function (coords) {
|
||||
return this.map.unproject(coords, this.zoom)
|
||||
},
|
||||
/**
|
||||
* project `coords` back to image coordinates
|
||||
* @param {Array} coords - [ x, y ]
|
||||
* @return {L.LatLng} - image coordinates
|
||||
*/
|
||||
project: function (coords) {
|
||||
return this.map.project(coords, this.zoom)
|
||||
},
|
||||
/**
|
||||
* get the max bounds of the image
|
||||
*/
|
||||
getMaxBounds: function () {
|
||||
var southWest = this.unproject([0, this.height])
|
||||
var northEast = this.unproject([this.width, 0])
|
||||
return new L.LatLngBounds(southWest, northEast)
|
||||
},
|
||||
/**
|
||||
* sets the max bounds on map
|
||||
*/
|
||||
setMaxBounds: function () {
|
||||
var bounds = this.getMaxBounds()
|
||||
this.map.setMaxBounds(bounds)
|
||||
}
|
||||
}
|
||||
|
||||
return L.RasterCoords
|
||||
}))
|
||||
; // eslint-disable-line semi
|
||||
589
static/leaflet-editable-polyline.js
Normal file
589
static/leaflet-editable-polyline.js
Normal file
@ -0,0 +1,589 @@
|
||||
L.Polyline.polylineEditor = L.Polyline.extend({
|
||||
_prepareMapIfNeeded: function() {
|
||||
var that = this;
|
||||
that._changed = false;
|
||||
|
||||
if(this._map._editablePolylines != null) {
|
||||
return
|
||||
}
|
||||
|
||||
// Container for all editable polylines on this map:
|
||||
this._map._editablePolylines = [];
|
||||
this._map._editablePolylinesEnabled = true;
|
||||
|
||||
// Click anywhere on map to add a new point-polyline:
|
||||
if(this._options.newPolylines) {
|
||||
console.log('click na map');
|
||||
that._map.on('dblclick', function(event) {
|
||||
console.log('click, target=' + (event.target == that._map) + ' type=' + event.type);
|
||||
if(that._map.isEditablePolylinesBusy())
|
||||
return;
|
||||
|
||||
var latLng = event.latlng;
|
||||
if(that._options.newPolylineConfirmMessage)
|
||||
if(!confirm(that._options.newPolylineConfirmMessage))
|
||||
return
|
||||
|
||||
var contexts = [{'originalPolylineNo': null, 'originalPointNo': null}];
|
||||
L.Polyline.PolylineEditor([latLng], that._options, contexts).addTo(that._map);
|
||||
|
||||
that._showBoundMarkers();
|
||||
that._changed = true;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if there is *any* busy editable polyline on this map.
|
||||
*/
|
||||
this._map.isEditablePolylinesBusy = function() {
|
||||
var map = this;
|
||||
for(var i = 0; i < map._editablePolylines.length; i++)
|
||||
if(map._editablePolylines[i]._isBusy())
|
||||
return true;
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Enable/disable editing.
|
||||
*/
|
||||
this._map.setEditablePolylinesEnabled = function(enabled) {
|
||||
var map = this;
|
||||
map._editablePolylinesEnabled = enabled;
|
||||
for(var i = 0; i < map._editablePolylines.length; i++) {
|
||||
var polyline = map._editablePolylines[i];
|
||||
if(enabled) {
|
||||
polyline._showBoundMarkers();
|
||||
} else {
|
||||
polyline._hideAll();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* Utility method added to this map to retreive editable
|
||||
* polylines.
|
||||
*/
|
||||
this._map.getEditablePolylines = function() {
|
||||
var map = this;
|
||||
return map._editablePolylines;
|
||||
}
|
||||
|
||||
this._map.fixAroundEditablePoint = function(marker) {
|
||||
var map = this;
|
||||
for(var i = 0; i < map._editablePolylines.length; i++) {
|
||||
var polyline = map._editablePolylines[i];
|
||||
polyline._reloadPolyline(marker);
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Will add all needed methods to this polyline.
|
||||
*/
|
||||
_addMethods: function() {
|
||||
var that = this;
|
||||
|
||||
this._init = function(options, contexts) {
|
||||
this._prepareMapIfNeeded();
|
||||
|
||||
/**
|
||||
* Since all point editing is done by marker events, markers
|
||||
* will be the main holder of the polyline points locations.
|
||||
* Every marker contains a reference to the newPointMarker
|
||||
* *before* him (=> the first marker has newPointMarker=null).
|
||||
*/
|
||||
this._parseOptions(options);
|
||||
|
||||
this._markers = [];
|
||||
var points = this.getLatLngs();
|
||||
var length = points.length;
|
||||
for(var i = 0; i < length; i++) {
|
||||
var marker = this._addMarkers(i, points[i]);
|
||||
if(! ('context' in marker)) {
|
||||
marker.context = {}
|
||||
if(that._contexts != null) {
|
||||
marker.context = contexts[i];
|
||||
}
|
||||
}
|
||||
|
||||
if(marker.context && ! ('originalPointNo' in marker.context))
|
||||
marker.context.originalPointNo = i;
|
||||
if(marker.context && ! ('originalPolylineNo' in marker.context))
|
||||
marker.context.originalPolylineNo = that._map._editablePolylines.length;
|
||||
}
|
||||
|
||||
// Map move => show different editable markers:
|
||||
var map = this._map;
|
||||
this._map.on("zoomend", function(e) {
|
||||
that._showBoundMarkers();
|
||||
});
|
||||
this._map.on("moveend", function(e) {
|
||||
that._showBoundMarkers();
|
||||
});
|
||||
|
||||
if(this._desiredPolylineNo && this._desiredPolylineNo != null) {
|
||||
this._map._editablePolylines.splice(this._desiredPolylineNo, 0, this);
|
||||
} else {
|
||||
this._map._editablePolylines.push(this);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if is busy adding/moving new nodes. Note, there may be
|
||||
* *other* editable polylines on the same map which *are* busy.
|
||||
*/
|
||||
this._isBusy = function() {
|
||||
return that._busy;
|
||||
};
|
||||
|
||||
this._setBusy = function(busy) {
|
||||
that._busy = busy;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get markers for this polyline.
|
||||
*/
|
||||
this.getPoints = function() {
|
||||
return this._markers;
|
||||
};
|
||||
|
||||
this.isChanged = function() {
|
||||
return this._changed;
|
||||
}
|
||||
|
||||
this._parseOptions = function(options) {
|
||||
if(!options)
|
||||
options = {};
|
||||
|
||||
// Do not show edit markers if more than maxMarkers would be shown:
|
||||
if(!('maxMarkers' in options))
|
||||
options.maxMarkers = 100;
|
||||
if(!('newPolylines' in options))
|
||||
options.newPolylines = false;
|
||||
if(!('newPolylineConfirmMessage' in options))
|
||||
options.newPolylineConfirmMessage = '';
|
||||
if(!('addFirstLastPointEvent' in options))
|
||||
options.addFirstLastPointEvent = 'click';
|
||||
if(!('customPointListeners' in options))
|
||||
options.customPointListeners = {};
|
||||
if(!('customNewPointListeners' in options))
|
||||
options.customNewPointListeners = {};
|
||||
|
||||
this._options = options;
|
||||
|
||||
// Icons:
|
||||
if(!options.pointIcon)
|
||||
this._options.pointIcon = L.icon({ iconUrl: 'editmarker.png', iconSize: [11, 11], iconAnchor: [6, 6] });
|
||||
if(!options.newPointIcon)
|
||||
this._options.newPointIcon = L.icon({ iconUrl: 'editmarker2.png', iconSize: [11, 11], iconAnchor: [6, 6] });
|
||||
};
|
||||
|
||||
/**
|
||||
* Show only markers in current map bounds *is* there are only a certain
|
||||
* number of markers. This method is called on eventy that change map
|
||||
* bounds.
|
||||
*/
|
||||
this._showBoundMarkers = function() {
|
||||
if (!that._map) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._setBusy(false);
|
||||
|
||||
if(!that._map._editablePolylinesEnabled) {
|
||||
console.log('Do not show because editing is disabled');
|
||||
return;
|
||||
}
|
||||
|
||||
var bounds = that._map.getBounds();
|
||||
var found = 0;
|
||||
for(var polylineNo in that._map._editablePolylines) {
|
||||
var polyline = that._map._editablePolylines[polylineNo];
|
||||
for(var markerNo in polyline._markers) {
|
||||
var marker = polyline._markers[markerNo];
|
||||
if(bounds.contains(marker.getLatLng()))
|
||||
found += 1;
|
||||
}
|
||||
}
|
||||
|
||||
for(var polylineNo in that._map._editablePolylines) {
|
||||
var polyline = that._map._editablePolylines[polylineNo];
|
||||
for(var markerNo in polyline._markers) {
|
||||
var marker = polyline._markers[markerNo];
|
||||
if(found < that._options.maxMarkers) {
|
||||
that._setMarkerVisible(marker, bounds.contains(marker.getLatLng()));
|
||||
that._setMarkerVisible(marker.newPointMarker, markerNo > 0 && bounds.contains(marker.getLatLng()));
|
||||
} else {
|
||||
that._setMarkerVisible(marker, false);
|
||||
that._setMarkerVisible(marker.newPointMarker, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Used when adding/moving points in order to disable the user to mess
|
||||
* with other markers (+ easier to decide where to put the point
|
||||
* without too many markers).
|
||||
*/
|
||||
this._hideAll = function(except) {
|
||||
this._setBusy(true);
|
||||
for(var polylineNo in that._map._editablePolylines) {
|
||||
console.log("hide " + polylineNo + " markers");
|
||||
var polyline = that._map._editablePolylines[polylineNo];
|
||||
for(var markerNo in polyline._markers) {
|
||||
var marker = polyline._markers[markerNo];
|
||||
if(except == null || except != marker)
|
||||
polyline._setMarkerVisible(marker, false);
|
||||
if(except == null || except != marker.newPointMarker)
|
||||
polyline._setMarkerVisible(marker.newPointMarker, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show/hide marker.
|
||||
*/
|
||||
this._setMarkerVisible = function(marker, show) {
|
||||
if(!marker)
|
||||
return;
|
||||
|
||||
var map = this._map;
|
||||
if(show) {
|
||||
if(!marker._visible) {
|
||||
if(!marker._map) { // First show for this marker:
|
||||
marker.addTo(map);
|
||||
} else { // Marker was already shown and hidden:
|
||||
map.addLayer(marker);
|
||||
}
|
||||
marker._map = map;
|
||||
}
|
||||
marker._visible = true;
|
||||
} else {
|
||||
if(marker._visible) {
|
||||
map.removeLayer(marker);
|
||||
}
|
||||
marker._visible = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Reload polyline. If it is busy, then the bound markers will not be
|
||||
* shown.
|
||||
*/
|
||||
this._reloadPolyline = function(fixAroundPointNo) {
|
||||
that.setLatLngs(that._getMarkerLatLngs());
|
||||
if(fixAroundPointNo != null)
|
||||
that._fixAround(fixAroundPointNo);
|
||||
that._showBoundMarkers();
|
||||
that._changed = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add two markers (a point marker and his newPointMarker) for a
|
||||
* single point.
|
||||
*
|
||||
* Markers are not added on the map here, the marker.addTo(map) is called
|
||||
* only later when needed first time because of performance issues.
|
||||
*/
|
||||
this._addMarkers = function(pointNo, latLng, fixNeighbourPositions) {
|
||||
var that = this;
|
||||
var points = this.getLatLngs();
|
||||
var marker = L.marker(latLng, {draggable: true, icon: this._options.pointIcon});
|
||||
|
||||
marker.newPointMarker = null;
|
||||
marker.on('dragstart', function(event) {
|
||||
var pointNo = that._getPointNo(event.target);
|
||||
var previousPoint = pointNo && pointNo > 0 ? that._markers[pointNo - 1].getLatLng() : null;
|
||||
var nextPoint = pointNo < that._markers.length - 1 ? that._markers[pointNo + 1].getLatLng() : null;
|
||||
that._setupDragLines(marker, previousPoint, nextPoint);
|
||||
that._hideAll(marker);
|
||||
});
|
||||
marker.on('dragend', function(event) {
|
||||
var marker = event.target;
|
||||
var pointNo = that._getPointNo(event.target);
|
||||
setTimeout(function() {
|
||||
that._reloadPolyline(pointNo);
|
||||
}, 25);
|
||||
});
|
||||
marker.on('contextmenu', function(event) {
|
||||
var marker = event.target;
|
||||
var pointNo = that._getPointNo(event.target);
|
||||
that._map.removeLayer(marker);
|
||||
that._map.removeLayer(newPointMarker);
|
||||
that._markers.splice(pointNo, 1);
|
||||
that._reloadPolyline(pointNo);
|
||||
});
|
||||
marker.on(that._options.addFirstLastPointEvent, function(event) {
|
||||
|
||||
console.log('click on marker');
|
||||
var marker = event.target;
|
||||
var pointNo = that._getPointNo(event.target);
|
||||
console.log('pointNo=' + pointNo + ' that._markers.length=' + that._markers.length);
|
||||
event.dont;
|
||||
if(pointNo == 0 || pointNo == that._markers.length - 1) {
|
||||
console.log('first or last');
|
||||
that._prepareForNewPoint(marker, pointNo == 0 ? 0 : pointNo + 1);
|
||||
} else {
|
||||
console.log('not first or last');
|
||||
}
|
||||
});
|
||||
|
||||
var previousPoint = points[pointNo == 0 ? pointNo : pointNo - 1];
|
||||
var newPointMarker = L.marker([(latLng.lat + previousPoint.lat) / 2.,
|
||||
(latLng.lng + previousPoint.lng) / 2.],
|
||||
{draggable: true, icon: this._options.newPointIcon});
|
||||
marker.newPointMarker = newPointMarker;
|
||||
newPointMarker.on('dragstart', function(event) {
|
||||
var pointNo = that._getPointNo(event.target);
|
||||
var previousPoint = that._markers[pointNo - 1].getLatLng();
|
||||
var nextPoint = that._markers[pointNo].getLatLng();
|
||||
that._setupDragLines(marker.newPointMarker, previousPoint, nextPoint);
|
||||
|
||||
that._hideAll(marker.newPointMarker);
|
||||
});
|
||||
newPointMarker.on('dragend', function(event) {
|
||||
var marker = event.target;
|
||||
var pointNo = that._getPointNo(event.target);
|
||||
that._addMarkers(pointNo, marker.getLatLng(), true);
|
||||
setTimeout(function() {
|
||||
that._reloadPolyline();
|
||||
}, 25);
|
||||
});
|
||||
newPointMarker.on('contextmenu', function(event) {
|
||||
// 1. Remove this polyline from map
|
||||
var marker = event.target;
|
||||
var pointNo = that._getPointNo(marker);
|
||||
var markers = that.getPoints();
|
||||
that._hideAll();
|
||||
|
||||
var secondPartMarkers = that._markers.slice(pointNo, pointNo.length);
|
||||
that._markers.splice(pointNo, that._markers.length - pointNo);
|
||||
|
||||
that._reloadPolyline();
|
||||
|
||||
var points = [];
|
||||
var contexts = [];
|
||||
for(var i = 0; i < secondPartMarkers.length; i++) {
|
||||
var marker = secondPartMarkers[i];
|
||||
points.push(marker.getLatLng());
|
||||
contexts.push(marker.context);
|
||||
}
|
||||
|
||||
console.log('points:' + points);
|
||||
console.log('contexts:' + contexts);
|
||||
|
||||
// Need to know the current polyline order numbers, because
|
||||
// the splitted one need to be inserted immediately after:
|
||||
var originalPolylineNo = that._map._editablePolylines.indexOf(that);
|
||||
|
||||
L.Polyline.PolylineEditor(points, that._options, contexts, originalPolylineNo + 1)
|
||||
.addTo(that._map);
|
||||
|
||||
that._showBoundMarkers();
|
||||
});
|
||||
|
||||
this._markers.splice(pointNo, 0, marker);
|
||||
|
||||
// User-defined custom event listeners:
|
||||
if(that._options.customPointListeners)
|
||||
for(var eventName in that._options.customPointListeners)
|
||||
marker.on(eventName, that._options.customPointListeners[eventName]);
|
||||
if(that._options.customNewPointListeners)
|
||||
for(var eventName in that._options.customNewPointListeners)
|
||||
newPointMarker.on(eventName, that._options.customNewPointListeners[eventName]);
|
||||
|
||||
if(fixNeighbourPositions) {
|
||||
this._fixAround(pointNo);
|
||||
}
|
||||
|
||||
return marker;
|
||||
};
|
||||
|
||||
/**
|
||||
* Event handlers for first and last point.
|
||||
*/
|
||||
this._prepareForNewPoint = function(marker, pointNo) {
|
||||
// This is slightly delayed to prevent the same propagated event
|
||||
// to be catched here:
|
||||
setTimeout(
|
||||
function() {
|
||||
that._hideAll();
|
||||
that._setupDragLines(marker, marker.getLatLng());
|
||||
that._map.once('click', function(event) {
|
||||
if(that._markers.length == 1) {
|
||||
pointNo += 1;
|
||||
}
|
||||
console.log('dodajemo na ' + pointNo + ' - ' + event.latlng);
|
||||
that._addMarkers(pointNo, event.latlng, true);
|
||||
that._reloadPolyline();
|
||||
});
|
||||
},
|
||||
100
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Fix nearby new point markers when the new point is created.
|
||||
*/
|
||||
this._fixAround = function(pointNoOrMarker) {
|
||||
if((typeof pointNoOrMarker) == 'number')
|
||||
var pointNo = pointNoOrMarker;
|
||||
else
|
||||
var pointNo = that._markers.indexOf(pointNoOrMarker);
|
||||
|
||||
if(pointNo < 0)
|
||||
return;
|
||||
|
||||
var previousMarker = pointNo == 0 ? null : that._markers[pointNo - 1];
|
||||
var marker = that._markers[pointNo];
|
||||
var nextMarker = pointNo < that._markers.length - 1 ? that._markers[pointNo + 1] : null;
|
||||
if(marker && previousMarker) {
|
||||
marker.newPointMarker.setLatLng([(previousMarker.getLatLng().lat + marker.getLatLng().lat) / 2.,
|
||||
(previousMarker.getLatLng().lng + marker.getLatLng().lng) / 2.]);
|
||||
}
|
||||
if(marker && nextMarker) {
|
||||
nextMarker.newPointMarker.setLatLng([(marker.getLatLng().lat + nextMarker.getLatLng().lat) / 2.,
|
||||
(marker.getLatLng().lng + nextMarker.getLatLng().lng) / 2.]);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Find the order number of the marker.
|
||||
*/
|
||||
this._getPointNo = function(marker) {
|
||||
for(var i = 0; i < this._markers.length; i++) {
|
||||
if(marker == this._markers[i] || marker == this._markers[i].newPointMarker) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get polyline latLngs based on marker positions.
|
||||
*/
|
||||
this._getMarkerLatLngs = function() {
|
||||
var result = [];
|
||||
for(var i = 0; i < this._markers.length; i++)
|
||||
result.push(this._markers[i].getLatLng());
|
||||
return result;
|
||||
};
|
||||
|
||||
this._setupDragLines = function(marker, point1, point2) {
|
||||
var line1 = null;
|
||||
var line2 = null;
|
||||
if(point1) line1 = L.polyline([marker.getLatLng(), point1], {dasharray: "5,1", weight: 1})
|
||||
.addTo(that._map);
|
||||
if(point2) line2 = L.polyline([marker.getLatLng(), point2], {dasharray: "5,1", weight: 1})
|
||||
.addTo(that._map);
|
||||
|
||||
var moveHandler = function(event) {
|
||||
if(line1)
|
||||
line1.setLatLngs([event.latlng, point1]);
|
||||
if(line2)
|
||||
line2.setLatLngs([event.latlng, point2]);
|
||||
};
|
||||
|
||||
var stopHandler = function(event) {
|
||||
if (that._map) {
|
||||
that._map.off('mousemove', moveHandler);
|
||||
marker.off('dragend', stopHandler);
|
||||
if(line1) that._map.removeLayer(line1);
|
||||
if(line2) that._map.removeLayer(line2);
|
||||
console.log('STOPPED');
|
||||
if(event.target != that._map) {
|
||||
that._map.fire('click', event);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
that._map.on('mousemove', moveHandler);
|
||||
marker.on('dragend', stopHandler);
|
||||
|
||||
that._map.once('click', stopHandler);
|
||||
marker.once('click', stopHandler);
|
||||
if(line1) line1.once('click', stopHandler);
|
||||
if(line2) line2.once('click', stopHandler);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
L.Polyline.polylineEditor.addInitHook(function () {
|
||||
this.on('add', function(event) {
|
||||
this._map = event.target._map;
|
||||
this._addMethods();
|
||||
|
||||
/**
|
||||
* When addint a new point we must disable the user to mess with other
|
||||
* markers. One way is to check everywhere if the user is busy. The
|
||||
* other is to just remove other markers when the user is doing
|
||||
* somethinng.
|
||||
*
|
||||
* TODO: Decide the right way to do this and then leave only _busy or
|
||||
* _hideAll().
|
||||
*/
|
||||
this._busy = false;
|
||||
this._initialized = false;
|
||||
|
||||
this._init(this._options, this._contexts);
|
||||
|
||||
this._initialized = true;
|
||||
|
||||
return this;
|
||||
});
|
||||
|
||||
this.on('remove', function(event) {
|
||||
var polyline = event.target;
|
||||
var map = polyline._map;
|
||||
var polylines = map.getEditablePolylines();
|
||||
var index = polylines.indexOf(polyline);
|
||||
if (index > -1) {
|
||||
polylines[index]._markers.forEach(function(marker) {
|
||||
map.removeLayer(marker);
|
||||
if(marker.newPointMarker)
|
||||
map.removeLayer(marker.newPointMarker);
|
||||
});
|
||||
polylines.splice(index, 1);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Construct a new editable polyline.
|
||||
*
|
||||
* latlngs ... a list of points (or two-element tuples with coordinates)
|
||||
* options ... polyline options
|
||||
* contexts ... custom contexts for every point in the polyline. Must have the
|
||||
* same number of elements as latlngs and this data will be
|
||||
* preserved when new points are added or polylines splitted.
|
||||
* polylineNo ... insert this polyline in a specific order (used when splitting).
|
||||
*
|
||||
* More about contexts:
|
||||
* This is an array of objects that will be kept as "context" for every
|
||||
* point. Marker will keep this value as marker.context. New markers will
|
||||
* have context set to null.
|
||||
*
|
||||
* Contexts must be the same size as the polyline size!
|
||||
*
|
||||
* By default, even without calling this method -- every marker will have
|
||||
* context with one value: marker.context.originalPointNo with the
|
||||
* original order number of this point. The order may change if some
|
||||
* markers before this one are delted or new added.
|
||||
*/
|
||||
L.Polyline.PolylineEditor = function(latlngs, options, contexts, polylineNo) {
|
||||
// Since the app code may not be able to explicitly call the
|
||||
// initialization of all editable polylines (if the user created a new
|
||||
// one by splitting an existing), with this method you can control the
|
||||
// options for new polylines:
|
||||
if(options.prepareOptions) {
|
||||
options.prepareOptions(options);
|
||||
}
|
||||
|
||||
var result = new L.Polyline.polylineEditor(latlngs, options);
|
||||
result._options = options;
|
||||
result._contexts = contexts;
|
||||
result._desiredPolylineNo = polylineNo
|
||||
|
||||
return result;
|
||||
};
|
||||
17
tools/createtiles.sh
Executable file
17
tools/createtiles.sh
Executable file
@ -0,0 +1,17 @@
|
||||
#!/bin/bash
|
||||
|
||||
# do NOT forget to install `python-gdal` library
|
||||
# assuming you are on a debian like OS
|
||||
#sudo apt install python-gdal
|
||||
|
||||
# get the tool
|
||||
test ! -f gdal2tiles.py \
|
||||
&& curl https://raw.githubusercontent.com/commenthol/gdal2tiles-leaflet/master/gdal2tiles.py \
|
||||
> gdal2tiles.py \
|
||||
&& echo "'python-gdal' library required - please install"
|
||||
|
||||
# process ...
|
||||
export GDAL_ALLOW_LARGE_LIBJPEG_MEM_ALLOC=1
|
||||
python3 ./gdal2tiles.py -l -p raster -z 0-4 -w none 20230330_143536.jpg tiles
|
||||
|
||||
echo 'Now open "index.html" in your browser.'
|
||||
14
watermark.js
Normal file
14
watermark.js
Normal file
@ -0,0 +1,14 @@
|
||||
var css = "font-family: monospace; text-color: red;";
|
||||
console.log(`%c
|
||||
TTTTTTT
|
||||
T
|
||||
T GGGG
|
||||
G
|
||||
G GGG
|
||||
G DDDD
|
||||
GGGGG D
|
||||
D D
|
||||
DDDD
|
||||
Whats on my Laptop?
|
||||
© Sören Oesterwind aka thegreydiamond.de
|
||||
`, css);
|
||||
Reference in New Issue
Block a user