Difference between revisions of "Widget:Main page"

Latest revision as of 13:53, 5 March 2015

   <link rel="stylesheet" href="http://diving.sail-la-vie.com/extensions/MultiMaps/services/Leaflet/leaflet/leaflet.css"  />

   <script src="http://diving.sail-la-vie.com/extensions/MultiMaps/services/Leaflet/leaflet/leaflet.js"> </script>

   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css"  />
   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css"  />
   <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster-src.js"> </script>
   <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js"> </script>

   <script>

       var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>',
           thunLink1 = '<a href="http://thunderforest.com/">Thunderforest</a>',
           thunLink2 = '<a href="http://thunderforest.com/">Thunderforest</a>',
           thunLink3 = '<a href="http://thunderforest.com/">Thunderforest</a>',
           omsLink = '<a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a>';

       var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
           osmAttrib = '© ' + osmLink + ' Contributors',
           landUrl = 'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
           thunAttrib1 = '© '+osmLink+' Contributors & '+thunLink1,
           tranUrl = 'http://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png',
           thunAttrib2 = '© '+osmLink+' Contributors & '+thunLink2,
           cycleUrl = 'http://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png',
           thunAttrib3 = '© '+osmLink+' Contributors & '+thunLink3,
           omsUrl = 'http://openmapsurfer.uni-hd.de/tiles/roads/x={x}&y={y}&z={z}',
           omsAttrib = '© '+osmLink+' Contributors & '+omsLink;

       var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
           landMap = L.tileLayer(landUrl, {attribution: thunAttrib1}),
           tranMap = L.tileLayer(tranUrl, {attribution: thunAttrib2}),
           cycleMap = L.tileLayer(cycleUrl, {attribution: thunAttrib3}),
           omsMap = L.tileLayer(omsUrl, {attribution: omsAttrib});

       var map = L.map('map', {

layers: [osmMap] // only add one! }) .setView([38.115062, 23.853860], 7);

var baseLayers = { "OSM Mapnik": osmMap, "OpenMapSurfer": omsMap, "Landscape": landMap, "Cycle": cycleMap, "Transport": tranMap, };

L.control.layers(baseLayers).addTo(map);

   var clusters = new L.MarkerClusterGroup({showCoverageOnHover: false});
   $.getJSON("http://diving.sail-la-vie.com/coordinates.php", function(data) {
       var points = L.geoJson(data.features, {
           pointToLayer: function(feature, latlng) {
               var marker = L.marker(latlng);
               marker.bindPopup(feature.properties.name);
               clusters.addLayer(marker);
               return clusters;
           }
       });
   });
   clusters.addTo(map);

var myLayer = L.geoJson().addTo(map); $.getJSON("http://diving.sail-la-vie.com/images/Sailing_Areas_KMLs/Corinthean_Gulf.json", function(json) {

 myLayer.addData(json);

});

var myLayer = L.geoJson().addTo(map); $.getJSON("http://diving.sail-la-vie.com/images/Sailing_Areas_KMLs/Crete.json", function(json) {

 myLayer.addData(json);

});

var myLayer = L.geoJson().addTo(map); $.getJSON("http://diving.sail-la-vie.com/images/Sailing_Areas_KMLs/Cyclades.json", function(json) {

 myLayer.addData(json);

});

var myLayer = L.geoJson().addTo(map); $.getJSON("http://diving.sail-la-vie.com/images/Sailing_Areas_KMLs/Ionian_Islands.json", function(json) {

 myLayer.addData(json);

});

var myLayer = L.geoJson().addTo(map); $.getJSON("http://diving.sail-la-vie.com/images/Sailing_Areas_KMLs/North_East_Aegean.json", function(json) {

 myLayer.addData(json);

});

var myLayer = L.geoJson().addTo(map); $.getJSON("http://diving.sail-la-vie.com/images/Sailing_Areas_KMLs/Saronic_Islands.json", function(json) {

 myLayer.addData(json);

});

var myLayer = L.geoJson().addTo(map); $.getJSON("http://diving.sail-la-vie.com/images/Sailing_Areas_KMLs/Myrtoan_Sea.json", function(json) {

 myLayer.addData(json);

});

var myLayer = L.geoJson().addTo(map); $.getJSON("http://diving.sail-la-vie.com/images/Sailing_Areas_KMLs/Dodecanese.json", function(json) {

 myLayer.addData(json);

});

var myLayer = L.geoJson().addTo(map); $.getJSON("http://diving.sail-la-vie.com/images/Sailing_Areas_KMLs/Sporades.json", function(json) {

 myLayer.addData(json);

});

var myLayer = L.geoJson(undefined, {

    style: function (feature) {
        return feature.properties.style;
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.name);
    }
})

myLayer.addTo(map);

   </script>