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

Initial commit

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 [](
[![Help making this possible](](
## 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](
## License
Copyright 2018 [Adrien PAVIE](
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
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
<!DOCTYPE html>
<meta charset="UTF-8" />
<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="" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
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;
<p>Check availability of <a href="">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="">Adrien PAVIE</a> 2018 | <a href="">About</a></p>
<div id="map"></div>
<!-- Libraries -->
<script src="" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<script src=""></script>
<script src=""></script>
<script src="./lib/P4C.min.js"></script>
<!-- Init script -->
var PAST_TIME_MS = 1000 * 60 * 60 * 24 * 365 * 3; //3 years
var DIST_M = 20; //20 meters
var map ="map").setView([0,0], 3);
var picman = new P4C.PicturesManager();
L.tileLayer('https://{s}{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="">OpenStreetMap</a>',
preferCanvas: true
//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(, null, '<br />'));
control.loader.on('data:loaded', function (event) {
//Remove previous layer
if(layer) {
layer = null;
//Add layer as is
layer = event.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: - PAST_TIME_MS }) //15 meters around this point
.then(function(pictures) {
if(pictures.length > 0) {
//Found pictures
layer.setStyle({ color: "green" });
var text = JSON.stringify(, null, '<br />');
text += '<br />';
text += pictures
.map(function(p) {
return '<a href="'+p.pictureUrl+'">'+(new Date(' - '' - '+p.provider+'</a>';
.join('<br />');
else {
//No pictures
layer.setStyle({ color: "orange" });
.catch(function(e) {
layer.setStyle({ color: "red" });
var check = setInterval(function() {
if(sem > 0) {
}, 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)");
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