Commit d432c320 authored by Adrien Pavie's avatar Adrien Pavie
Browse files

Initial commit

parents
This diff is collapsed.
# Pic4You
__Pic4You__ is a very minimalist tool to check if there are open-licensed pictures around your geo features.
You can try it out at [pic4you.pavie.info](https://pic4you.pavie.info/).
[![Help making this possible](https://liberapay.com/assets/widgets/donate.svg)](https://liberapay.com/PanierAvide/donate)
## Purpose
The goal of this tool is to check if there are any pictures from various platforms (Mapillary, OpenStreetCam, Wikimedia Commons or Flickr) available around your geographic dataset.
## Contributing
This project is an open source tool, meaning it is made by volunteers. If you want to help us, there are several ways (technical or non-technical ones). You can find how to participate in the [contributing documentation](CONTRIBUTING.md).
## License
Copyright 2018 [Adrien PAVIE](https://pavie.info/)
See [LICENSE](LICENSE.txt) for complete AGPL3 license.
Pic4You is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Pic4You is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Pic4You. If not, see http://www.gnu.org/licenses/.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Pic4You</title>
<meta name="description" content="Tool for availability of open-licensed pictures around your geo features." />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Libraries -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<style>
html, body {
margin: 0;
padding: 0;
}
header {
position: absolute;
top: 0; right: 0;
z-index: 10000;
width: 400px;
background-color: white;
font-size: 0.7em;
text-align: center;
font-family: Arial;
padding: 10px;
border-bottom-left-radius: 15px;
border-left: 1px solid gray;
border-bottom: 1px solid gray;
}
header h1, header p { margin: 0; padding: 0 0 5px 0; }
#map {
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
}
</style>
</head>
<body>
<header>
<h1>Pic4You</h1>
<p>Check availability of <a href="https://framagit.org/Pic4Carto/Pic4Carto.js">free-licensed pictures</a></p>
<p>Use upload button (under zoom button on the left) to upload a file</p>
<p>Then wait a few moment, marker will change color according to availability</p>
<p>Gray = searching | Green = pics | Orange = no pics | Red = error</p>
<p>&copy; <a href="https://pavie.info/">Adrien PAVIE</a> 2018 | <a href="https://framagit.org/Pic4Carto/Pic4You">About</a></p>
</header>
<div id="map"></div>
<!-- Libraries -->
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<script src="https://unpkg.com/togeojson@0.16.0"></script>
<script src="https://unpkg.com/leaflet-filelayer@1.2.0/src/leaflet.filelayer.js"></script>
<script src="./lib/P4C.min.js"></script>
<!-- Init script -->
<script>
var PAST_TIME_MS = 1000 * 60 * 60 * 24 * 365 * 3; //3 years
var DIST_M = 20; //20 meters
var MAX_PARALLEL_CALLS = 3;
var map = L.map("map").setView([0,0], 3);
var picman = new P4C.PicturesManager();
var sem = MAX_PARALLEL_CALLS;
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
preferCanvas: true
}).addTo(map);
//File layer
var layer = null;
L.Control.FileLayerLoad.LABEL = '';
var control = L.Control.fileLayerLoad({
addToMap: false,
layerOptions: {
filter: function(feature) { return feature.geometry.type === "Point"; },
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, { color: "grey", fillOpacity: 0.7, radius: 5 })
.bindPopup(JSON.stringify(feature.properties, null, '<br />'));
}
}
}).addTo(map);
control.loader.on('data:loaded', function (event) {
//Remove previous layer
if(layer) {
map.removeLayer(layer);
layer = null;
}
//Add layer as is
layer = event.layer;
map.addLayer(layer);
layer.getLayers().forEach(function(layer, i) {
//Delay search to avoid blockings
var process = function() {
//Look for pictures
picman.startPicsRetrievalAround(layer._latlng, DIST_M, { towardscenter: true, mindate: Date.now() - PAST_TIME_MS }) //15 meters around this point
.then(function(pictures) {
sem++;
if(pictures.length > 0) {
//Found pictures
layer.setStyle({ color: "green" });
var text = JSON.stringify(layer.feature.properties, null, '<br />');
text += '<br />';
text += pictures
.map(function(p) {
return '<a href="'+p.pictureUrl+'">'+(new Date(p.date)).toLocaleString()+' - '+p.author+' - '+p.provider+'</a>';
})
.join('<br />');
layer.bindPopup(text);
}
else {
//No pictures
layer.setStyle({ color: "orange" });
}
})
.catch(function(e) {
//Error
sem++;
layer.setStyle({ color: "red" });
console.error(e);
});
};
var check = setInterval(function() {
if(sem > 0) {
sem--;
clearInterval(check);
process();
}
}, 100);
});
});
control.loader.on('data:error', function (error) {
alert("Can't read your file, please check that it is a valid geo file (GeoJSON, JSON, KML, GPX)");
console.error(error);
});
</script>
</body>
</html>
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment