commons2geojson.html

<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
    integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
    crossorigin=""></script>

    <style type="text/css">
    #map { height: 100%; }
    </style>
	<script src="jquery.min.js"></script>
	
</head>
<body>
<div id="map"/>

<script>

  var test_lonlat = { "lon": 9.89431, "lat":52.44972 };

  var tempel = { "lon": 9.70410, "lat":52.38727 }

  var mymap = L.map('map').setView([tempel.lat, tempel.lon], 18);

  var ic = L.icon({
    iconUrl: 'circle.png',
    iconSize: [64,64],
    iconAnchor: [32,32],
    
  });
  
  var osmlayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(mymap);
  

  var baseMaps = { 
    "OSM":osmlayer,
  };
  
  var cir = L.marker([52.44972, 9.89431], {icon: ic}).addTo(mymap);
  //L.marker([51.5, -0.09]).addTo(mymap);
  
  

  function onMapClick(e) {
    cir.setLatLng(e.latlng)
  }

  mymap.on('click', onMapClick);
  

  
  var geojsonpoint = function(lon,lat,props) {
    return {
      "type": "Feature",
      "properties": props,
      "geometry": {
      "type": "Point",
      "coordinates": [
        lon,
        lat
        
      ]
      }
    }
  }
  
  var make_fc = function(geomarray) {
    return {
      
        "type": "FeatureCollection",
        "features": geomarray
      
    }
  }
  
  var fcoll_orig = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "prop1": "bar",
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
     9.89431,
         52.44972
          
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "prop1": "foo",
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          9.8949,
          52.4491
        ]
      }
    }
  ]
}
  
  var fcoll_orig_layer = L.geoJson(fcoll_orig);
  
  var p1 = geojsonpoint(test_lonlat.lon, test_lonlat.lat, {"note": "bla"});
  var p2 = geojsonpoint(test_lonlat.lon+0.005, test_lonlat.lat+0.005, {"note": "jjdjdjdj"})
  var p3 = geojsonpoint(test_lonlat.lon-0.005, test_lonlat.lat-0.005, {"note": "XXXXXX"})
  
  var fc_functions = make_fc([p1,p2,p3]);
  
  var fcoll_from_func_layer = L.geoJson(fc_functions);
  
  var geojsonpoints;
  
  var commonsIcon = L.icon({
    iconUrl: "commons_without_arrow.png",
	iconSize: [16,16],
	iconAnchor: [8,8],
  });
  
  // Commons
  
  $.ajax( {
    url: "https://commons.wikimedia.org/w/api.php",
    data: {
	  action:'query',
      generator:'geosearch',
      ggsprimary:'all',
      ggsnamespace:'6',
      ggsradius:200,
      //ggscoord:test_lonlat.lat+ '|'+test_lonlat.lon,
	  ggscoord:tempel.lat+"|"+tempel.lon, // Leibniztempel
      ggslimit:50,
      prop:'imageinfo|coordinates',
      iilimit:50,
      iiprop:'url|extmetadata',
      iiurlwidth:200,
      iiurlheight:200,
      colimit:50,
      coprimary: 'all',
      format:'json',
    },
    jsonp: 'callback',
    dataType: 'jsonp',
    success: function(data,status,xhr) {
      var txt = "";
      if (data.query == undefined) {
        $("#imagelist").html("<i>no images found</i>");
      } else {
        geojsonpoints = Array();
        $.each(data.query.pages,
          function(i,v) {
            if (v.coordinates != undefined) {
              var opts = {};
			  if (v.imageinfo != undefined) {
			    opts.thumburl = v.imageinfo[0].thumburl;
                opts.descurl  = v.imageinfo[0].descriptionurl;
                if (v.imageinfo[0].extmetadata != undefined) {
				  if (v.imageinfo[0].extmetadata.Artist != undefined) {
                    opts.artist = v.imageinfo[0].extmetadata.Artist;
                  }
                } // end if extmetadata
              } // end if imageinfo != undefined
			  geojsonpoints.push( geojsonpoint(v.coordinates[0].lon, v.coordinates[0].lat, opts) );
			  
            } else {
			  // no coordinates
			  console.log("No coordinates");
            }
          }
        ); // end each
		L.geoJson(make_fc(geojsonpoints), {
			pointToLayer: function (feature, latlng) {
              return L.marker(latlng, {icon: commonsIcon});
            },
            onEachFeature: function(feature,layer) {
              layer.on('click', function() {
                // hier onclick für Bildmarker
				var i;
				alert(feature.properties.thumburl);
              });
            }
		}).addTo(mymap);
		
      }
    },
  }) // end ajax
  
  // end commons
  
  
  
  var overlays = { "Klickbarer Kreis ": cir, "JSON aus dem Code":fcoll_orig_layer, "JSON aus Funktionen":fcoll_from_func_layer };
  
  L.control.layers(baseMaps, overlays).addTo(mymap);
  

</script>

</body>
</html>