Public
Snippet $378 authored by Adrien Pavie

Pic4Carto.js real world example

Edited
pic4cartojs_example.html
<!DOCTYPE html>
<html>
<head>
	<title>Pic4Carto.js example</title>
	<meta charset="utf-8" />
	
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
	
	<style>
		#mapid {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
		}
	</style>
</head>
<body>
	<div id="mapid"></div>
	
	<!-- JS includes -->
	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
	<script src="./P4C.min.js"></script>
	
	<!-- JS code -->
	<script>
		var mymap = L.map('mapid').setView([48.1238, -1.7087], 18); //Map init
		
		//Add base tile layer
		L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			name: "OpenStreetMap",
			attribution: "Tiles <a href=\"http://openstreetmap.org/\">OSM</a>",
			maxZoom: 19
		}).addTo(mymap);
		
		//Example data
		var geojsonData = {
			"type": "FeatureCollection",
			"generator": "overpass-turbo",
			"copyright": "The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.",
			"timestamp": "2017-01-23T19:26:02Z",
			"features": [
				{
					"type": "Feature",
					"properties": {"@id": "node/4288616921","amenity": "bicycle_parking","capacity": "10"},
					"geometry": {"type": "Point","coordinates": [-1.7089582,48.1235393]}
				},
				{
					"type": "Feature",
					"properties": {"@id": "node/286360839","amenity": "bicycle_parking","capacity": "12"},
					"geometry": {"type": "Point","coordinates": [-1.7089796,48.1243511]}
				},
				{
					"type": "Feature",
					"id": "node/2399071428",
					"properties": {"@id": "node/2399071428","amenity": "bicycle_parking","capacity": "10"},
					"geometry": {"type": "Point","coordinates": [-1.7086336,48.123244]}
				}
			]
		};
		
		var layers = {};
		
		//Add data to map
		L.geoJSON(geojsonData, { onEachFeature: function(feature, layer) {
			layers[feature.properties["@id"]] = layer;
			layer.bindPopup("Loading...");
		} }).addTo(mymap);
		
		//Retrieve pictures
		for(var i in layers) {
			let layer = layers[i];
			var coordinates = layer._latlng;
			
			//Create a picture manager
			var picman = new P4C.PicturesManager();
			
			//Set the handler when pictures are retrieved
			picman.on("picsready", function(pictures) {
				//Show first picture in popup
				if(pictures.length > 0) {
					layer.bindPopup("<h3>Picture</h3><img src=\""+pictures[0].pictureUrl+"\" style=\"width: 300px;\" />");
				}
				else {
					layer.bindPopup("No picture around !!");
				}
			});
			
			//Create a circle to let us have an area around the feature
			var bounds = L.circle(coordinates, { radius: 10 }).addTo(mymap).getBounds();
			
			//Call picture retrieval function
			picman.startPicsRetrieval(bounds);
		}
	</script>
</body>
</html>