Difference between revisions of "Widget:Test153"

Latest revision as of 06:25, 27 September 2014

   <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>

<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script> <link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' /> <link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />

   <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], 6);

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

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

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

   var Icon = L.icon({
     iconUrl: 'http://diving.sail-la-vie.com/images/0/01/Leaflet-icon.png',
   });
 myLayer.addData(json);

});

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>